SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    Caveat surfer Buddy Bradley's Avatar
    Join Date
    May 2003
    Location
    Cambridge, UK
    Posts
    2,366
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Styling <legend> in Firefox 1.5

    With the release of Firefox 1.5, it seems to have regressed in the way it treats the <legend> element - you can now no longer give it a width or height (even with "display: block;"), which is a bit of a PITA when styling forms.

    I've been playing with using a wide top-border on the fieldset instead, which almost works apart from a tiny gap in IE6:

    http://dev.29digital.com/legend.html

    Can anyone see how to fix this, or suggest another way of addressing the problem?

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

    You can fix the gap in ie but you will need an extra span to add the paading left.

    Code:
     legend {
      background: #ccc url(http://dev.29digital.com/images/tl.gif) no-repeat 0 0;
      line-height: 2.5em;
      font-size: 80%;
      position: relative;
      width:100%;
     margin-right:-1em;
    }
     legend span{padding-left:1em}
    
    Code:
      <legend><span>I Am Legend, Hear Me Roar</span></legend>
    It scales up and down with text size perfectly in ie.

  3. #3
    Caveat surfer Buddy Bradley's Avatar
    Join Date
    May 2003
    Location
    Cambridge, UK
    Posts
    2,366
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Cheers Paul.


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
  •