See http://msdn2.microsoft.com/en-us/library/ms537512.aspx for more on conditional
comments. The hasLayout site??”www.haslayout.net??”also offers useful
information on conditional comments.
DEALING WITH BROWSER QUIRKS
357
9
.box {
padding: 20px;
width: 300px;
}
You??™d then add a rule to your style sheet that only Internet Explorer versions below 6 can
see (the one within the conditional comment that references lt IE 6 in the large code
block shown earlier).
.box {
width: 340px;
}
Compliant browsers read the rule in the clean style sheet. Internet Explorer versions below
6 then override the width value, thereby displaying the box as intended. Unlike when
using a CSS hack, however, the CSS hasn??™t been compromised in any way. The majority of
problems detailed in the ???Common fixes for Internet Explorer??? sections later in the chapter
are to do with CSS, and therefore require conditional comments when they??™re being
dealt with.
Dealing with rounding errors
Problem: In liquid layouts with floated elements, rounding errors sometimes cause the
widths of the elements to add up to more than 100%. This causes one of the floated elements
to wrongly stack under the others. This problem is known to affect all versions of
Internet Explorer. For an example, see the following image (from the ???Creating flanking
sidebars??? exercise in Chapter 7), in which the right-hand sidebar is wrongly sitting underneath
the left-hand sidebar.
Pages:
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461