Legend extend to full width in IE6

HTML & CSS
1

Hi,

In FF, Safari, IE7 my legend extends the full width of its containing element.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
  <meta http-equiv="content-type" content="text/html; charset=windows-1250">
  <meta name="generator" content="PSPad editor, www.pspad.com">
  <title></title>
  
  <style type="text/css">
  *, form, fieldset{margin:0 0;border:none;}
  
  legend{width:100%;height:30px;margin:0 0 20px 0;padding:5px 0 0 0;color:#fff;background:#46256a;font-size:1.3em;}
  
  body{padding:0;margin:20px;color:#333;background:#fff;font:12px arial,verdana,sans-serif;text-align:center;}
  </style>
  
  </head>
  <body>
  

    <form name="Form1" method="post" target="I1" action="#" style="border:1px solid #000;width:200px;margin: 0px; padding: 0px;">
        
        <fieldset>
        <legend>Personal information</legend> 
    
    </form>

  </body>
</html>

However, in IE6 there is padding on either side.

Is there anyway to fix this?

Thanks for your help.

2

Legend is an… unpredictable element at best. Much like the rest of form elements it does not take width, height or padding the same way in any two browsers.

This is why I usually put a span inside the legend, pad the top of my fieldset and absolute position the span – a technique Dan Schulz showed me a few years ago.

Same goes for fieldset which can also react unpredictably, which is why sometimes you end up having to wrap fieldset in a predictable tag like DIV.

That way you have the fieldset/legend for accessibility and semantics, with tags you can actually predict the behavior of… and trust me, it’s more than just legacy IE where differences are going to rear their ugly head.

It feels dirty, it’s more markup, but it’s the best solution I’ve found and means you don’t need browser specific hacks to make things work.

Besides, you can always find markup savings elsewhere. Forms are a royal pain in the ass and you’re best bet in most any case is to strip the formatting off anything you can’t predict the behavior of in CSS, and wrap it in tags that actually behave. See attempting to style an input.

… and you can blame this on the specification since it doesn’t actually say how fieldset, legend, input, textarea or select are supposed to accept styling, or even if they should!

3

Aaah. Had never seen *+html before. Every day’s a…

4

Yes, they are safe to use and target IE6/7

  • html legend (targets IE6)
    *+html legend (targets IE7)

We use them quite a bit when working with inline-block workarounds

5

Whoa! And I had given up. I’m cool giving IE a workaround.

So these are just specific to the elders of IE?

  • html legend
    *+html legend

That’s brilliant to know. Thanks for your patience and assistance here Rayzur, it’s very much appreciated.

Thank you

6

Where is </fieldset> ;)?

7

You can fix IE6/7 if you want to.

The SP article “Fancy Form Design” suggests using relative positioning but negative margins would do the same.
Resolving Internet Explorer’s Legends Issues

It just depends on whether or not you want to feed IE a workaround, they are adding 7px padding on the sides.

Negative margins work for me -


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
 "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled</title>
  
<style type="text/css">
body {
    margin: 20px;
    padding: 0;
    color: #333;
    background: #fff;
    font: 12px arial, verdana, sans-serif;
}
form, div {
    width:200px;
    margin:5px 0;
    border:1px solid #000;
}
fieldset {
    margin:0;
    padding:0;
    border:none;
}
legend {
    width:190px;/*200px with padding*/
    height: 30px;
    margin: 0 0 20px 0;
    padding: 5px;
    color: #fff;
    background: #46256a;
    font-size: 1.3em;
}
* html legend {margin:0 -7px 20px -7px}/*IE6 needs -7px lt. and rt.*/
*+html legend {margin:0 0 20px -7px}
</style>

</head>
<body>
  
<form name="Form1" method="post" target="I1" action="#">        
    <fieldset>
        <legend>Personal information</legend>
    </fieldset>
</form>

<div>200px wide test gauge</div>

</body>
</html>
8

Oh, sorry, I presumed you had IE6 at your end to see the problem.

I can screengrab if you like.

I reckon I’ll just use a heading element instead.

Thanks anyways…

9

Thanks for your reply Rayzur.

Unfortunately even with the new Doctype in place the legend is still of the same width.

I think I’ll just stick a graphic in instead.

Thanks again for your help.

10

Even adding that in there’s still padding on either side of the legend.

11

How much? If it’s just a little, I doubt there is anything you can do. Legends IIRC come with “padding” by default and you can’t remove it with pure CSS :slight_smile:

I might just be off the wall though, souns right though. I haven’t slept in two days :slight_smile:

12

You have an incomplete doctype, throws IE in quirksmode.
Missing the system identifier (in blue)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
[COLOR=Blue] "http://www.w3.org/TR/html4/loose.dtd"[/COLOR]>

If this is a new page you should be using a strict doctype anyways.