IE <legend> hacks

[GoogleCodeExporter]

There are a few issues regarding the legend flag.

1-) The IE always add a left margin to the legend text, eg.:

<fieldset>
<legend>Simple sample form</legend>
<h1>Forms</h1>
</fieldset>

This code will have the "Simple sample form" text moved a bit to the left
in IE. This can be fixed by adding this line to the CSS IE hacks:

legend { margin-left:-8px; }

2-) The IE also adds a top margin to the legend flag, eg.:

<h1>test</h1>
<fieldset>
<legend>Simple sample form</legend>
<h1>Forms</h1>
</fieldset>

This code will display different in IE and FF, in IE there will be margin
between the <h1>test</h1> and the legend. This can be fixed by adding this
to the IE hacks:

legend { margin-top:-18px; }

3-) The IE also adds an bottom margim to the legend, this is already
adressed by a hack in blueprint . The problem is that this hack is using
the em unit. I am not sure if em is the most appropiate unit for dealing
with such problem since em is variable and as far as I know this IE bottom
margin is always fixed size. I think a better solution would be adding a
margin-bottom:16px; to the IE hacks.

Regards,
Cesar

Original issue reported on code.google.com by cesar.ca...@gmail.com on 2 Jan 2008 at 6:04

[GoogleCodeExporter]

I did some investigation on 2-) and 3-)

It seens that the IE fieldset padding-top is broke. IE seens to treat the 
fieldsets
padding-top as a margin-top. So a fielset with a "margin:1.4em" style would 
have no
padding-top and a extra 1.4em on the margin-top.

A way to fix this is to add a padding-top:0; to the IE hacks, this should remove
extra margin.

But this still leave with a fieldset without padding-top in IE. Blueprint 
already
workaround this by adding a margin-bottom to the legend equals to the 
padding-top.
But the problem is that this only works for fieldsets with a legend in it.

Original comment by cesar.ca...@gmail.com on 3 Jan 2008 at 6:23

[GoogleCodeExporter]

[deleted comment]

[GoogleCodeExporter]

Thanks for your help. I've added this in the repository, and will test it as 
soon as I get my hands on a machine 
with IE6. 

Original comment by ola...@gmail.com on 13 Jan 2008 at 5:36

[GoogleCodeExporter]

Looks like it's working. Thanks!

Original comment by ola...@gmail.com on 20 Feb 2008 at 9:18

• Changed state: Fixed