I was having an annoying problem with a unordered list I was using for navigation. The list was encased by a div (which had an ID of globalNav), for which I had specified a width of 110px. Now in order to have the roll over background stretch to the width of the container I specified the same width in the style for the element a. This worked fine in IE6, but overlapped the containing div, rather infuriatingly when using Mozilla. Since pictures speak volumes have a look at the screen grabs and you?ll see what I mean.

Now the problem is not a new one and it has been quite well documented in the past I just somehow have never had to really deal with it or indeed have to understand it. What appears to happen is that Mozilla takes the padding of the a element (10px left and right) into account whereas IE doesn’t, meaning IE believes the width to be 110px, but Mozilla on the other hand thinks it’s 130px. This is no fault of Mozilla?s as this is the correct interpretation of the box model and it?s my fault for building this with IE only in the first place.

Now my first instinct was to do away with 110px from within the a element, but that of course had implications for IE, now the back ground colour rollover didn?t look quite right anymore. There was no option to increase the width of the container to 130px due to the design and our application development framework, which makes extensive use of CSS to render templates using a page builder component.

The work around I came across I found here and was coined by Tantek Çelik as the ?be nice to Opera 5? hack. Ironically it also helps IE 6 and thus in turn Mozilla. As far as I can gather the html>body #ID Element selector rule is ignored by IE, but understood by Mozilla and hence the width is accordingly reset to 90px.Below is for completeness sake a snippet of the new and improved style sheet.

/* start global nav */
#globalNav {
margin: 0;
border: 1px solid #6cc;
width: 110px;
}
/*
ul/li styles go here
*/
#globalNav a {
display: block;
padding: 2px 10px;
color: #f00;
background-color: #fff;
text-decoration: none;
border-bottom: 1px dotted #6cc;
width: 110px;
}
html>body #globalNav a { width: 90px; }
/* end global nav */