Comments on: IE Factor, exemplified

By: Jamie

Jamie — Thu, 26 Feb 2004 17:43:46 +0000

That’s spot on, I have been developing a property site which repeats the results of a property search, the thumbnail images were shifting 1 pixel to the left each row, it’s taken me 5 hours so far… FINALLY, a solution, Thanks, you rock!!

By: a web developer

a web developer — Wed, 25 Feb 2004 07:08:27 +0000

Ug, it’s so unfair that IE holds major market share and releases updates the least often…When it finally does support CSS properly, there will be much rejoicing.

By: Klaus

Klaus — Thu, 19 Feb 2004 21:02:07 +0000

Travis,

IE of course is not able to display transparent borders, even IE 6. They will become black instead… how could you even think of it ;-)

By: De

De — Tue, 10 Feb 2004 10:57:20 +0000

Thank U for your detailed explanation and examples. Until I read this article, I’ve been trying to get Explorer to display one design properly, but it messed it up.

By: Gyrus

Gyrus — Mon, 09 Feb 2004 14:17:43 +0000

Thankyoooooooooou! Believe it or not I was going mad with this bug just last night on a client template job. I had pretty much given up, and was idly browsing Stopdesign.com today waiting for something to download, and I came across this piece. Talk about serendipity :-)

By: Arve Bersvendsen

Arve Bersvendsen — Fri, 06 Feb 2004 02:01:25 +0000

There is a bulletproof way to create stylesheets that you know will only be applied to the version of IE you want to target. The technique involves using conditional comments to include stylesheets. By eliminating this need to look for a hack that applies to a certain version of IE, you can hopefully make the IE factor a bit smaller. A more detailed howto is available in Hack-free CSS for IE.

By: Travis Cripps

Travis Cripps — Thu, 05 Feb 2004 08:09:19 +0000

Hi. Thank you for your detailed explanation and examples. Rather than using a border the same color as the background, why not simply specify the color as transparent?

So, the altered line from your solution would then be:

border-bottom:1px solid transparent;

If you have to hack, somehow it seems a bit less “evil” a hack to me this way. ;)

By: dusoft

dusoft — Wed, 04 Feb 2004 15:01:46 +0000

Thanks for the explanation and bug fix. I have been trying to get Explorer to display one design properly, but it messed it up. Never mind. Now I know how to fix it.

By: Ric Tan

Ric Tan — Wed, 04 Feb 2004 10:52:53 +0000

Until I read this article, I wasn’t even aware that you were supposed to be able to specify top and bottom padding together, along with the L & R padding together. I’ve checked the W3C specs, and yes, IE isn’t compliant. Luckily for me, I’ve always been in the habbit of specifying all four attributes, so my class would have looked like:

.module {
margin: 0px 0px 15px 0px;
border:4px solid #666;
border-width: 0px 4px 0px 4px;
padding: 2px 10px 2px 10px;
}

which works fine in all browsers without any hacks.

By: Tobias

Tobias — Tue, 03 Feb 2004 15:32:13 +0000

Uh – uh – one more, while I’m at it:

I wanted to have two consecutive ul’s with the li’s displayed as block with fixed width and float: left.
For some reason IE put a vertical space between the ul’s, even thou all margins and padding were set to zero.
I tried removing all whitespaces between the tags, but nothing helped. Until I placed some charecters just after the > of the first ul… !? Then the space disapeared!

By: Alexander

Alexander — Tue, 03 Feb 2004 14:32:25 +0000

Thanks for the example – a very similar problem with padding was causing IE to arbitrarily insert half-page spaces in a column of images… nuking the padding fixed it. w00t.

On the plus side, as its security flaws become significantly obviously heinous with every turn, many corporations are taking long, hard looks at Excrement Exploder and wondering why they persist in using it.

By: Tobias

Tobias — Mon, 02 Feb 2004 22:34:45 +0000

Yet another strange IE behavior, that I’m dealing with at the moment.
I have a definition list where I have made a 1px graphic line gif, that I use as background on the dt’s like this:

background: url(line.gif) bottom left no-repeat;

But for some reason it does not show up on the first dt — so I have to add an empty dt and a dd with a nbsp inside it in the begining of the list to make the rest look like it should!
Can’t seem to find another solution at the moment…

By: Milan Negovan

Milan Negovan — Sun, 01 Feb 2004 03:59:44 +0000

Doug,

Thank you sooooo much for the post and the solution! We’ve developed an ASP.NET application and saw this same nasty bug but couldn’t figure it out (it’s still there: http://demo.custfeedback.com/).

Again, thanks!
Milan

By: Big John

Big John — Sat, 31 Jan 2004 20:29:00 +0000

Doug, your example has a left border, a bottom padding, no bottom border, and a block element nested inside. Those are the triggers of this bug, and that bottom border cures the bug.

BTW, Eric Meyer happens to have a mild case of this bug on one of his pages. Shhhh…

By: Dave Meehan

Dave Meehan — Sat, 31 Jan 2004 08:54:39 +0000

It appears to only be related to bottom padding when there is a left border but no bottom border. I tried all the combinations and thats the one that fails.

By: pixelkitty

pixelkitty — Sat, 31 Jan 2004 00:37:29 +0000

I had this exact same problem several months ago and ended up scrapping the entire design because of it and spending a good hour convincing the client that the new design was better anyway.

This solution is genius! Thank you for letting us all in on the process.

By: Madfish Willie

Madfish Willie — Fri, 30 Jan 2004 23:01:23 +0000

I had the same exact problem with a skin I was designing for another site. Although I couldn’t tell you what my problem was, I do know that it fixed itself with adding the bottom border with the same color as the background. Now I know “WHY” and it will save me several hours trying to figure out where and why in the future!

By: Doug

Doug — Fri, 30 Jan 2004 20:38:58 +0000

David: Right, should have known John and Holly would have this IE bug covered too. They’ve documented quite a few of them. Thanks.

By: David Kolar

David Kolar — Fri, 30 Jan 2004 20:24:27 +0000

Magik Creeping Text is an additional source of information on this and other CSS-related browser bugs.

By: Scott Blanchard

Scott Blanchard — Fri, 30 Jan 2004 20:10:59 +0000

Thanks alot for posting this. I’m sure it will save someone (including me) some head scratching.

One question though, since you are using an unclassed h2 element as your hook for the title, do you run a risk of unintended styling if he user places an h2 element in the content of the module? Why not give the h2 a class instead?

Module Title