Weird IE bug: inputs incorrectly inherit horizontal margins when they’re in a fieldset
I ran across a strange bug today in IE. I tried to find any other references to it on Google, but couldn’t find any. Here’s the issue: we have an input field within a fieldset that is in turn within some container object. The container object has some margins defined. For some reason, in IE, the input field is inheriting the horizontal margins from this container object!
It only happens in fieldsets, and it only happens with text, file, and submit/button inputs and textareas (not checkboxes or radiobuttons).
Here is an example:
<div style="border:1px solid #ccc">
<div style="margin:50px;border:1px solid blue">
Container with 50px margin
<fieldset>
<legend>Fieldset</legend>
<input type="file"/>
<br/>
<input type="checkbox"/> Checkbox is not affected
</fieldset>
</div>
</div>
And here it is live (you’ll have to view it in IE to see the strange behavior).
September 1st, 2004 at 2:27 pm
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.
September 2nd, 2004 at 10:05 am
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…
September 2nd, 2004 at 10:43 am
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.
September 3rd, 2004 at 9:38 am
If you toss the <input> into a paragraph, that should erase the horizontal margin you’re seeing.
February 24th, 2005 at 9:26 am
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!
February 24th, 2005 at 11:20 am
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.
April 22nd, 2005 at 11:00 am
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!
April 22nd, 2005 at 11:03 am
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!
May 4th, 2005 at 7:40 am
[…] thorough research, but as far as i know, there is no workaround for this bug. i did find someone else […]
April 27th, 2006 at 3:58 am
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)
September 8th, 2006 at 1:40 pm
I have this problem also, and although I figured out how to make it work by wrapping the input button in a div tag, it really pisses me off that I have to do this. I came across others who said they solved their similar problems by using overflow:hidden [http://www.xs4all.nl/~blackeye/marginright_bug2.html] or display: inline [http://www.sillydomainname.com/2006/03/29/ie-css-double-margin-bug/], but neither worked for me.
Crossing fingers that IE7 fixes this bug — and all the others, too.
September 18th, 2006 at 11:28 pm
Alas, tested it on the latest IE7 today… still the same problem.
One good thing: The same fix applies (span of 0 margin)
April 10th, 2007 at 3:55 pm
Adding a padding in negative pixels might help.
June 26th, 2007 at 3:51 pm
Jared
Thank you, thank you, thank you! Your solution worked like a charm.
I played with margins, with padding, divs and tried all manner of bizarre work-arounds, but removing the spaces between the tags cleared my border drop right up. Thank god–I was starting to feel the need to commit violence.
October 23rd, 2007 at 11:35 am
I was playing around with the extra padding for almost half a day and the only thing that seemed to fix it was adding -3 to the margin of the input field.
They need to start making shirts that show the world how much we hate IE6/7.
April 12th, 2008 at 7:35 am
Have the same problem myself. Have tried padding in negative pixels but it’s still not fully solved the problem. Anyone else got any ideas?