PDA

View Full Version : CSS Problem Between IE and Firefox


0nE.sh0t.kIll
10 Feb 2009, 05:45 PM
Well I'm having a problem that the side navbar isnt showing correctly in firefox, but is exactly right in IE. I have no clue what the problem is, I've run it through the w3 validator and it didn't find the problem. If someone could help find the problem that'd be great. http://www.conproductions.x10hosting.com
Wickham
11 Feb 2009, 03:09 AM
First, add the url to your doctype so that the page centers properly and so that it won't show in quirks mode:-

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

Then you left out li from the first style:-

.glossymenu li, .glossymenu li ul{
list-style-type: none;
margin: 0;
padding: 0;
width: 185px; /*WIDTH OF MAIN MENU ITEMS*/
border: 1px solid black;
}

which gets the menu vertical in Firefox, but you will have to adjust margins.

In the main stylesheet edit like this (for Firefox and other browsers except IE):-

.glossymenu li{ display: block;
position: relative; margin-left: -40px;
} /*this style is already there, but edited*/
.glossymenu li li{ display: block;
position: relative; margin-left: 0px;
}/*this style is new*/

and in the html file add a conditional comment just for IE, put it just before the </head> closing tag (it must be after the main stylesheet link):-

<!--[if IE]>
<style type="text/css">
.glossymenu li ul { margin-left: 40px;
}
</style>
<![endif]-->