Hello all,

I have had this issue for a week or so now and after everyone's suggestions and my own experiments I still can't manage to fix it, I have tried everything.

Question

Right now in Firefox my drop down menu covers up the button image which isn't too good.

All I need to do is change the style sheet so the drop down box will appear underneath the button image.

For some reason it works perfectly in IE.

Bellow is the style sheet for the dropdown.

.tail-top {
	background: url(images/bg.gif) repeat-x top #fff;
}
.tail-bottom {
	background: url(images/bot.gif) repeat-x bottom;
}
.col1, .col2, .col3, .col-1, .col-2, .col-3, .col-4, .col-5 {
	float: left;
}
/*======= width =======*/
#main {
	margin: 0 auto;
	text-align: left;
	width: 906px;
	position: relative;
}

/*======= header =======*/
#header {
	height: 428px;
	background: url(images/top.jpg) no-repeat top center;
}
#content .col1 {
	width: 303px;
	height: 180px;
	background: url(images/banner3.jpg) no-repeat top left;
}
#content .col2 {
	width: 302px;
	height: 180px;
	background: url(images/banner4.jpg) no-repeat top left;
}
#content .col3 {
	width: 301px;
	height: 180px;
	background: url(images/banner6.jpg) no-repeat top left;
}

}
html, body {
	height: 100%;
}
body {
	font-size: 100%;
	line-height: 1.0625em;
	background: #FFF;
}
html, input, textarea {
	font-family: Arial, Helvetica, sans-serif;
	color: #888888;

Above is sections from my 2 stylesheets which is relevent to the dropdown menu, bellow is my stylesheet for the dropdown itself.

.anylinkmenu{
position: absolute;
left: 0;
top: 0;
visibility: hidden;
border: 1px solid black;
border-bottom-width: 0;
font: normal 12px Verdana;
line-height: 18px;
z-index: 100; /* zIndex should be greater than that of shadow's below */
background: #78C9F9;
width: 200px; /* default width for menu */
}

.anylinkmenu ul{
margin: 0;
padding: 0;
list-style-type: none;
}

.anylinkmenu ul li a{
width: 100%;
display: block;
text-indent: 3px;
border-bottom: 1px solid black;
padding: 2px 0;
text-decoration: none;
font-weight: bold;
text-indent: 5px;
color: #000000;
background: none;
}

.anylinkmenu a:hover{ /*hover background color*/
background: #16191B;
color: #FFFFFF;
}

/* ######### Alternate multi-column class for drop down menus ######### */


.anylinkmenucols{
position: absolute;
width: 350px;
left: 0;
top: 0;
visibility: hidden;
border: 1px solid black;
padding: 10px;
font: normal 12px Verdana;
z-index: 100; /*zIndex should be greater than that of shadow's below*/
background: #E9E9E9;
}

.anylinkmenucols li{
padding-bottom: 3px;
}

.anylinkmenucols .column{
float: left;
padding: 3px 8px;
margin-right: 5px;
background: #E0E0E0;
}

.anylinkmenucols .column ul{
margin: 0;
padding: 0;
list-style-type: none;
}



/* ######### class for shadow DIV ######### */


.anylinkshadow{ /*CSS for shadow. Keep this as is */
position: absolute;
left: 0;
top: 0;
z-index: 99; /*zIndex for shadow*/
background: black;
visibility: hidden;
}

Here is a link to my 3 stylesheets.

https://www.sequencehosting.com/style.css

https://www.sequencehosting.com/layout.css

https://www.sequencehosting.com/anylinkmenu.css

The link to my website is in my signature.

Thanks allot for any help, I cannot finish my website until I fix this issue. Its holding me back allot.

Jack

You're going to need conditional comments to feed IE something different for this.

But - if you add a top margin of about 28px to the .anylinkmenucols in the anylinkmenu.css file, and add the same top margin to the .anylinkshadow, then the dropdown menu will go where you want it in FF and the other good browsers.

IE has a screwy method of handling positioning, so you have to deal with that.

Originally Posted by LadynRed

You're going to need conditional comments to feed IE something different for this.

But - if you add a top margin of about 28px to the .anylinkmenucols in the anylinkmenu.css file, and add the same top margin to the .anylinkshadow, then the dropdown menu will go where you want it in FF and the other good browsers.

IE has a screwy method of handling positioning, so you have to deal with that.

Thank you very much your a star!

I took a look in FF, Chrome, Safari, IE and Opera. Opera and IE treat it very funny as I was expecting. As you said I need to come up with a way to sort this out in IE and Opera. Any reccomendations on the best way to do this?

Overal it was a great success since it works perfectly in the 'good browsers'

Thank you once again.

Any reccomendations on the best way to do this?

The best way to handle IE's lack of standards compliance is to use conditional comments and a separate css file that contains JUST those rules needed to fix the problem in IE.

I use this for my conditional comments, it goes in the <head> section:

<!--[if lt IE 7]>
<link href="iefixes.css" rel="stylesheet" type="text/css" /> <![endif]-->
<!--[if IE 7]>
<link href="ie7fixes.css" rel="stylesheet" type="text/css" /> <![endif]-->