- Hacking Strategies
- Hacks and Workarounds
- Filtration Systems
- Hack it Up, Take It Home
Like this article? We recommend
Like this article? We recommend
Like this article? We recommend
Hacks and Workarounds
Now that you have some good strategies for managing hacks over the long term, it's time to take a look at some popular hacks and workarounds that you may want to use to manage browser issues.
Box Model Hack
As you might know, IE for Windows has incorrect implementation of the Box Model. (The Box Model is a visual model upon which CSS relies to effectively style element boxes.) In the Box Model, each element creates a box that can then be managed using CSS to style its width, height, position, borders, margins, and padding.
Let's say you were to begin with a simple box, such as this one:
#content {
border: 10px solid black;
padding: 10px;
width:300px;
}
In browsers with proper implementation of the Box Model, this would be interpreted by adding the borders and the padding width-wise as follows (you wouldn't add the bottom or top borders and padding because you're concerned only about width in this instance):
Left border 10px + Right border 10px + Left padding 10px + Right padding 10px + Box width 300px = 340 pixels total width
However, improper box model implementations will place the border and padding inside the width of the box, resulting in those widths being subtracted:
Box width 300px - Left border 10px - Right border 10px - Left padding 10px - Right padding 10px = 260 pixels total width
No small difference! With this kind of significant discrepancy, you see that some kind of hack or filter is necessary to make sure that your visual layouts are as consistent as possible.
The Box Model hack taps into a parsing bug in those problem browsers to work around the problem. Using the voice-family property, you'll first define the true width, insert the hack, and then apply a width that gets overridden and tricks the problem browsers into using the correct width of 340 pixels:
div.content {
width: 340px;
voice-family: "\"}\"";
voice-family: inherit;
width: 260px;
}
Although a feature known as DOCTYPE Switching corrects this problem in IE 6.0, earlier IE versions will misinterpret your CSS badly enough to cause significant layout discrepancies (hence, this hack and later filters that have emerged as alternatives to it). DOCTYPE Switching occurs only when documents are marked up with correct DOCTYPE declarations.
NOTE
Please see "CSS: Beyond the Retrofit" for more information on DOCTYPEs and switching technologies.
Interestingly, using the Box Model hack, CSS would routinely fail the W3C's CSS validator despite the fact that even if it is a hack (again, something being used for a purpose it was not intended) doesn't mean that the syntax has an error. Public commentary encouraged the W3C to correct the validator to support it, so now you can use this hack without worrying about invalid CSS.
Horizontal Centering Hack
Although CSS offers a perfectly acceptable means of centering elements horizontally, browser support of the correct means is inconsistent.
The correct way to horizontally center any element is to use the margin property and set left and right values to auto:
div#content {
margin-left: auto;
margin-right: auto;
}
This works in some browsers, but not in others. Another means of centering is to use the text-align property for a given element, which in many browsers will align the element as well as the text:
div#content {
text-align: center;
}
Because neither the correct way nor the text-align method works in all browsers, you'll want to combine the technique:
div#content {
margin-left: auto;
margin-right: auto;
text-align: center;
}
And this creates your horizontal center hack. Of course, because you now ask that all text be aligned within the element, you'll have to be sure to create rules that overwrite that:
div#content p {
text-align: left;
}
This makes sure that any paragraph within the now-centered content division will align properly.
@import Workaround
If you are attempting to gracefully degrade your CSS layouts and have to support Netscape 4.x version browsers, you may want to consider using the @import workaround as a solution to ensure that your site degrades the way you want it to.
Netscape 4.x versions have partial support for CSS. Layouts are especially prone to breaking. But, Netscape 4.x version's impartial CSS support is a partial blessing because there's no support for the @import rule. This allows designers to split their CSS into two style sheets:
Site-wide styles (linked). This style sheet will contain font, color, and other CSS properties used for just about everything but layout information.
Layout styles (imported). This style sheet contains the layout information for the site.
So let's say you have a site-wide style sheet (styles.css) and a layout style sheet (layout.css), split up in the way described above. You can then link to the styles.css, but import the layout styles using @import:
<!-- begin link to design styles for screen --> <link rel="stylesheet" type="text/css" media="screen" href="styles.css" /> <!-- begin @import for layout styles --> <style type="text/css" media="screen">@import "layout.css";</style>
Because Netscape 4.x can read the linked style sheet, some style will be applied to the page. But because it cannot read the @import rule and therefore any styles associated with it, the layout style information is ignored, leaving a more gracefully degraded site.