So I have a drop down menu on my site. Apparently, Firefox, opera, IE 6.0, and IE 7.0 all have different ideas on what 114 pixels means.

The script I was using has a exception for IE, where I have to add 10 px to each box to make it display right, now, this would be fine. Except Opera reads those exceptions too, and makes the last menu item drop down to a new line.

/* set up the default top level links */
.menu ul li a, .menu ul li a:visited {
display:block; 
text-decoration:none; 
color:#FFF; 
width:114px; 
height:24px;
font-weight: none;
color:#FFF; 
border-bottom:8px solid #ffc20e;
background:#527d5d url('img/linkgbg.png') repeat-x bottom; 
padding-left:10px; 
line-height:2.0em;
margin-right:1px;
}

/* hack for IE5.5 to correct the faulty box model */
* html .menu ul li a, .menu ul li a:visited {
width:124px;
}

That bottom part is the IE fix, it says for 5.5, but it works for 6 aswell.

Can I make Opera not read this? If it just read the first one it would be fine.

Any help is appreciated.

Thanks

Can you give us a link to the page?

www.arborpronw.com

Set up to work in IE 6 & Firefox currently.
Doesn't display right in Opera

Get the hacks OUT of your main CSS file and use CONDITIONAL COMMENTS to target JUST the IE browsers. The *html hack will choke in IE7 too, since the reason for that hack was fixed in IE7.

Can you link me to any info about it? Maybe a tut, I can't find any.

Thanks

Here's a short tutorial I wrote on conditional comments. I'm sure if you search for "conditional comments" and maybe add in IE or internet explorer to the search you can easily find more.