Common Drupal Design Issues

We've all been here before—you're busy perfecting your newest addition to your Drupal site in CSS, and it's looking good until you decide to double check your work in Internet Explorer.Unless you're into black magic, it's likely that your design is botched and you must begin playing "name-that-IE-bug." It's tons of fun playing this guessing game all afternoon, but if you're in a hurry, here's a list of common errors that you may want to check into first, especially if you are working with a Zen-based theme.

1. The pesky <P> tag that Drupal loves to add to your code within a block. If you create a block with the intent of only including a simple image tag in the code (or anything besides text), Drupal will surround your code with paragraph tags. The tags, by default, come along with a 1em margin on both top and bottom, which can push your design into uncharted territories. Either create a new block input type that doesn't convert spaces or line breaks into tags (site configuration > input type > add new), or try this CSS override: #your-block-id p { margin: 0; }.
2. The age-old IE Box Model problem is giving you fits? Remember that when you specify a box width (say 500px) and padding (10px) on a block, non-IE browsers will add these two together to create a block that's truly 520px wide. This causes discrepancies in your design, depending on the browser. The best way around this is to always add your padding or margins to the #block-inner id within your block.
3. Internet Explorer and floats fight like an old married couple. If your blocks just aren't floating where they should be, trying including the CSS clear: float; in elements before and after your floats. Another good tip is to specify widths of floating objects to better control them. There is a lot of good literature about how to fix your floats in IE, here are a few helpful articles: http://www.positioniseverything.net/explorer/doubled-margin.html http://www.positioniseverything.net/explorer/floatIndent.html http://www.alistapart.com/articles/holygrail
4. Sometimes line-heights are to blame. Every now and then they will cause your alignments to be off by a few pixels between browsers. If there isn't text involved, specify your line-height in pixels instead of percents or ems.
5. Is your design especially wonky in IE 6? Don't forget that this little gem of a browser doesn't like negative margins when images are involved. IE6 will obey the true width of an image rather than the negative margin you are specifying. If you need negative margins in your design, it might be helpful to rework them (read: hack) in an IE6 specific stylesheet. Don't forget you'll need to set the conditional stylesheets that are processed by IE in your theme info file, like so: conditional-stylesheets[if IE 6][all][] = ie6.css conditional-stylesheets[if IE 7][all][] = ie.css

And don't forget to do your part to eliminate IE6 once and for all!