Chrome CSS Drop Down Menu (v2.5) - different browsers problem

[Alexhoward]

Chrome CSS Drop Down Menu (v2.5)

http://www.dynamicdrive.com/dynamicindex1/chrome/index.htm

Hi Guys,

hoping someone can help me out with this...

I've been trying to find a decent CSS Javascript dropdown menu for ages and this is ace!

however i've been fiddling with the css to try and format the navigation bar better, and all's fine on IE (5 i think) on NT but not on the XP version or the firefox we have here at work... yes we're still in the dark ages :)

What i'm trying to do is set the width of the menu buttons to 150px...

here's what i've done:



body {
margin: 0;
border: 0;
}

.chromestyle{
width: 800px;
font-weight: bold;
}

.chromestyle:after{ /*Add margin between menu and rest of content in Firefox*/
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
width: 150;
}

.chromestyle ul{
border: 1px solid #BBB;
width: 800px;
background: url(chromebg.gif) center center repeat-x; /*THEME CHANGE HERE*/
padding: 4px 0;
margin: 0;
text-align: center; /*set value to "left", "center", or "right"*/
}

.chromestyle ul li{
display: inline;
}

.chromestyle ul li a{
color: #494949;
padding: 4px 7px;
margin: 0;
text-decoration: none;
border-right: 1px solid #DADADA;
border-left: 1px solid #DADADA;
width: 150;
}

.chromestyle ul li a:hover, .chromestyle ul li a.selected{ /*script dynamically adds a class of "selected" to the current active menu item*/
background: url(chromebg-over.gif) center center repeat-x; /*THEME CHANGE HERE*/
}


/* ######### Style for Drop Down Menu ######### */

.dropmenudiv{
text-align: center;
position:absolute;
top: 0;
border: 1px solid #BBB; /*THEME CHANGE HERE*/
border-bottom-width: 0;
font:normal 12px Verdana;
line-height:25px;
z-index:100;
background-color: white;
width: 148px;
visibility: hidden;
filter: progid:DXImageTransform.Microsoft.Shadow(color=#CACACA,direction=135,strength=4); /*Add Shadow in IE. Remove if desired*/
}


.dropmenudiv a{
/* width: auto; */
width: 148px;
display: block;
text-indent: 3px;
border-bottom: 1px solid #BBB; /*THEME CHANGE HERE*/
padding: 2px 0;
text-decoration: none;
font-weight: bold;
color: black;
}

* html .dropmenudiv a{ /*IE only hack*/
/* width: 100%; */
width: 148px;
}

.dropmenudiv a:hover{ /*THEME CHANGE HERE*/
background-color: #F0F0F0;
}


Just playing at the mo, but would really appreiciate the help

Thanks in advance

[snakas0116]

Hi
I am also having browser problems with this script. The rollover dropdown isn't working in Safari either.
Sorry to reply with additional problems, but I didn't want to create a whole new thread dealing with the same problem.
Any help would be great.
Thanks!

[Alexhoward]

Hi,

Just tested my script in safari, and works fine...

feel free to steel the CSS i posted and try it on yours...

however, the widths aren't working on safri either, or indeed any modern browser...

would really appreciate some help here..

Thanks in advance

[Alexhoward]

Hi guys,

this is driving me crazy...!!

does anyone know who created this so i can contact them directly?

i have now tried everything i can think of, but for whatever reason i cannot change the width, or indeed the height (although i don't want to) of the mouseover menu buttons!?!

cheers!

http://www.addsomemusic.co.uk