CSS Problems - Cross-Browser Issues

Having trouble getting the same CSS effects in FF as IE (6 & 7)

[whitters]

Hi all. Firstly, please accept my apologies for any posting trouble - it's my first post!

My DOCTYPE: XHTML 1.1

I am having trouble getting the same effect on my multi-level navigation menu (in a DIV) on FireFox (plus others, no doubt) as I do in IE (6 & 7).

Here is my CSS:

#menu a, #menu a:visited, #menu li, #menu ul {
 text-decoration: none;
 font-family: Verdana;
 font-size: 12px;
 background-color: #FFFFFF;
 color: #000;
 display: block;
 width: 140px;
 height: 11px;
 margin: 0px;
 padding: 0px;
 }
#menu li, #menu ul {
 margin: 2px;
 padding: 0px;
 list-style-type: none;
 text-align: left;
 } 
#menu a:hover {
 border-left: 1px solid #0100FE;
 border-right: 1px solid #0100FE;
 background-color: #CDCCCD;
 font-weight: bold;
 text-align: right;
 }

and here is my XHTML:

<div id="menu"> 
 <a href="index.html" >Home</a> 
 <a href="about.html" >About Us</a> 
 <a href="products.html" >Products</a> 
 <ul> 
 <li><a href="product1.html" >Product1</a></li> 
 <li><a href="product2.html" >Product2</a></li> 
 <li><a href="product3.html" >Product3</a></li> 
 <li><a href="product4.html" >Product4</a></li> 
 <li><a href="product5.html" >Product5</a></li> 
 </ul> 
 <a href="drawings.html" >Drawings</a> 
 <ul> 
 <li><a href="drawing1.html" >Drawings1</a></li> 
 <li><a href="drawing2.html" >Drawings2</a></li> 
 <li><a href="drawing3.html" >Drawings3</a></li> 
 <li><a href="drawing4.html" >Drawings4</a></li> 
 <li><a href="drawing5.html" >Drawings5</a></li> 
 </ul> 
 <a href="enquiry.html" >Enquiries</a> 
 <a href="contact.html" >Contact Us</a> 
 <a href="links.html" >Links</a> 
 <a href="sitemap.html" >Site Map</a> 
 </div>

The 2nd level of menu's seem to be all overlapped and overwrite each other in FF, but appear fine in IE. When hovering over the menu items I also get a lot of flicker in FF.

Have I missed out something basic, or is it complex to fix?I am really confused! Any help gratefully received from all the guru's out there! :)

Oh, as an aside, I have validated the CSS and XHTML on w3c.org, with no problems.

Regards,

Jon

[rayw]

I believe the problem is because you define the li and ul tags twice, creating a conflict. I would suggest removing the initial definition (bolded below). Hope this helps.

#menu a, #menu a:visited, #menu li, #menu ul {
text-decoration: none;
font-family: Verdana;
font-size: 12px;
background-color: #FFFFFF;
color: #000;
display: block;
width: 140px;
height: 11px;
margin: 0px;
padding: 0px;
}
#menu li, #menu ul {
margin: 2px;
padding: 0px;
list-style-type: none;
text-align: left;
}

[DanA]

Did you try min-height:11px; instead of height?
Did you try without height:11px?

[whitters]

Thanks to rayw! Sorted now, with the duplicate (first) definitions removed!

I now have very similar behaviour across IE and FF! Brilliant!

Thanks very much!

:)

[SuzyUK]

Hi whitters and Welcome to WebmasterWorld!

Glad you got it sorted!

thought I'd just help clear up something which might be misconstrued..

because you define the li and ul tags twice, creating a conflict.

defining the ul and li elements twice doesn't create a 'conflict'. Technically it's using the cascade properly.

The second set of rules would add to the rules in the first declaration, and if any of the same rules appear, in this case margin, the second rule trumps the first by order of the cascade.

In this case it is the one single rule that is at fault.. height: 11px; the font size of all your elements is 12px so the line height of the elements are going to need to be greater than 14px (approximate default) to contain a font of that size.

IE6 and below stretches an elements dimension to fit its content so that's why it looks OK, all other browsers inc IE7 are making the line 11px high and cropping each element which has that rule attached causing the overlapping effect..

it still might be causing you problems for the anchors that are not inside li elements.. just thought I'd mention it in case there were still problems

Suzy

[whitters]

Suzy,

Thanks for that! I removed the "duplicate" definitions, but am still experiencing problems - in IE7 only - IE6 and FF are OK. I'll try removing the height setting, and see how that goes...

Watch this space for more details (success or failure)

Regards,

Jon

[landrik]

Hi whitters,
I think you should first sort out your html structure before you can start styling it! it will save you time and frustration...how about something like this

<div id="navigation">
<ul id="menu">
<li> <a href="index.html" >Home</a></li>
<li><a href="about.html" >About Us</a></li>
<li><a href="products.html" >Products</a>
<ul class="submenu">
<li><a href="product1.html" >Product1</a></li>
<li><a href="product2.html" >Product2</a></li>
<li><a href="product3.html" >Product3</a></li>
<li><a href="product4.html" >Product4</a></li>
<li><a href="product5.html" >Product5</a></li>
</ul>
</li>
<li><a href="drawings.html" >Drawings</a>
<ul class="submenu">
<li><a href="drawing1.html" >Drawings1</a></li>
<li><a href="drawing2.html" >Drawings2</a></li>
<li><a href="drawing3.html" >Drawings3</a></li>
<li><a href="drawing4.html" >Drawings4</a></li>
<li><a href="drawing5.html" >Drawings5</a></li>
</ul>
</li>
<li><a href="enquiry.html" >Enquiries</a></li>
<li><a href="contact.html" >Contact Us</a></li>
<li><a href="links.html" >Links</a></li>
<li><a href="sitemap.html" >Site Map</a></li>
</ul>
</div>

[whitters]

Hi,

Update
======

Many thanks to SuzyUK for the info about the height value. I removed it (totally) from the code, and the page now looks the same in IE6, IE7 & FF!

Brilliant!

As for the post from landrik re. my HTML "style", I'm at a loss to the added benefit this gives me. I am unable to add a 'class="menu"' to a <ul> element, as this doesn't want to validate! :(