Make IE6 Legend Padding go away

**ucahg** · Sep 18, 2003 17:16

I am trying to make the legend tag in a fieldset expand to take full available width, however it seems that I can't get rid of some extra space in IE6 (and lower versions most likely).

This is my code:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html>
<body style="padding:0;margin:0;">

<fieldset style="border:0px none; margin:0; padding: 0;">
<legend style="width:100%;background:yellow;margin:0; padding:0;text-indent:0;border:0;">Health information:</legend>
<form>
Height <input type="text" size="3" />
Weight <input type="text" size="3" />
</form>
</fieldset>

</body>
</html>

I know this won't expand to the full width in Mozilla but I'm gonna have the legend text in <h3> tags in the destination HTML file. However right now I'm focussing on explorer, and you'll notice that the legend contents do not sit flush with the left side of the page. Is there any way I can fix this?

Also if you could test how it works in whatever other browser you may be using, that'd be most excellent, just let me know if it's flush with the page edge (don't worry about the width).

Thanks in advance,

Edit:

Perhaps this should've went in Browser Issues. Oh well

**ucahg** · Sep 18, 2003 19:48

Interesting, I determined the size of the unwanted gaps to be 7px, set the margin of the legend to "0 -7px", and problem solved in Internet Explorer.

I open up Firebird to see how that's affected everything and what hack I'll need to use to fix it, and suprise surpise, it still looks as it should (y)(y) [img]images/smilies/smile.gif[/img]

I'm quite happy about this.

By the way, you can see my use of the fieldset as the header for the search box here: http://24.141.194.248/index.new.html.
The code's a bit messy right now, as I'm trying to get a working prototype as soon as possible before I go back and beauitify the code.

Let me know if this works in your browser and I'd be a very happy person

(the search header above the search box should expand to 100% of the grey sidebar it's in).

**Paul O'B** · Sep 19, 2003 01:58

Hi,

IE6 looks ok but OPera7 doesn't like it I'm afraid (rest of the page is ok).

Paul

**ucahg** · Sep 19, 2003 04:36

Hmm, well I've stumbled into the world of browser hacks on this one. This code makes it line up in both IE6, Opera7, and Firebird 0.6.1:

Code:

#right legend
{
/* make Opera see this */
position:relative;
left:-10px;
/* end hacks */
padding:0;
width:100%;
}

* html #right legend
{
/* for IE only */
margin:0 -7px;
left:0;
}

I'm gonna test of IE5.5 today, and we'll see what happens.
This probably isn't worth the effort I'm putting into it, but now I see it simply as a challenge to get it to work properly.

Also Opera doesn't expand to all the available width, but I don't think I can stop that

**ucahg** · Sep 19, 2003 13:16

Well I did manage to get Opera7 to use the full percentage of the width of the column, but it caused me to add more code to hide it from IE6. I added a padding-left of 125% to the legend, and positioned the h3 inside the legend tag at -125%.

A couple problems with this though:
- breaks IE6, need workaround code
- breaks Op6, looks horrible
- uses magic numbers (125%) that just work, and have no relation to the rest of the site.

As such I'm going to ignore this slight display problem, and as it works for more browsers correctly than works for Opera 7 and annoys other browsers.

I am considering not even using the fieldset for this, but I think it's suited for it if I can just find a satisfying solution for most browsers that degrades well in the rest.

Edit:

Now my experiment comes to an end. It was becoming too much trouble to try and stylize fieldset in such a manner, especially when I found out that legend tags cannot contain <h3> tags and vice versa. Oh well, it was fun, and worth a shot. It's too bad though, because that would've been more semantically correct.

The above link will no longer serve as an example I'm afraid, as I'll be modifying it.

User Tag List

Thread: Make IE6 Legend Padding go away

Thread Tools

Display

Hybrid View

Make IE6 Legend Padding go away

Bookmarks

Bookmarks

Posting Permissions