SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Evangelist ucahg's Avatar
    Join Date
    Apr 2001
    Location
    Sarnia, Ontario, Canada
    Posts
    434
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Make IE6 Legend Padding go away

    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
    Last edited by ucahg; Sep 18, 2003 at 17:51.
    Love it? Hate it? Helpful? Useless?
    Use the rate button to let me know what you think of my post!

  2. #2
    SitePoint Evangelist ucahg's Avatar
    Join Date
    Apr 2001
    Location
    Sarnia, Ontario, Canada
    Posts
    434
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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).
    Love it? Hate it? Helpful? Useless?
    Use the rate button to let me know what you think of my post!

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,481
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Hi,

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

    Paul

  4. #4
    SitePoint Evangelist ucahg's Avatar
    Join Date
    Apr 2001
    Location
    Sarnia, Ontario, Canada
    Posts
    434
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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
    Love it? Hate it? Helpful? Useless?
    Use the rate button to let me know what you think of my post!

  5. #5
    SitePoint Evangelist ucahg's Avatar
    Join Date
    Apr 2001
    Location
    Sarnia, Ontario, Canada
    Posts
    434
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.
    Last edited by ucahg; Sep 19, 2003 at 13:35.
    Love it? Hate it? Helpful? Useless?
    Use the rate button to let me know what you think of my post!


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
  •