Filters & Hacks
As you work with (X)HTML and CSS, you will quickly learn that different browsers display your pages differently. The focus in this class on using strict XHTML to prompt browsers to use "standards mode" helps minimize these problems, but you will still encounter them as your designs get more complex.
Only a few of these situations are actually the result of "bugs" — incorrect implementations of standards in the browser software. Most result from legitimate variations in how the standards are implemented. For example:
- In their default stylesheets, Internet Explorer and Opera control list indentation with the margin-left property, while Safari and FireFox use padding-left. Getting consistent behavior across all browsers may require using a reset stylesheet.
- IE has an extra layer of processing called "Layout" intended to speed up rendering of Web pages. Basically, it assumes layout characteristics as the page is loaded, adjusting them as all the HTML and CSS arrives. These assumptions sometimes leave odd results if your CSS has not been explicit enough.
Hacks and Filters
Hacks are ways of tricking browsers into doing what you want and are usually used when the browser really has some kind of glitch in how it operates.
Filters are methods of making styles visible only to certain browsers or browser versions. One of the best know filters makes use of the fact that IE has an extra container beyond the HTML container. Therefore, the style that follows would only be noticed by versions of IE and would be ignored by FireFox, Safari, and other browsers:
* html ul { margin-left: 30px; }
An alternative approach would be to zero both padding and margins, and reset one or the other to you desired indentation.
ul, ol { margin: 0px; padding: 0px; }
ul, ol { margin: 30px; }