MetaChat - OMG, WTF CSS?

MetaChat is an informal place for MeFites to touch base and post, discuss and chatter about topics that may not belong on MetaFilter. Questions? Check the FAQ. Please note: This is important.

11 June 2006

OMG, WTF CSS? Okay, this will probably not thrill most of you, but a couple of people 'round these parts may love me for it: CSS for IE only. This just ended several hours of fuming headache for me trying to position some text where IE and FF interpret the line-height differently.

post by: taz at: 04:35 | 15 comments

This is great in as much as it works, but you're taking advantage of a bug in IE's CSS comment processing to work around other bugs. So if MS fixes the comment bug in the future, you're double-plus boned.

posted by Capn 11 June | 06:49

Stupid IE. However, if they fix the bug and also fix their line-height convention, I'll be unboned. Or something.

This was a nasty, sticky problem. Even with absolute positioning, I was getting a different position.

I so miss the old tables valign tag.

posted by taz 11 June | 06:59

I have absolutely no idea what you're talking about but am very happy for you anyway.

posted by essexjan 11 June | 07:03

posted by taz 11 June | 07:05

I think they fixed it in IE 7

posted by urbanwhaleshark 11 June | 08:01

Does anyone here have IE7?

posted by taz 11 June | 08:05

At work. But I'm off this week chillaxing in my crib.

posted by urbanwhaleshark 11 June | 08:59

Thanks, uws... I'll find someone around here that has it.

posted by taz 11 June | 10:00

what about making use of "!"?

ex:
#thing {
height:40px;
!height:45px;
}

the !height is only ready by IE.

posted by freudianslipper 11 June | 12:50

Maybe I'll try that... But is that considered a bug as well, I wonder?

I still haven't found someone with IE7; maybe I'll ask in a post tomorrow.

posted by taz 11 June | 13:34

Thanks, taz. This will come in handy!

posted by tracicle 11 June | 14:39

Step 1: Reset whitespace and margins to minimize differences between browsers. See Sane CSS Sizes for cross-browser font sizing. This will get you most of the way there in good (not IE) browsers.

Step 2: Check Position is Everything for IE-specific bugs.

Step 3: Put IE-specific CSS in separate style sheets linked by conditional comments. That way they only get loaded by IE. Since IE causes most display problems, why punish the other browsers?

posted by kirkaracha 11 June | 15:05

taz ya, it's a bug still. :) Does your fix validate? I'm not sure the "!" bug does.

posted by freudianslipper 11 June | 15:51

fyi: here is another use of the "!", but using !important after a command. This could also help because IE ignores it.

an example of this trick is #4 on this page.