CSS and IE Positioning Problems
November 11, 2004 1:59 PM   Subscribe

CSS positioning is driving me crazy. I have a relatively simple layout -- a header and two fixed-width columns. I could do this easily enough with tables, but I'd love to give this CSS business a try. My current main problem involves Internet Explorer (shocked, SHOCKED!!) and wacky spaces. There's a heaping serving o' more inside.

I love the elegance of doing it all in CSS. Table-hacking, while nice and reliable, is also ghetto. And I love being able to fundamentally change the page using my little EditCSS plugin for Firefox, and seeing things magically happen.

Main issue: If you view the page in IE 6, you'll notice the ever-so-annoying space between the sidebar and the right side of the main div. How can I make that space disapper without causing any spacing problems in nice browsers?

Other issues:

1. I'd like to declare a doctype, however my HTML seems to be too advanced to be 3.2 (apparently we didn't have "id" and "class" attributes then) and if I declare HTML 4, it looks all messed up.
2. In Firefox, the second entry has a pixel of extra space at the bottom of the div. Anyone know why?

Thanks in advance for any help you can offer, MeFellows.
posted by grrarrgh00 to Computers & Internet (3 answers total)
 
Dunno what that spacer line is.

This page might be useful for comparing your code to regarding column layouts.
posted by dobbs at 2:07 PM on November 11, 2004


First, you should go ahead and declare that DOCTYPE, and even better make it an XHTML 1.x declaration instead. Doing that will trigger "standards" mode in most browsers, meaning they adhere to standards better. Particularly, IE will ditch its non-standard (though sensible) box model and will render things much closer to how Mozilla does.

If you get any display glitches when you do this, you should consider those bugs and fix them. Don't remove the DOCTYPE to get rid of them, that's lame.

Second, there are a slew of CSS "hacks" you can use to create rules that target only certain browsers. My favorite is to stick * html at the front of a CSS rule to make it IE-specific. Any rule beginning with that should never match anything according to the spec, but IE has a bug that makes it, and no other browser, render such a rule.

(For example, * html p { color: red } will make paragraphs appear red in IE only.)

So you slap a DOCTYPE on top, make everything look good in Mozilla/Opera/Safari, and then patch up any remaining glitches in IE with the * html trick.

Easy peasy.
posted by Khalad at 2:10 PM on November 11, 2004


See also Position is Everything. They've got some good demos on IE bugs.

And yeah, always code with a doctype, right from the beginning.
posted by DrJohnEvans at 3:07 PM on November 11, 2004


« Older My Microsoft Stark Mouse Jumps Erratically Every...   |   Firefox vs Safari Newer »
This thread is closed to new comments.