Jeremy Smith's blog

Entry Is Labelled

CSS-ing Case Round 9: Fixing IE

<DISCLAIMER>

Blah blah blah... if you haven't seen the disclaimer, it's on all of the other entries in this CSS-ing Case series.

</DISCLAIMER>

Round 9

Fixed the CSS to get IE 6 and IE 7 working. Not much commentary to be had, really, though. No spectacular hacks needed. If you really want to know, here is the basic example of the hackery needed to fix IE 6 and IE 7:

#masthead { position: relative; }
#masthead div { position: absolute; }
#left_side_box { left: 189px; }

h1 {
  position: absolute;	
  top: 79px;
  z-index: 1; 
}

Wrap that in conditional comments that look like:

<!--[if IE]>
<link title="IE Hacks" href="ie_hacks.css" rel="stylesheet" type="text/css">
<![endif]-->
(which is the preferred method for separating out IE-specific CSS rules), and there you have it, all that is needed to get IE working with the CSS design.

Not a lot is needed to get IE to behave. In general, the time-intensive task is tracking down the problem with IE. The amount of the "hack" to fix it is quite small. If you find yourself writing large amounts of CSS to account for IE, there's probably a larger issue at hand. When I first started using CSS-heavy1 designs, I found myself writing 50 lines of IE hack CSS rules for every 100 lines of "regular" CSS. As I become more and more seasoned working with it, the amount of IE "fixing" that need be done usually amounts to less than a dozen or so rules. If you find yourself doing more, there's probably something more inherent wrong.



1 "CSS-heavy" for the term used to describe a design marked by a clean and clear separation between the markup and the presentation layers? I can never decide on a good term to use to differentiate "I-do-<table>-and-<font>-tag web design" versus what is commonly known as "CSS"-based design2. Maybe "using CSS positioning" or "CSS based" works better? Maybe one should just say "web standards" or "a focus on web standards?3" Or one could just say "modern" or "that which doesn't suck."

2 Not mentioned are the "I-replaced-all-of-my-<table>-tags-with-<div>-tags-so-now-I'm-CSS-based" designers. Remember, Any time a div is the answer, there's a hole in HTML. Everytime you have to resort to using a <div> tag, you should feel just as bad as if you just used a <table> tag. Well... maybe not that bad... <div> tags shouldn't be used like <table> tags. The use of <div> tags should be minimized. Only use them if you absolutely have to (or you know why not to use them, thus you understand the purpose of the mantra, thus you can break it when you deem it necessary).

3 The <table> and <font> tags are both "web standards," so that's an equally valid use of the description "web standards based design." So saying a design is "web standards based" wouldn't differentiate it from one that is based on the <font> and <table> markup.

Comments

  1. gravatar

    1-I'm never sure what to call such differentiations either. I've been referring to my work lately as "semi-tableless." But if I pilfer some of your I.E. hacks I'll be able to look for a new term.

    2-If <div>'s are good enough for Meyer and Zeldman, they're good enough for me! But your point is well taken—they shouldn't be used simply to solve positioning problems (though sometimes we must). Ideally each div should be used to contain types of content without impeding the natural document flow. While I may choose to position my menu div on the left, the menu should still appear in logical order when seen (or heard) in a browser that doesn't support my style sheet.

  2. gravatar

    Dear Mr Smith,
    I am a graduate research assistant working with Dr Maria Bakardjieva at the University of Calgary. We are looking for bloggers to take part in a research project. If you would like to receive a detailed invitation to participate please email me at calgaryblogresearch@gmail.com or Dr. Bakardjieva at bakardji@ucalgary.ca.
    Kind Regards,
    Georgia Gaden

  3. gravatar

    Thanks for this post. I've been reading up on CSS, and every bit helps!

  4. gravatar

    That's a good point about the being a "web standard". Best to clarify which standards, i.e. XHTML 1.0 Strict.

    Regarding div use, the best practice is to write your markup first, and use divs to group content where it forms a group, but is not grouped by another tag, such as

      for
    • s, and for it all.