The pain of cross browser CSS
It's late at night, you've been coding CSS for hours, and after a while of googling and trying to solve rendering bugs, finally! The design works on Internet Explorer!
Yeah, it's always been a pain writing cross browser CSS, but you can save yourself some pain by knowing and using some helpful tips.
The way you reference HTML elements in your CSS can have a big impact on how IE will behave when it renders your design. I find it helpful to use only ids and classes in my main stylesheet and use tag names and ids/classes in the IE specific CSS...
- /* main stylesheet */
- #someId { styles... }
- .someClass { styles... }
- /* ie stylesheet */
- div#someId { styles... }
- p.someClass { styles... }
The cascading nature of CSS makes that style declaration more specific, overriding the one defined in the main stylesheet. IE will ignore the main style and use the IE specific ones instead. So, when you try fix a discrepancy in the the rendering of your HTML, you won't have to scratch your head when you click refresh and nothing happens.
One thing to avoid is chaining your classes in a style declaration...
- /* IE will completely ignore this */
- p.someClass.someOtherClass { styles... }
I'll admit it, sometimes I don't even look at IE6 for a while because I'm so cozy in Firefox with Firebug and the Web Developer toolbar's live CSS editor. I mean, all I have to do is right-click and hit inspect element and I can tweak at will! I digress... After you've written a lot of CSS and find lots of bugs when you open the page in IE, it's always best to begin by validating your stylesheet AND your HTML templates. You'll be surprised how much this will clear up. I like to use the W3C validator, as it has lots of other useful tools...
This validator checks the markup validity of Web documents in HTML, XHTML, SMIL, MathML, etc. If you wish to validate specific content such as RSS/Atom feeds or CSS stylesheets, MobileOK content, or to find broken links, there are other validators and tools available. http://validator.w3.org
While we're talking about HTML, it's also good to use a valid DOCTYPE at the top of your HTML templates. I like to use XHTML, since it forces you to write clean markup...
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
- Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
...or if you prefer plain old html...
- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01
- Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
Now, Doctype is a whole other subject. You can read more about it here -> w3schools.com
Please share your tips in the comments!
Post new comment