So I have spent the past two days updating various websites to make sure they looked nice and worked in all the various browsers, specifically Chrome, Firefox, and IE 8. As anybody who has spent any time at all working on CSS can tell you, programming for Firefox and Chrome is simple, Internet Explorer... not so much. There are several nuances that make Internet Explorer difficult, they have gotten better with IE 8 - I remember having to create entirely different CSS files, one for IE and one for other browsers - but as my headaches these past days can attest to, cross compliance is far from reality. One specific issue I was having was formatting select elements, the drop down boxes with pre-populated values that are so common on HTML forms. Specifically, my client needed added space between three elements, a date field, month field, and year field. Chrome automatically added in some space, but Internet Explorer and Firefox mashed all three fields together. "No problem," I thought to myself, "one quick CSS rule and I'll be on my way." select{
margin-right: 0.5em;
} A quick refresh and Firefox confirmed that this rule worked as expected, but alas, Internet Explorer did not want to play ball. Now, when updating a website lots of things could be the problem: is the CSS code even being reached? Is there a cached version still being used? Is there an error with the CSS? With the HTML? Using a hard-refresh (control-F5) to clear cache, and using Developer Tools to trace the CSS, I ruled out the first two possibilities, and since the code worked perfectly in Firefox and Chrome, one would think the other two were equally impossible. After a little tweaking I found the silly little bug, Internet Explorer cannot or will not style a select element without also styling the option element, the various dropdown options that appear when you click on the box. With that the working code for all three browsers is: select{
margin-right: 0.5em;
}
option{
margin-right: 0.5em;
} The other issue I had the pleasure of tangling with was getting an entire form to be centered on the page while keeping the elements left aligned with one another. Once again the fix for Firefox and Chrome was quite simple: form{
margin: 0 auto;
}The shorthand for the margin command sets the top and bottom margins with the first value, and the left and right with the second. Since the left and right margins are both set to the same auto-computed value, the content becomes horizontally centered on the page. Of course, Internet Explorer chooses to ignore this command by default. This fix is deceptively simple though, and many programmers will not even notice the issue. The problem comes with Internet Explorer's Quirks mode, if a website does not specify an HTML Doctype, Internet Explorer defaults to an old, HTML 4 compliant version. To force an updated XHTML 1 rendering, place the following line at the VERY top of your webpage, even before the <html> tag. <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”> A simple fix to solve future headaches. |
Wednesday, January 19, 2011
Misadventures in CSS
Subscribe to:
Post Comments (Atom)
No comments:
Post a Comment