Outdated methods for hacking CSS documents
Historically, web designers have resorted to exploiting parsing bugs in order to get around
Internet Explorer problems. Perhaps the most famous of these is Tantek ?‡elik??™s box model
hack, designed to get around Internet Explorer 5.x??™s inability to correctly deal with the box
model: it places padding and borders within the defined content dimensions of a box,
rather than on the outside. In other words, a box with a width setting of 300px and
padding of 20px should take up a total width of 340 pixels in a compliant browser, but in
IE 5.x, it only takes up 300 pixels. Also, only 260 pixels are available for content, due to the
40-pixel padding being placed inside the defined width of the box.
Tantek??™s hack works by exploiting a CSS-parsing bug. In the following code block, padding
is set in the rule, along with a width for Internet Explorer 5.x, which terminates the rule in
the voice-family lines. Compliant browsers continue reading, thereby using the second
width value to override the first. The net result is that all browsers show the box at the
correct width.
.box {
padding: 20px;
width: 340px;
voice-family: "\"}\"";
voice-family: inherit;
width: 300px;
}
A further rule is added by some designers to cater for Opera??™s then-inability to read past
the voice-family lines??”the ???be nice to Opera??? hack took advantage of Internet Explorer
5.x not understanding child selectors, and therefore used one to set the correct width in
that browser:
html>body .
Pages:
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457