|
CSS - Vista Style Site (problem In Firefox)
Im just playing around with CSS and Photoshop and made this so far:-
http://www.o0matte0o.myby.co.uk/windows-vista/ Lazy Link It look as its ment to in IE7, Vista IE and IE6 (apart from the PNG Transparancy in IE6) but when I view the site in Firefox there are spaces between each of the sub titles and the Title on the Transparent part is not in the correct place can any one help to see where Im going wrong please? I have tested the CSS and XHTML and bouth complie to the standard so I cant see what Im doing wrong :S Code:
body { color:#565656; font-family: "Segoe UI", "Trebuchet MS", sans-serif; font-size: 80%; }
hr { display:none; }
img { border:none; }
body { padding:12px 0 25px; background-image:url(../images/background.png); }
h1 { padding:3px; font-size: 165%; padding-left:40px; }
h2 { font-size: 100%; padding-left:110px; line-height:8px; }
h3 { padding-left:225px; }
.p1, .p2, .p3, .p4, .p5 { padding-left: 230px; padding-right:15px;}
a { color:#6666FF; }
a:hover,a:active { background-color:#9999FF; color: #565656; }
#container { margin-left:10%; }
#pageHeader { width:822px; height:80px; overflow:hidden; background-image:url(../images/header-test.png); text-shadow:#333333;}
#quickSummary { width:822px; background-image:url(../images/content.png);}
#preamble { width:822px; background-image:url(../images/content.png); }
#explanation { width:822px; background-image:url(../images/content.png); }
#participation { width:822px; background-image:url(../images/content.png); }
#benefits { width:822px; background-image:url(../images/content.png); }
#requirements { width:822px; background-image:url(../images/content.png); }
#footer { width:822px; height:27px; text-align:center; background-image:url(../images/footer-test.png); }
#linkList { position:absolute; float:left; top:100px; }
#linkList h3 { padding-left:30px; padding-top:1px }
#linkList h3, li, ul { list-style:none; display:list-item; }
Any other idears people comment (noting that the XHTML file should not be changed as Im trying to only do every thing with CSS like the name of the site HTML page is from.) Similar TutorialsHi, Im using CSS, and have included the code in a separate .css file. The whole website uses DIVs and is displaying correctly in both I.E. and Firefox. Now, I need to generate a dynamic DIV using PHP, so I did this to test it out, Code: <div style="{ background: #00cc00; width:100%; height:100%;}">abc</div>
But the problem is that it displays correctly in I.E. but not in FIREFOX, all the attributes that I have specified within the style="{}" tag are NOT at all applied in FIREFOX. Only the text "abc" is displayed in firefox and the style, including the background colour is not applicable at all! Please tell me what Firefox is upto? Thanks! Your sisncerely, mbk, mbkweb. If anyone can help I am trying to attach an external style sheet in to my site with dreamweaver 8. It is not being recognised as a css file. How do I overcome this problem Andy Hey all, i have about three different style sheets for the same website, all making the website look differently colour & gradient wise depending on which style sheet i use.. My question is how do i make it so that people can select which style they want to view the website in? like on forums when you get a drop down list of different skins and such... im just curious on how id go about making a drop down list of different styles and once a user selects one it will always be that one on their next visit.. Any help on this would be most appreciated. Would it be hard to do this? where should i begin? Note: Im extremely new to this CSS Style sheeting so be gentle lol. Hi, At my site webpage http://www.pt2fansite.com/demo/monsters.pl there is a list on the middle where after the name of monster the colors changes that table has Code: style="margin-left: 6; padding-top: 2px;" but once i putted it all together it stoped working and is no longer giving the space to it.... What could be possible making it not work ? i have tried to put it into my style.css file and out of it and both ways it does not work. thanks for any help I need to modify an external style sheet so that background images on each page can be changed. Please help this is my code and the display is different in IE on Vista, the rounded containers alternating in colours are showing up with a staggered border and not a smooth rounded edge as it should be. is this a fault in IE for Vista? or yet another coding error i need fixing Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<script type="text/javascript">
window.onload=function() {
links=document.getElementsByTagName('a');
for(c=0;c<links.length;c++) {
if(links[c].className=='bm') { /*this specifies the bookmark links by class*/
links[c].onclick=function() {
bookmarks(this.title,this.href);
}
}
}
}
function bookmarks(title,url){
if(window.sidebar) {
window.sidebar.addPanel(title,url,'');
}
else {
if((window.opera)&&(window.print)){
lnk=document.createElement('a');
lnk.setAttribute('href',url);
lnk.setAttribute('title',title);
lnk.setAttribute('rel','sidebar');
lnk.click();
}
else {
window.external.AddFavorite(url,title);
}
}
}
</script>
<SCRIPT LANGUAGE="JavaScript">
<!-- Begin
function leapto(form) {
var myindex=form.dest.selectedIndex
location.href=(form.dest.options[myindex].value);
// You can output to ANY frame using: parent.[framename].location.href
}
// End -->
</SCRIPT>
<style type="text/css">
<!--
.verticalline { border-width: 2px; border-color: #FFFFFF; border-left-style: solid; height: 100%; }
.horizontalline { border-bottom-width: 2px; border-color: #999999; border-bottom-style: solid; height: 100%; }
.container1 { background:#799BD9; margin:0 5px;}
.rtop1, .rbottom1{ display:block; background:#507BCD; }
.rtop1 *, .rbottom1 *{ display: block; height: 1px; overflow: hidden; background:#799BD9; }
.container2 { background:#325EAF; margin:0 5px;}
.rtop2, .rbottom2{ display:block; background:#507BCD; }
.rtop2 *, .rbottom2 *{ display: block; height: 1px; overflow: hidden; background:#325EAF; }
.container3 { background:#FFFFFF; margin:0 5px;}
.rtop3, .rbottom3{ display:block; background:#507BCD; }
.rtop3 *, .rbottom3 *{ display: block; height: 1px; overflow: hidden; background:#FFFFFF; }
.menucontainer { background:#799BD9; margin:0 5px;}
.menurtop1, .menurbottom1{ display:block; background:#125892; }
.menurtop1 *, .menurbottom1 *{ display: block; height: 1px; overflow: hidden; background:#799BD9; }
.r1{ margin: 0 5px}
.r2{ margin: 0 3px}
.r3{ margin: 0 2px}
.r4{ margin: 0 1px; height: 2px }
a.one:link { color: #000; }
a.one:visited { color: #000; }
a.one:hover { color: #fff; }
a.one:active { color: #000; }
a.one { text-decoration: none; }
h1 { text-align: left; font: small tahoma; font-size: 12px; font-weight: bold; margin: 0 0; padding: 5; }
h2 { text-align: left; font: small tahoma; font-size: 12px; font-weight: bold; margin: 0 5; padding: 5; }
-->
</style>
</head>
<body bgcolor="#000000">
<table width="319" align="center" style="border-collapse:collapse;">
<tr>
<td width="311" height="126" valign="top" bgcolor="#000000">
<table cellpadding="8" style="border-collapse:collapse;">
<tr>
<td valign="top">
<div align="center">
<table border="1" cellpadding="8" bordercolor="#FFFFFF" bgcolor="#507BCD" style="border-collapse:collapse;">
<tr>
<td>
<div><table width="100%" border="2" bordercolor="#FFFFFF">
<tr>
<td><table width="100%" style="border-collapse:collapse">
<tr>
<td width="100%" height="121" align="center" valign="bottom" bgcolor="#125892"><img width="707" height="49" border="0"></td>
<td valign="top" bgcolor="#125892"> <div align="right"></div></td>
</tr>
<tr>
<td colspan="2" bgcolor="#125892">
<style>
<!--
A {color:#000000; font-weight: normal;}
A:hover {color: #0066FF; font-weight: normal;}
-->
</style>
<body>
<table width="100%" style="border-collapse:collapse;">
<tr>
<td height="21">
<div class="menucontainer" align="center"> <b class="menurtop1"><b class="r1"></b><b class="r2"></b><b class="r3"></b><b class="r4"></b></b>
<a href="" STYLE="text-decoration: none"><font color="#FFFFFF" face="Tahoma">
m1</font></a> <b class="menurbottom1"><b class="r4"></b><b class="r3"></b><b class="r2"></b><b class="r1"></b></b>
</div>
</td>
<td width="5%">
<font color="#FFFFFF" size="2" face="Tahoma">
3427 </font>
</td>
</tr>
</table> </td>
</tr>
</table></td>
</tr>
</table>
<table style="border-collapse:collapse;">
<tr>
<td valign="top">
<table style="border-collapse:collapse;">
<tr>
<td> </td>
</tr>
<tr>
<td><font color="#FFFFFF" size="4" face="Tahoma">
<a href="?m=10&y=2007" STYLE="text-decoration: none">
</a> </font></td>
</tr>
<tr><td>
<table width="100%">
<tr>
<td> <div class="container1"> <b class="rtop1"><b class="r1"></b><b class="r2"></b><b class="r3"></b><b class="r4"></b></b>
<a class="one" href="?v=3612" target="_blank">
<h1>Big Star Wars Toys Collection -
And a nice thumbnail interface too</h1>
</a> submitted on 11-10-2007 Via
<a class="one" href="http://www.okfuture.net" target="_blank">OKFuture</a>
<b class="rbottom1"><b class="r4"></b><b class="r3"></b><b class="r2"></b><b class="r1"></b></b></div></td>
</tr>
<tr>
<td> <div class="container2"> <b class="rtop2"><b class="r1"></b><b class="r2"></b><b class="r3"></b><b class="r4"></b></b>
<a class="one" href="?v=3611" target="_blank">
<h1>Haunted Memories - Pictures of people
that turn nasty when you catch them
at an angle </h1>
</a> submitted on 11-10-2007 <b class="rbottom2"><b class="r4"></b><b class="r3"></b><b class="r2"></b><b class="r1"></b></b></div></td>
</tr>
<tr>
<td> <div class="container1"> <b class="rtop1"><b class="r1"></b><b class="r2"></b><b class="r3"></b><b class="r4"></b></b>
<a class="one" href="?v=3609" target="_blank">
<h1>Launchball - Tricky strategy game.
Get the ball to the goal by using
different objects</h1>
</a> submitted on 11-10-2007 <b class="rbottom1"><b class="r4"></b><b class="r3"></b><b class="r2"></b><b class="r1"></b></b></div></td>
</tr>
<tr>
<td> <div class="container2"> <b class="rtop2"><b class="r1"></b><b class="r2"></b><b class="r3"></b><b class="r4"></b></b>
<a class="one" href="?v=3610" target="_blank">
<h1>Launchball - Tricky strategy game.
Get the ball to the goal by using
different objects</h1>
</a> submitted on 11-10-2007 <b class="rbottom2"><b class="r4"></b><b class="r3"></b><b class="r2"></b><b class="r1"></b></b></div></td>
</tr>
<tr>
<td> <div class="container1"> <b class="rtop1"><b class="r1"></b><b class="r2"></b><b class="r3"></b><b class="r4"></b></b>
<a class="one" href="?v=3608" target="_blank">
<h1>Cuddly Tardis</h1>
</a> submitted on 11-10-2007 <b class="rbottom1"><b class="r4"></b><b class="r3"></b><b class="r2"></b><b class="r1"></b></b></div></td>
</tr>
</table>
</td></tr>
</table>
</td>
<td valign="top" class="verticalline"><table cellpadding="4">
<tr>
<td valign="top"> </td>
</tr>
</table>
</td>
</tr>
</table>
</div></td>
</tr>
</table>
</div></td>
<td rowspan="3" valign="top"> </td>
</tr>
<tr></tr>
<tr>
<td></td>
<td></td>
</tr>
</table>
</td>
</tr>
</table>
</html>
Hello, So my question is this: How do 'we' go about targeting browsers with IE7 between Vista and XP? The two versions render differently, and in my case, I need to be able to target one in a conditional comment (like I do for IE6 of course) to fix it in that version. The site is www.justmythoughts.com , and it renders correctly in IE7 Vista, however is a good 150px pushed to the side in IE7 XP. What is the 'new' remedy for this type of situation these days?? Is there any solution for this yet? Thanks, Nick Is there any way to display a style seperately for Firefox than for any other browser? Hi I have a style made in CSS. It is a menu where if you hover over some of the menu a drop down box will appear. This works in Firefox but does not work in IE. Here is the link: Look first in Firefox at my menu then look at it in IE. http://www.bcit.gimppro.co.uk/index.php Also is their some way to test my CSS code to make sure it works in all browser. PHP Code: #menu { top:5px; width: 8.87em; /* set width of menu */ background: #eee; width: 100%; } #menu ul { /* remove bullets and list indents */ list-style: none; margin: 0; padding: 0; } #menu ul ul { position: absolute; z-index: 500; } #menu ul ul ul { position: relative; top: 0; left: 100%; /* to position them to the right of their containing block */ width: 100%; /* width is based on the containing block */ } /* style, color and size links and headings to suit */ #menu a, #menu h2 { font: bold 11px/16px arial; display: block; border-width: 1px; border-style: solid; border-color: #ccc #888 #555 #bbb; margin: 0; padding: 2px 3px; } #menu h2 { color: #fff; background: #000; text-transform: uppercase; } #menu a { color: #000; background: #efefef; text-decoration: none; } #menu a:hover { color: #a00; background: #fff; } #menu li { /* make the list elements a containing block for the nested lists */ position: relative; } div#menu ul ul ul, div#menu ul ul, div#menu ul li:hover ul ul, div#menu ul ul li:hover ul ul {display: none;} div#menu ul li:hover ul, div#menu ul ul li:hover ul, div#menu ul ul ul li:hover ul {display: block;} #menu ul { list-style: none; margin: 0; padding: 0; width: 8.87em; float: left; } div.container{ position:relative; top:0px; left:0px; width:995px; height:auto; } #login{ position:absolute; top:300px; left:745px; height: auto; width:240px; font: bold 11px/16px arial; } #content{ position:absolute; top:300px; left:0px; height: auto; width:695px; margin:0 .25em; padding: 5px 15px; font: bold 11px/16px arial; border: 1px solid black; } #content h1, h2 { font-weight: bolder; } #banner{ position:absolute; top:0px; left:0px; height: auto; width:1000px; } I'm sure this is something stupid and simple I've overlooked.. So I am hoping that someone here can see what I am missing here.. I am FINALLY in the home stretch for this site, and I cannot for the life of me figure this out.. This only happens on the gallery pages.. The side border disappears when viewing the site in IE7 but ONLY under the Vista OS.. (At home I have IE7 and WinXP and the gallery pages display just fine..) http://clients.overthehillweb . com/hairisle/index.php?main_page=page&id=2&chapter=0 What the is different with IE7 and Vista? Screenshot of what's happening: http://i25.tinypic . com/2gtq4jr.png Perhaps a better question is this.. It appears that my method for applying that border to the center content and dropdown nav menu is not working well under IE7 with Vista (and for some folks XP and IE7). Is there a better way to apply this border to the center content and the nav menu that WILL work with IE7?? Just testing this in different browsers and noticed that the image is shown in the background but does not go to the background-position that is specified. This works for IE. Does anyone know if there is a different way of doing this? <STYLE type="text/css"> BODY { background-image:url(awesome.gif); background-repeat:no-repeat; background-position:50 220; background-attachment:fixed } </STYLE> Thank you for an insight into this little glitch. Hi All: When i use <ul><li> and <li> is set to "list-style-type: none;" IE and Firefox renders it differently. Does anybody know a work-around for this? The good example of this and the CSS code is at following holzgreen.com/list-test/ HTML: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>List Test 1</title> <meta name="Description" content="x.x.x. CHANGE .x.x.x"> <meta name="KeyWords" content="x.x.x. CHANGE .x.x.x"> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <META name="Publisher" content="Firework Studio"> <META name="revisit-after" content="15 days"> <META name="robots" content="index, follow"> <META name="Robots" content="All"> <link href="000-style.css" rel="stylesheet" type="text/css" /> <style type="text/css"> <!-- .style1 { font-family: "Courier New", Courier, monospace } --> </style> </head> <body> <div #none> <ol> <li>List item - 1</li> <li>List item - 2 <ol> <li>LI - 2.1</li> <li>LI - 2.2</li> </ol> </li> <li>List item - 3</li> <li>List item - 4</li> </ol> </div> </body> </html> CSS: body { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 1em; border: 1px solid #000000; margin: 0em; padding: 0em; } #none ol { background: #BB0000; list-style-position: inside; margin: 0em; padding-left: 1em; /* Moves the Whole List */ } #none ol ol{ background: #BB00BB; list-style-position: inside; margin-left: 0em; padding-left: 3em; /* Moves the Nested List */ } #none ol li { background: #BBBB00; font-size: .8em; margin-left: 0em; list-style-type: none; } #none ol ol li { background: #00BBBB; font-size: 1em; list-style-type: lower-alpha; margin-left: 0em; list-style-type: none; } Thanks for your interest I posted this by accident in the html forum , so im asking he I have this in my CSS page: Code:
a.mainlevell:link, a.mainlevel:visited {
display: block;
color: #FFFFFF;
font-weight: bold;
text-decoration: none;
font-family: Verdana, Helvetica, Arial, sans-serif;
margin-bottom: 1px;
font-size: 12px;
}
a.mainlevell:hover {
color: #FFFF00;
font-size: 12px;
}
And I use this style for four links: Code: <a href="mobile.html" class="mainlevell">Home</a> <a href="m_about.html" class="mainlevell">About Us</a> <a href="m_games.html" class="mainlevell">Games</a> <a href="m_links.html" class="mainlevell">Links</a> When viewing in IE, all the URL's using m_* in the file name works with the CSS; the one referencing mobile.html doesn't. However, putting an m_ in front of the mobile.html makes the link work. Why? This happens only in IE. firefox/opera/netscape/etc ; the links all show up fine and work as supposed to. However, I have a similar set up for another menu that does almost the same CSS as the above: Code:
<table width="100%" border="0" cellspacing="2" cellpadding="3">
<tr>
<td align="center" bgcolor="#990000"><img src="images/dmp_off.gif" name="home" width="14" height="14" id="home"></td>
<td bgcolor="#990000"><a href="mobile.html" class="menulevel" onMouseOver="MM_swapImage('home','','images/dmp_on.gif',1)" onMouseOut="MM_swapImgRestore()">Home</a></td>
</tr>
<tr>
<td width="18" align="center" bgcolor="#990000"><img src="images/dmp_off.gif" name="one" width="14" height="14" id="one"></td>
<td bgcolor="#990000"><a href="m_blah.html" class="menulevel" onMouseOver="MM_swapImage('one','','images/dmp_on.gif',1)" onMouseOut="MM_swapImgRestore()">Blah</a></td>
</tr>
<tr>
<td width="18" align="center" bgcolor="#990000"><img src="images/dmp_off.gif" name="two" width="14" height="14" id="two"></td>
<td bgcolor="#990000"><a href="m_blah.html" class="menulevel" onMouseOver="MM_swapImage('two','','images/dmp_on.gif',1)" onMouseOut="MM_swapImgRestore()">Blah</a></td>
</tr>
<tr>
<td width="18" align="center" bgcolor="#990000"><img src="images/dmp_off.gif" name="three" width="14" height="14" id="three"></td>
<td bgcolor="#990000"><a href="m_blah.html" class="menulevel" onMouseOver="MM_swapImage('three','','images/dmp_on.gif',1)" onMouseOut="MM_swapImgRestore()">Blah</a></td>
</tr>
<tr>
<td width="18" align="center" bgcolor="#990000"><img src="images/dmp_off.gif" name="four" width="14" height="14" id="four"></td>
<td bgcolor="#990000"><a href="m_blah.html" class="menulevel" onMouseOver="MM_swapImage('four','','images/dmp_on.gif',1)" onMouseOut="MM_swapImgRestore()">Blah</a></td>
</tr>
<tr>
<td width="18" align="center" bgcolor="#990000"><img src="images/dmp_off.gif" name="five" width="14" height="14" id="five"></td>
<td bgcolor="#990000"><a href="m_blah.html" class="menulevel" onMouseOver="MM_swapImage('five','','images/dmp_on.gif',1)" onMouseOut="MM_swapImgRestore()">Blah</a></td>
</tr>
<tr>
<td width="18" align="center" bgcolor="#990000"><img src="images/dmp_off.gif" name="six" width="14" height="14" id="six"></td>
<td bgcolor="#990000"><a href="m_blah.html" class="menulevel" onMouseOver="MM_swapImage('six','','images/dmp_on.gif',1)" onMouseOut="MM_swapImgRestore()">Blah</a></td>
</tr>
</table>
and this one works fine ( even with the mobile.html) I am at a total loss on this one. I'm trying to create a simple inline unordered list menu - no problems there - I've done that plenty of times. However, this time I would like my menu to have a border around it instead of being a plain box. As soon as I add the 'border-style:solid' modifier to the div, the text misaligns straight down, roughly 15px lines, out of the box. This happens on Firefox (and apparently on Opera as well, though I haven't checked that one myself). At this point I've stripped the page to bare bones, switched from transitional to strict, tried float vs not, tried margins vs 0 margins, and padding vs 0 padding, relative vs absolute, and attempted to manually shift the text through negative positions as well. No joy. Css: Code: /* Navigation */
#nav {
width: 821px;
height: 18px;
border: 1px;
border-style: solid;
border-color:red;
}
#nav ul {
}
#nav li {
display:inline;
float:left;
background-color:#9E0C0C;
text-align:center;
color:white;
font-family: arial, san-serif;
font-size: 14px;
font-variant: small-caps;
}
and page: Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" /> <meta http-equiv="content-type" content="text/html; charset=utf-8" > <link href="style.css" rel="stylesheet" type="text/css" media="screen"> </head> <body> <div id="nav"> <ul> <li>Home</li> <li>XXX</li> <li>XXX</li> <li>CCC</li> <li>HHH</li> <li>JJJ</li> <li>kkk</li> <li>KKK</li> </ul> </div> </body> </html> (As I said, I've stripped it to absolutely nothing else.) Any suggestions would be welcome. (ETA: Also tried changing text size in case a too-large font size was making the text 'pop out' of the box. That is also not it.) I dont know why it is doing this in firefox here is my css coding then is my html file coding Code:
#header {
width: 800px;
height: 164px;
margin: 0px;
padding: 0px;
background: red url(images/header.jpg);
}
#menubox {
width: 215px;
height: 194px;
margin: 0 0 0;
padding: 0px;
background: blue url(images/menu.jpg);
}
#menu-in {
width: 73px;
height: 158px;
padding: 0px;
margin-left: 41px;
margin-top: 16px;
background: red;
}
#banner {
width: 585px;
height:194px;
margin-left: 215px;
margin-top: -194px;
background: green url(images/banner.jpg);
}
#sidepic {
width: 165px;
height: 692px;
background: green;
}
#sidepic-in {
width: 127px;
height: 634px;
margin-left: 19px;
margin-top: 29px;
background: brown url(images/sidepic.jpg);
}
#main {
width: 413px;
height: 692px;
margin-left: 165px;
margin-top: -692px;
background: purple;
}
#main-in (
width: 378px;
height: 628px;
margin-left: 18px;
margin-top: 32px;
background: red;
}
#pictures {
width: 222px;
height:505px;
margin-left: 578px;
margin-top: -692px;
background: blue;
}
#pictures-in (
width: 171px;
height:424px;
margin-left: 22px;
margin-top: 60px;
background: red;
}
#links {
width: 222px;
height: 187px;
margin-left: 578px;
background: red;
}
#footer {
width: 800px;
height: 50px;
background: yellow;
}
{
Code: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1252"> <title>New Page 1</title> <link rel="stylesheet" type="text/css" href="styles.css"> </head> <body> <div id="header"> </div> <div id="menubox"> <div id="menu-in"> </div> </div> <div id="banner"> </div> <div id="sidepic"> <div id="sidepic-in"> </div> </div> <div id="main"> <div id="main-in"> </div> </div> <div id="pictures"> <div id="pictures-in"> </div> </div> <div id="links"> </div> <div id="footer"> </div> </body> </html> First Issue In this site the Left Navigation top and bottom spacing is somewhat off. First head over to this page: http://www.pricedigital.com/ejs//ad...weight-loss.htm In firefox the navigation ends up being a tad too low, but the way it looks in ie6 and ie7 is how I want it to look in firefox. Any suggestions? This all takes place in sidebar1 Next Issue How do I center an image using just css? Final Issue In IE6 the floated right photos on a few of these pages do not show up correctly. Here is one for example: http://www.pricedigital.com/ejs//ad...lds-pallant.htm How can I go about fixing this? OK, I've been working with Firefox for a long time, and it usually serves me well for all browsers except IE. Now my design/CSS only looks good in firefox 4.0.1 and not Safari, Opera, or Google Chrome, and I'm really upset. Why are the other browsers displaying my CSS improperly? Is there a hack for all browsers now? OK, here's the site: http://www.caillouette.com/Diesel_site7/ Any info or insight is greatly appreciated. thanks -S Hi, can you take a look at my site: www vitacam com in both IE7 and Firefox and let me know if you see anything in the code that is causing the layout differences? Everything's all bunched together in Firefox but it looks right in IE. Thanks, Shane Hi I have done two pages and they seem to work fine in IE8 but when I view it in firefox there are a couple of issues: link On the home page i have a lightbox set up for the polaroids with specific width and height. In IE the div is exact in size but in firefox the div seems to expand beyond the dimensions of the div (a red dotted border is displayed on click) On the Products page, the right hand side of the book has products listed in which you hover over and the polaroids will reflect different angled shots of the product that the cursor is over. Each product line is a hyperlink but in Firefox some of these lines are unlinkable whereas in IE there is no problem here! It is the same instance with the sub menu on the left hand page too Can anyone point me in the right direction of solving these issues please? I apologize if this is supposed to be in the HTML forum. Since html code can be viewed from the source I thought I will post the css code to cross check since I couldn't figure out what is causing the problem. So thought I would post it in CSS forum. I have the following site that displays fine in Firefox but is all a mess in IE. http://www.geocities.com/dhaagey08/DhaageyTab2.html Following is the CSS code I am using. ====================================== * { margin: 0; padding: 0; } html { background: #fff url("images/html1.png") repeat-x left top; } body { font-family: arial, sans-serif; font-size: 12px; color: #888888; background: url("images/body.png") repeat-y left top; width: 1000px; margin: 0 auto 30px auto; position: relative; } a img { border: 1px solid #ccc; } a { color: #f48a88; text-decoration: none; } a:hover { visibility: visible; /* IE bug fix */ } a:hover img { border: 1px solid #729AD7; } h1 { font-size: 14px; } h2 { font-size: 12px; } .page { background: url("images/page3.jpg") no-repeat left top; padding: 15px 125px 0px 115px; width: 760px; } .header{ position: relative; width: 760px; height: 170px; left: 5px; top: 0; background: url("images/header1a.jpg") no-repeat left top; } /************* menu1 ******************/ .bar4285801 { width: 345px; height: 35px; position: relative; } .bar4285801 table.tabbar { position: absolute; width: auto; height: auto; top: 0px; left: 45px; } .bar4285801 div { height: 35px; width: 115px; } .bar4285801 div.button { background: url(menu47831178.jpg); } /****************** menu2 ***********************/ .bar4285846 { width: 345px; height: 35px; position: relative; } .bar4285846 table.tabbar { position: relative; width: auto; height: auto; top: -35px; left: 390px; } .bar4285846 div { height: 35px; width: 115px; } .bar4285846 div.button { background: url(menu30455262.jpg); } .main { width: 706px; margin: 0 auto; } .box1 { border: 1px solid #ccc; clear: both; padding: 0 5px 25px 2px; width: 690px; height:350px; position: relative; } .lady { float: left; width:220px; height:350px; background: url("images/lady2s.jpg"); } #right { width: 457px; float: right; padding-bottom: 130px; } .dhaagey { font-family: monotype corsiva; font-size: 30px; color: #89201d; } .contact{ font-family: monotype corsiva; font-size: 18px; color: #89201d; float: right; margin-top: 55px; } .photos { margin-top: 5px; padding-bottom: 8px; } .photos a { width: 106px; height: 140px; float: left; background: #C2D3EE; text-align: center; color: #A2A3A6; text-decoration: none; font-size: 11px; font-weight: bold; margin-right: 14px; } .photos>a { min-height: 148px; height: auto; } .photos a.last, .greybox-background .right a.last { margin-right: 0; } .photos a:hover { color: #f48a88; } .photos a span { display: block; padding-top: 2px; } .photos a>span { padding-top: 5px; } .greybox { border: 1px solid #ccc; margin-bottom: 39px; padding: 5px 0; } .greybox-background { background: url("images/gbback.jpg") repeat-y left top; width: 100%; line-height: 170%; } .greybox-background .left, .greybox-background .right { width: 321px; float: left; padding: 0 10px; } .greybox-background .right { float: left; padding: 0 19px 0 20px; } .greybox-background .right a { display: block; float: left; margin-right: 11px; margin-top: 8px; } .greybox2 { border: 1px solid #ccc; margin-bottom: 15px; padding: 9px 7px; width: 688px; } .greybox2 .preview { float: left; margin-right: 40px; margin-right: 44px; } .greybox2 .preview img { padding: 5px; } .greybox2 .right { float: left; width: 350px; } .greybox2 .right a { float: left; margin: 0 14px 7px 0; } .footer1 { text-align: center; padding: 0 27px 3px 27px; } .footer1 a { color: #872323; text-decoration: none; } .footer1 a:hover { color: #d87126; text-decoration: none; } .footer2 { font-size: 0px; line-height: 0px; height: 15px; background: url("images/footer.png") no-repeat left top; margin-left: 110px; } .cleaner { font-size: 0px; line-height: 0px; height: 0px; clear: both; } ============================================ Any help is greatly appareciated. |
|||||||