Code using web standards
The first step is to ensure you have valid code. Create your website
using semantic markup which validates and works in the modern browsers.
Make sure you have a full, valid doctype
and you should be able to create any design which works in Opera,
Safari, Firefox and even IE7 with minimum problems and without using
any hacks.
Once you’ve ensured that the foundations are in place, you can
tackle any issue that IE6 has. Personally, I fix any issues as I
encounter them as it’s easier to see which bug I’m dealing with and is
easier to put a fix in as soon as it’s uncovered so I would suggest the
same approach, especially for any beginner.
Below, is a list of the bugs that I find crop up most often and are
the ones I not only find in my work but also are the causes of most
problems for users posting on message boards and forums.
Double Margin Bug
The double margin bug in IE6 occurs when a floated element has a margin on the same side as the float.
For example, both of these examples will cause the margin to be doubled in IE6.
#navigation {
float: left;
width: 200px;
margin-left: 10px;
}
#content {
float: right;
width: 500px;
margin-right: 10px;
}
This will render as specified in IE7, Firefox, Opera and Safari but
a bug in IE6 will cause the margin’s to render at double the size
specified.
It can be particular problematic when dealing with pixel perfect
layouts. For example, in the code above the two columns would sit
nicely side by side in a 720px container for the modern browsers.
However, in IE6 because the margin’s would be doubled, the content
column would actually drop now that not enough space is available.
Double Margin Bug Fix
The fix for this is remarkably simple and doesn’t really make much sense, other than the fact that it works.
By applying display: inline; to the end of each style, it remarkably
fixes the problem and causes no other side effects in any other browser.
#navigation {
float: left;
width: 200px;
margin-left: 10px;
display: inline;
}
#content {
float: right;
width: 500px;
margin-right: 10px;
display: inline;
}
I tend to find that this little bug causes the majority of layout issues but it’s amazingly simple to fix.
HasLayout
A definition of hasLayout can be found at satzansatz.de and explains it better than I ever could.
Layout is an IE/Win proprietary concept that determines
how elements draw and bound their content, interact with and relate to
other elements, and react on and transmit application/user events.
This quality can be irreversibly triggered by some CSS properties. Some HTML elements have “layout” by default.
Microsoft developers decided that elements should be able to acquire
a “property” (in an object-oriented programming sense) they referred to
as hasLayout, which is set to true when this rendering concept takes
effect.
This can cause some strange effects with some elements and the
particular problem that I usually encounter is when dealing with float
clearing but it can also cause problems with boxes treating properties
incorrectly as well as various margin issues.
I’ll focus on the main issue that I experience with hasLayout but
it’s worth considering that a problem you’re experiencing may be due to
this also.
HasLayout Example
I’d use the following CSS for a very simple container that holds navigation and content columns.
#container {
background-color: #CCC;
overflow: hidden;
}
#navigation {
float: left;
width: 200px;
margin-left: 10px;
display: inline;
}
#content {
float: right;
width: 500px;
margin-right: 10px;
display: inline;
}
Using overflow: hidden; on the container clears the float’s in the
modern browsers and also applies “Layout” to IE7. However, overflow
doesn’t apply “Layout” for IE6 so we need to use another value.
Using a position, float, width, height or zoom will apply layout but
some can create undesired effects in modern browsers so what’s the
easiest and best fix?
HasLayout Fix
I tend to find that the best method is to apply a width or height.
Quite often, you won’t actually want to apply a width or height so the
best way of applying this is to use the star hack to apply a small
height to IE6 and below only.
This has the advantage that IE6 treats any height as a min-height and will therefore resize itself accordingly anyway.
Therefore, if you add a 1% height, this will correct the HasLayout issue.
#container {
background-color: #CCC;
overflow: hidden;
}
* html #container {
height: 1%;
}
#navigation {
float: left;
width: 200px;
margin-left: 10px;
display: inline;
}
#content {
float: right;
width: 500px;
margin-right: 10px;
display: inline;
}
Using this method will fix most HasLayout issues so is something
worth considering if you’re unsure as to why IE6 is displaying the way
it is.
Small Height Bug
I’m not sure what the real name is for this bug but I used to
encounter it quite frequently within my designs and it occurs when a
small height is specified but IE6 seems to completely ignore the height.
For example, the following will render correctly in all the modern
browsers but for some reason, IE6 treats the height differently and
refuses to collapse down to the 2px height specified.
#corner {
width: 10px;
height: 2px;
background-color: #C00;
}
Small Height Bug Fix
The problem seems to be caused by IE6’s unwillingness to collapse to
a smaller height than the base font-size. It therefore will always by
default render at a size that allows text to fit into the height
available and it’s this that is stopping the height from collapsing.
So to fix this, all we need to do is set a font-size: 0; within the rule.
#corner {
width: 10px;
height: 2px;
background-color: #C00;
font-size: 0;
}
I’ve recently also discovered another solution which should have
exactly the same effect. Because the box is stretching to allow for
content overflow, we can also specify overflow: hidden; which will
cause the box to honor the 2px height and also collapse.
#corner {
width: 10px;
height: 2px;
background-color: #C00;
overflow: hidden;
}
Both of these solutions will fix the issue even as far back as IE5.01 and won’t cause any problems in the modern browsers.
Summary
By no means is this an extensive list of IE6’s browser bugs but in
my experience, these are the most common that account for 99% of all
browser rendering issues so if you can get a good understanding of
these issues and remember their fixes, hopefully your development time
should start to drop for the troublesome browser.
Please feel free to comment though if you have any experiences of
other bugs or have a browser bug that you’re unsure how to identify.
Dave Woods - HTML, CSS, Web Design » IE6 - CSS Bugs and Fixes ExplainedPowered by ScribeFire.
