SitePoint Sponsor

User Tag List

Results 1 to 12 of 12
  1. #1
    SitePoint Wizard
    Join Date
    Mar 2008
    Location
    United Kingdom
    Posts
    1,285
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Legend extend to full width in IE6

    Hi,

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

    HTML Code:
    <!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. #2
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,621
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Where is </fieldset> ?
    Always looking for web design/development work.
    Willing to do it cheap to build portfolio!

  3. #3
    SitePoint Wizard
    Join Date
    Mar 2008
    Location
    United Kingdom
    Posts
    1,285
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Even adding that in there's still padding on either side of the legend.

  4. #4
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,621
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    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

    I might just be off the wall though, souns right though. I haven't slept in two days
    Always looking for web design/development work.
    Willing to do it cheap to build portfolio!

  5. #5
    SitePoint Wizard
    Join Date
    Mar 2008
    Location
    United Kingdom
    Posts
    1,285
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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..........

  6. #6
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    You have an incomplete doctype, throws IE in quirksmode.
    Missing the system identifier (in blue)

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
     "http://www.w3.org/TR/html4/loose.dtd">
    If this is a new page you should be using a strict doctype anyways.

  7. #7
    SitePoint Wizard
    Join Date
    Mar 2008
    Location
    United Kingdom
    Posts
    1,285
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  8. #8
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by invision2 View Post
    I think I'll just stick a graphic in instead.
    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 -
    Code HTML4Strict:
    <!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>

  9. #9
    SitePoint Wizard
    Join Date
    Mar 2008
    Location
    United Kingdom
    Posts
    1,285
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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

  10. #10
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by invision2 View Post
    So these are just specific to the elders of IE?
    * html legend
    *+html legend
    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

  11. #11
    SitePoint Wizard
    Join Date
    Mar 2008
    Location
    United Kingdom
    Posts
    1,285
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Aaah. Had never seen *+html before. Every day's a....

  12. #12
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    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!


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •