Comments on: Weird IE bug: inputs incorrectly inherit horizontal margins when they’re in a fieldset

by: Jennifer Grucza

Wed, 01 Sep 2004 14:27:10 -0700

I managed to find one other reference to this bug on The Man in Blue, but alas, there is no fix or work-around mentioned.

I tried just canceling out the margin, by applying a negative margin using a CSS hack, but there’s no way for me to tell IE only to apply it to inputs of a certain type, since IE doesn’t understand input[type=”text”] selectors.

by: Matthom

Thu, 02 Sep 2004 10:05:36 -0700

Interesting. I wasn’t aware of that type of selector. I didn’t know it existed.

Thanks for the mention of the bug, though. I will keep an eye out. I’m sure it will come up in my own work…

by: Jennifer Grucza

Thu, 02 Sep 2004 10:43:23 -0700

Yeah, they’re in the CSS2 spec. It’s a pretty useful tool to have, just too bad IE doesn’t support it. I think that’s the kind of selector people use when they have those little images next to offsite links.

by: Ethan

Fri, 03 Sep 2004 09:38:24 -0700

If you toss the <input> into a paragraph, that should erase the horizontal margin you’re seeing.

by: Ollie

Thu, 24 Feb 2005 09:26:06 -0800

There’s a very similar bug in IE where it always adds a 1px margin above and below any of the elements you’ve mentioned, such as an input of type text. As yet I’ve found no way of getting rid of it (played around with margin:0, padding:0, and paragraphs as suggested above - none of them work for get rid of the problem though )

PS I know this thread is pretty old now but it’s driven me insane, this glitch… hopefully some time in the future somebody with the same problem will be saved by finding this before it drives them mad too!

by: Ollie

Thu, 24 Feb 2005 11:20:16 -0800

OMG. I never actually had anything against IE until I begun developing web pages. Why, why Lord, did the most widely used browser have to be the most utterly useless when it comes to css?! Gah! Anyway, on the verge of giving up, after a solid 48 hours, I hit a workaround for my extra 1px top and bottom margin bug for all input elements. I was using a table to lay out the form, so gave each particular cell type its own class (e.g. .centredcellsmall {padding-left:64px; padding-right:64px; etc etc etc; height:43px;}. Now IE rendered this as 45px high (and not 43px) because it added +1px margin/padding/whatever to the top and bottom of the input element. And it was impossible to write this out using display:inline or margin:0px none or padding 0px or anything. What I had to do was change the class to height:41px (i.e. 2px smaller than desired, so that when IE added the annoying 2px total margin it appeared as 43px). Then I added in the following extra css2 selector below the first one: td[class=”centredcellsmall”] {height:43px;}. IE can’t read advanced selectors so ignores this. But Mozilla etc can read it, so draws the cell 43px. NB I needed to set td {padding-top:0px; padding-bottom:0px} too to stop that interfering. What a nightmare.

by: Jared

Fri, 22 Apr 2005 11:00:05 -0700

IE WHITESPACE ISSUE

The space above and space below an element can usually be eliminated by simply providing NO whitespace in your code around that element. That means your photo might look like:

Instead of a more human readable:

But at least this technique eliminates the need for CSS hacks. Anyway, I’ve found that rescues me from that situation often, and my code and css remain compliant and hack free… just harder to read.

As far as the input elements go (and the real reason I found this page in the first place) - I didn’t want to wrap the input elements with a tag because that would throw errors in validation. So what I did was throw a tagset around the . I gave it a class name (inputProtector) so I could apply styles but even before I defined styles, it fixed the problem. This fixed my TEXT, TEXTAREA, and SUBMIT fields.

Thanks for the great idea guys!

by: Jared

Fri, 22 Apr 2005 11:03:59 -0700

Sorry to double post- but I see that in my above comment the code got removed. Dang. I’ll redo the code with parenthesis instead so you’ll still know what I mean:

This hides spaces above below elements:

(div)(img src=…)(/div)

Nicer human readable that causes issue:

(div)
(img src=…)
(/div)

I put a (div class=”inputProtector”) tagset around the (input) tag.

There, I hope that makes more sense… and doesn’t get wiped out when I submit this comment!

by: BubblesSOC.Net » ie fieldset bug

Wed, 04 May 2005 07:40:44 -0700

[…] thorough research, but as far as i know, there is no workaround for this bug. i did find someone else […]

by: Frank Butcher

Thu, 27 Apr 2006 03:58:51 -0700

An old problem I know but I came across this the other day, you can wrap a span around the input and set the maring to 0 on the span

(span style=”margin:0;”)(input type=”file”/)(/span)