Tutorial 5
This tutorial will explain how to use CSS hacks to make your layout compatible with Mozilla and other non-IE browsers.
Requirements:
Any LJ account (free, paid, or otherwise).
Method 1 - The Child-Selector Hack:
In CSS, the > character means "child of" - so, in technical terms, the selector html>body means "a body tag that is the child of an html tag." However, all that's necessary to know for this hack is that Mozilla and other browsers understand child selectors. Internet Explorer doesn't, and so will completely ignore them. This makes it possible to write one set of code for IE, and another set for other browsers.
In order to use the child-selector hack, you need to simply duplicate a piece of code and add html>body in front of the second instance. The first instance of the code will apply to Internet Explorer, while the second instance will apply to all other browsers. For example, the following code will make text within font tags red in Internet Explorer, and blue in other browsers:
font{
color: red;
}
html>body font{
color: blue;
}
Of course, this hack isn't limited to changing text colors. You can set any page property for IE browsers and alter it for other browsers. This is especially useful, because sometimes a layout will align perfectly in one browser, and be a pixel or two off in another browser. With this hack, you can set the correct alignment in Internet Explorer, and then override the numbers using the html>body selector in order to set the correct alignment for other browsers, without breaking the positioning in IE.
Method 2 - The !important Hack:
In CSS, if you define something (say, a font size) twice, the last value given will be the one used. This can be overridden by ending the line with !important - a line ending in this will be used, regardless of whether the same thing is defined later in the code. However, like the child selector, Internet Explorer doesn't understand !important. Therefore, you can write one line of code ending in !important, then another that doesn't. The first code will apply to Mozilla and other browsers, because they understand the !important rule, and the second code will apply to IE, because it doesn't understand and takes the rule that comes last.
This code does the same thing our first example did - it sets text within font tags to red in IE, and blue in other browsers:
font{
color: blue!important;
color: red;
}
As you can see, the advantage to using this hack is that it's more compact than the child-selector hack above. However, some people find this method more confusing. It's mainly a matter of preference - both methods accomplish the same thing, so use whichever one makes more sense to you.
Other Overrides:
Once you've used these hacks to achieve consistent layout in all browsers, you may find a horizontal scrollbar appearing in browsers other than IE. You can fix it with theonlykow's removal code.
Permalink + Add to Memories