Double Height or Overwrite

Double Height or Overwrite

This bug is not really specific to one browser. I discovered it through my strict persistance to get all browsers to display something exactly the same way. One adjustment affects IE, and to fix IE is to break Firefox.

I wanted a list with the anchors as block elements any local navigation in the new ABS design. The old design (which may be the current design at the time of reading) used inline anchors for the local navigation, giving the shorter link space that is no wider than the width of the text. The global navigation used block anchors, and since the width of the text was known to be less than the width of its container.

Here is the problem. In IE, the list items become about double the size in height if the anchors inside are blocks. In most standards-based browsers, the height is perfect. I adjusted both height and line height to get the exact same look across the different browsers. There was just one more problem. If the length of the text exceeded the width of the container (even when words are spaced), the text in standards-based browsers would overwrite itself in the same line, displaying unreadable text. The is of course due to limiting the height in IE to avoid the double height.

Bug Fix

My solution is not a CSS hack, but something that needs to be placed in the (X)HTML document.

Use Microsoft's "if IE" comment tags. This special comment tag is one that is ignored by all browsers, except for Internet Explorer. This way, I was able to shrink the double height in IE and in nowhere else, where it could cause text to overwrite on the same line.

<!--[if IE]>
<style type="text/css" media="all">
ul li a {
height: 20px;
}
</style>
<![endif]-->

I hope you find the if IE tags very useful.

Note: I had to add at least one paragraph after the paragraph with the code block to avoid a bug in Intrnet Explorer where the bottom of the div is missing.