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]-->
Last edited by Wickham; 11 Feb 2009 at 02:37 AM.
Code downloaded to my PC will be deleted in due course.
WIN7; IE9, Firefox, Opera, Chrome and Safari for Windows; screen resolution usually 1366*768.
Also IE6 on W98 with 800*600 and IE8 on Vista 1440*900.
Reply With Quote
