11.6. Handling Internet Explorer Bugs The Windows version of Internet Explorer has a long history of CSS bugs, especially (and unfortunately ) when it comes to float-based layouts. These bugs can affect the placement of floats and the overall width allotted to floated elements. If you're lucky, you may just get a slightly annoying difference in how your Web page looks in Internet Explorer versus other browsers. At worst, these bugs can cause significant display problems like the float drops discussed in the previous section. This section tells you the most common problems and how to get around them.
Tip: When a floated element has padding or a border, it appears thinner in IE 5 than in other browsers. There's more detail on this IE 5 bugand its solutionin Section 7.5.3.
11.6.1. Double-Margin Bug Internet Explorer 6 and earlier sometimes doubles the size of a margin you've applied to a floated element. The problem occurs only when the margin's in the same direction as the floata left margin on a left-floated element or a right margin on a right-floated element. In Figure 11-15, there's a left-floated sidebar holding the site's navigation. To add a bit of space between it and the left edge of the browser window, the sidebar has a left margin of 10 pixels. Figure 11-15. A 10-pixel left margin applied to a left-floated element should, in theory anyway, indent the float 10 pixels from the left edge of the page. Firefox (above) gets it right. But IE 6 (bottom) incorrectly doubles that margin. By adding 20 pixels to the left edge of the sidebar, IE 6 significantly changes the page's appearance. 
Most browsers, including Internet Explorer 7, Safari, and Firefox (Figure 11-15, top) add the requested 10 pixels of space. However, Internet Explorer 6 (bottom) doubles that margin to 20 pixels. Even with relatively small margins like 10 pixels, the visual difference is significant. Furthermore, if the layout's very tight, with precisely measured floated elements sitting side by side, then the doubled margin can easily trigger a float drop (Section 11.1.1).
Note: This margin doubling happens only when the element's margin touches the edge of its containing block, so when an element is floated left against another left-floated element, its left margin won't double.
The solution's simple: Add display:inline ; to the CSS style for the floated element: #sidebar { float: left; margin-left: 10px; width: 160px; display: inline; }
In this case, the display property doesn't do anything except fix IE's bug. Floated elements are always block-level elements, and changing a style's display to inline won't alter that. (See Section 7.2.4 for more on the display property.) However, even though this added style declaration doesn't adversely affect any other browsers, you may want to put it in an IE-only style using the * html hack: #sidebar { float: left; margin-left: 10px; width: 160px; } * html #sidebar { display: inline; }
Tip: Internet Explorer's conditional comments feature provides an even better way to isolate IE-only styles than the * html hack. An external style sheet attached to a page using a conditional comment is read only by Internet Explorer; it's ignored by all other browsers. See Section 14.5.2 for the details.
11.6.2. 3-Pixel Gaps Internet Explorer 6 and earlier inserts an additional three pixels of space between a floated column and a non- floated column. The exact placement of that gap depends on a couple of conditions: -
The non-floated column doesn't have a set width or height . If the column next to the float doesn't have any dimensions defined, then you'll see a 3-pixel indent between the edge of the column and the text inside that column. This space appears only along the float, so when the float ends, the text moves back to the left edge of the column (Figure 11-16). In this case, the best solution's to live with it. The extra indent isn't terribly distracting and doesn't do anything else weird to the page. But if the perfectionist in you can't let go of this bug, you can fix it by doing what's known as "adding layout" to the non-floated element, as described in the box in Section 11.1. Add an IE6-only style for that column: * html #mainColumn { height; 1px; }
The downside to fixing this bug is that it triggers the bug discussed next. (See what you get for being a perfectionist?) Figure 11-16. On this page, the left-hand sidebar is floated left, while the central column isn't floated at all. A left margin on the central column indents it far enough to the left so that it won't wrap around the bottom of the sidebar. (This technique is described in Section 11.1.) Unfortunately, Internet Explorer 6 and earlier also adds a small indent to the text in the non-floated column.  -
The non- floated column has a set width or height . When the column next to the float has a set layout dimension (like height in the previous example), another 3-pixel error appearsa small gap between the two columns (Figure 11-17, left). This bug is more serious than the one in Figure 11-16, since this 3-pixel gap can force the second column to drop below the floated element (Figure 11-17, right). The solution to this problem is two-fold. First, you must eliminate the left margin of the non-floated column (but for IE 6 and earlier only): * html #mainColumn { margin-left: 0; }
Then, you must set the right margin for the floated column to -3 pixels. This pulls the non-floated column back into position: * html #sidebar { margin-right: -3px; }
In any normal browser, these styles make no sense. Some determined CSS experts (with time on their hands, apparently) came up with them to make IE behave. For more info on this phenomenon , check out www.positioniseverything.net/explorer/threepxtest.html . Figure 11-17. Internet Explorer 6 often has trouble with floats. If, for example, a single column is floated left and another non-floated column with a set width wraps around the float, IE 6 and earlier inject a 3-pixel gap between the two columns (left). For designs that have precisely determined widths, that gap can add just enough space to force a column to drop below the floated element (right). 
Another option is to float all of the columns. In the examples pictured in Figure 11-16 and Figure 11-17, removing any left margins from the non-floated column and floating it either left or right eliminates both 3-pixel problems: #mainColumn { float: left; }
This solution seems quick, but it adds a little more complexity, since you have to manage yet another float in the design. 11.6.3. Other IE Problems A few more bugs plague float-based layouts in Internet Explorer 6. Many of them are so rare you may never come across them in your Web design projects. But just in case, here are a couple of weird things that can happen when viewing a page in IE 6 or earlier. -
If the bottom part of a floated element just disappears , it may be the guillotine bug . For information on the cause and solution (which fortunately has nothing to do with sharp, dangerous objects), visit www.positioniseverything.net/explorer/guillotine.html . -
Content inside a floated element doesn't appear , but sometimes reappears if you resize the browser window or scroll. This oddity is aptly called the peek-a-boo bug . Learn about it at www.positioniseverything.net/explorer/peekaboo.html. POWER USERS' CLINIC
Got Layout? | | As you've probably gathered by now, Internet Explorer for Windows has a long history of browser bugs. Some basic CSS that looks fine in Firefox or Safari crumbles in Internet Explorer 6. As it turns out, you can fix many IE bugs by switching on a special IE-only property known as layout . This isn't a CSS concept, nor does it have anything to do with the rules of HTML. It's just a concept built into Internet Explorer by the engineers who created IE (who, rumor has it, were under mind control by extraterrestrial beings at the time, which explains a lot ). As far as IE is concerned , each page element either has layout or it doesn't. In IE, floats, list items, and absolutely positioned elements display differently depending on whether or not they have layout. In the last chapter (Section 9.1.1), you saw how IE 6 doesn't make the entire area of a link clickable when the link is set to display as a block. You can fix that problem by creating an IE-only style that sets the links to 1 pixel tall: * html a .nav a { height: 1px; }
The point of that style isn't to make the links 1 pixel tall: IE 6 ignores the height specification anyway and expands the links to the height of the links' content. But the height property triggers layout in IE 6. For reasons known only to Microsoft (and the extraterrestrials), switching on layout makes IE treat the entire area of block-level links as clickable. Height isn't the only property that switches on layout in IE. Several other CSS properties also give an element layout: position: absolute; float: left; float: right; display: inline-table ; any width value, any height value, and an IE-only property called zoom . You can add that last property to a style like this: zoom: 1;. Zoom doesn't affect how the element looks in any other browser, and if you use zoom: 1 , all it does in IE is give the element layout. The downside of using this property is that it isn't valid CSS, so it won't pass W3C validation (Section 2.4.1). Internet Explorer 7 (as of this writing) still has a few bugs you have to fix by adding layout. Any of the properties listed above add layout to an element in IE 7, as will the following: min-width, max-width, min-height , and max-height (see Section 11.4.3). Throughout this book, you use layout to overcome many different IE bugs. For an in-depth (so deep, you may need a life preserver) discussion of the topic, go to www.satzansatz.de/cssd/onhavinglayout.html . Microsoft offers a friendly introduction at http://msdn.microsoft.com/library/default.asp?url=/library/en-us/IETechCol/cols/dnexpie/expie20050831.asp. |
|
![CSS[c] The Missing Manual](/icons/6360-small.jpg "CSS[c] The Missing Manual"){kind=icon}