Sunday, March 29, 2009

IE-specific HTML/CSS

I've been using IE specific CSS overrides in my CSS experiments for stuff that handles differently in IE and Firefox. When creating a Fieldset in IE, I get a rounded border. This apparently is the simplest way to get a rounded border in IE. I added the CSS attributes for the rounded border into the style sheet for Firefox. Now, the visual difference between the rendering in IE and in Firefox is the padding so I had to serve a different CSS to each browser.

I didn't want to maintain two entirely different CSS files loaded through server-side scripting and using Javascript to change stylesheets didn't really appeal to me so I went with IE's ability to execute code within HTML comments (conditional execution/rendering).

The comment looks like this:
<!--[if IE]><style type="text/css">@import "ie_fixes.css";</style><![endif]-->

Internet Explorer reads the "if IE" and makes the style tag a part of the document while Firefox treats it as an HTML comment.

No comments:

Post a Comment