The Ultimate CSS Hack Pt. 1

Website Design can be tricky when it comes to pleasing all the major web browsers. Here are a few tips that will ensure your website's cross-browser fluidity.

It's important to note that web browsers read from top to bottom and will always follow the last rule they've been told. In the following example, the second CSS class "white" is followed. We'll call this the "linear rule" throughout the series.

Internet Explorer: Conditional Comments
Following our linear rule, the following syntax will provide hacks for all versions of Explorer.
Insert the code below into the "head" tags of your document.

The browser follows "if" rules. First, it reads the main style sheet, and applies the styles. However, if the web browser happens to be IE 7, IE 6 or any other version, it reads the rules within the style sheet titled [if IE 6], [if IE 7], etc.

Any new and alternative styles applied to the alternative style sheet will be applied. Here's an example.

If the browser is Internet Explorer, it will change the "color: black;" syntax to "color:white;"
In addition, Internet Explorer will introduce a margin of 20 pixels into the document, but other browsers such as Firefox would naturally ignore the alternative style sheet, and therefor will not have a 20 pixel top-margin.

In the example below, because the alternate style sheet does not include specific instructions for "margin-top," Internet Explorer will follow the initial rule it reads in the main style sheet. In order to adjust the margin-top property for Internet Explorer, apply "margin-top: 30px" syntax to the alternative style sheet, and Explorer will now follow the rule.

Stay tuned for part 2: Safari