Help please, Chrome dropdown menu

[level200]

1) Script Title: Chrome menu css

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex1/chrome/index.htm

3) Describe problem:

I have set up the chrome dropdown menu on my test website : http://www.level200.co.uk/dropdowntest.asp (http://www.level200.co.uk/dropdowntest.asp)It works great in Firefox but in Explorer the dropdown menu is over the main nav and not under it, what could the problem be?

CSS:

.chromestyle{
width: 650px;
font-weight: bold;
float: right;
text-align: left;
background-position: left;
}

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

.chromestyle ul{
background: #5F7284;
margin: 0;
text-align: left;
border-top: 0px none;
border-right: 0px none;
border-bottom: 0px none;
border-left: 0px none;
}

.chromestyle ul li{
display: inline;
}

.chromestyle ul li a{
color: #FFFFFF;
margin: 0;
text-decoration: none;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
font-size: 11px;
letter-spacing: 1px;
padding: 4px 15px;
border-left-width: 2px;
border-left-style: solid;
border-left-color: #FFFFFF;
}

.chromestyle ul li a:hover{
background: #FFFFFF;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: bold;
color: #5F7284;
text-decoration: none;
padding-right: 15px;
padding-bottom: 4px;
padding-left: 15px;
}

#chromemenu ul li a[rel]:after{ /*HTML to indicate drop down link*/
/*content: " " url(downimage.gif); /*uncomment this line to use an image instead*/
}


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

.dropmenudiv{
position:absolute;
top: 5px;
font:bold normal 12px/15px Arial, Helvetica, sans-serif;
z-index:100;
width: 150px;
visibility: hidden;
filter: progid:DXImageTransform.Microsoft.Shadow(color=#CACACA,direction=135,strength=4);
border-top: 1px solid #FFFFFF;
border-right: 1px solid #FFFFFF;
border-bottom: 0 solid #FFFFFF;
border-left: 1px solid #FFFFFF;
color: #FFFFFF;
text-decoration: none;
}


.dropmenudiv a{
width: auto;
display: block;
text-indent: 4px;
border-bottom: 0px solid #FFFFFF;
padding: 2px 0;
text-decoration: none;
font-weight: bold;
color: #FFFFFF;
background-color: #5F7284;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
font-style: normal;
line-height: 15px;
font-variant: normal;
border-top-width: 2px;
border-right-width: 2px;
border-left-width: 2px;
border-top-style: solid;
border-right-style: solid;
border-left-style: solid;
border-top-color: #FFFFFF;
border-right-color: #5F7284;
border-left-color: #5F7284;
text-align: left;
}

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

.dropmenudiv a:hover{
background-color: #FFFFFF;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: bold;
color: #5F7284;
text-decoration: none;
border-top: 2px solid #FFFFFF;
border-right: 2 solid #5F7284;
border-bottom: 0 solid #FFFFFF;
border-left: 2 solid #5F7284;
line-height: 15px;
font-style: normal;
font-variant: normal;
text-align: left;
text-indent: 4px;
}

/ css

Cheers for any help.
John

[Jas]

Don't have time to really analyze it, but have you considered the padding and margins? FF and IE handle those very differently. IE subtracts the margin whereas FF adds it (so 8px width + 2px margin in IE is 8px, in FF is 10px). (If you got the script from DD, though, that error seems unlikly. . . )
Very nice template though on your site, by the way :)

[level200]

Thanks for the reply Jas

Unfortunately i'm new to CSS and Chrome menu, could anyone highlight where in the css I need to make the changes please.

Thanks for any help
John

[Jas]

EDIT: I can't seem to find the problem. Maybe someone with more CSS knowledge can. I'm sorry. . .
EDIT2: try adding this to the end of the CSS for me. I want to see what it does (don't get mad if it ruins the template)



div{
padding: 0px;
margin:0px;
}a{
padding: 0px;
margin: 0px;
}

It won't fix it, but it may tell us if the padding / margin is the problem. The code must be at the end of the CSS file.
Or better still, get rid of your other CSS sheets and see if it works right without them. If it does, there are some conflicting styles.

[level200]

Hi Jas

Thanks for your help, I have added that to the css but it has made no differance at all.

Its got me baffled... then again, it doesnt take much ;)

John

[level200]

Anyone?

[level200]

OK I have now added the css exactly as it appears on teh dynamic drive Chrome menu page and teh dropdown is still displaying above the navigation.

Whay is this happening?

[imaffett]

What I recommend doing is breaking out your menu to it's own HTML page and testing it there. Only include the needed Chrome elements (js/css).

If it works fine, then start re-introducing your own Js/CSS files. I've had many times where a css setting used for a site created a collision with something in Chrome Menu (our fault).

If you still have the issue with breaking it out, re-download the script and pull from the demo.