SitePoint Sponsor

User Tag List

Results 1 to 13 of 13
  1. #1
    SitePoint Evangelist N9ne's Avatar
    Join Date
    Aug 2002
    Location
    UK
    Posts
    596
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    <fieldset> background-color problem

    Code:
    <fieldset>
      <legend>blah blah</legend>
       blah and blahblah the blah blah ... blah.
    </fieldset>
    Code:
    fieldset {
      background-color: black;
      color: white;
    }
    legend {
      padding: 2px;
      border: 1px solid green;
    }
    The Problem: the background-color set for fieldset colours in more than just what's inside the boundaries of the fieldset, i.e. its borders. What happens is it colours in from the top of the legend to the bottom of the fieldset.

    What can I do to make it only colour what's inside the boundaries (borders) of the fieldset? I tried putting a <span> inside the fieldset, setting it as block and giving it a background colour, but it didn't colour the part where the legend overlaps the fieldset.

  2. #2
    Non-Member Egor's Avatar
    Join Date
    Jan 2004
    Location
    Melbourne, Australia
    Posts
    7,305
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    Have you thought of the fact the fieldset might have its own specific boundaries, which go a bit further then just wrapping whats inside, just like form tags.

    You can try setting the margin and padding to 0 for the fieldset and see how it goes.

  3. #3
    SitePoint Evangelist N9ne's Avatar
    Join Date
    Aug 2002
    Location
    UK
    Posts
    596
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by mstwntd
    Have you thought of the fact the fieldset might have its own specific boundaries, which go a bit further then just wrapping whats inside, just like form tags.

    You can try setting the margin and padding to 0 for the fieldset and see how it goes.
    Yep the fieldset has these irritating boundaries where it goes well above the actual top of the fieldset itself, it includes the legend.

    I did a bit of research on the matter, and it seems that this is a problem with no solution at the moment, so I think i'll just leave it for now, it's not too much of a problem anyway.

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

    If you are just using the fieldset to make borders and not using it for accessibility reasons around forms etc then you could just revert to basic css and use something like this.

    http://www.pmob.co.uk/temp/categorybox.htm

    The above link was to demonstrate a different bug in another post but shows thats its quite easy to produce the effect you wanted.

    If your code is for grouping form elements then ignore the above as the fieldset is more semantically correct

    Paul

  5. #5
    SitePoint Evangelist N9ne's Avatar
    Join Date
    Aug 2002
    Location
    UK
    Posts
    596
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Paul,

    I will be using the fieldset for forms, but also in some places, without forms, but I've found that in the context of my design, having the background be the same as its parent's background seems to make it fit in better; thanks for the link however, as I'm sure it will come in handy for other things .

  6. #6
    SitePoint Zealot midnight9's Avatar
    Join Date
    Jan 2003
    Location
    2nd seat, 3 rows back
    Posts
    118
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    N9ne,

    Here's a hack that seems to work (I was having the same problem of the fieldset bg extending over the top border):

    http://www.cameronmoll.com/misc/comps/odyssey/

    Works well in IE, Safari, and Mozilla, although Mozilla seems to add extra padding at the top that I can't get rid of.

  7. #7
    SitePoint Zealot midnight9's Avatar
    Join Date
    Jan 2003
    Location
    2nd seat, 3 rows back
    Posts
    118
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    BTW, trick was to add position:relative to the fieldset, position:absolute to the legend, and then put a negative top margin on the legend.

  8. #8
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,355
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,
    Thanks midnight - now why didn't I think of that doh! I did exactly the same thing in my demo above but used other elements.

    I just tested it out and it works fine in firefox and ie6 but opera needs another div around the fieldset otherwise it places the legend at the top of the screen.
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>Untitled Document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <style type="text/css">
    fieldset {
    position:relative;
    margin-top:50px;
    height:200px;
    background:#ffffcc;
    padding-top:20px;
    }
    legend {
     position:absolute;
     top:-10px;
     background:blue;
     color:white;
     border:1px solid #000; 
     padding:2px 5px;
    }
    </style>
    </head>
    <body>
    <div style="position:relative"> 
      <fieldset>
      <legend>Here's the legend</legend>
      <p>Hello</p>
      </fieldset>
    </div>
    </body>
    </html>
    Thanks again for the tip

    Paul

  9. #9
    SitePoint Member
    Join Date
    Aug 2004
    Location
    Copenhagen, DK
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    This is nice, but...

    This trick will force you to apply a top padding to the fieldset - otherwise the content will be too close to the top border in IE.

    You can use the underscore hack in order to not let this css affect firefox and opera. My styles defs look like this:

    Code:
    fieldset {
        _position : relative;  /* The underscore means only IE will see it */
        _padding-top : 20px;   /* Stupid IE */
        _padding-bottom : 15px;
        _display : block;
        border : 1px solid black;
        width : 40em;
        background-color : #DDF1F6;
        margin-bottom : 15px;
    }
    
    legend {
        _position : absolute;
        _top : -10px;
        font-weight : bold;
        font-size : 120%;
        padding : 0px 10px 0px 10px;
        border-color: black;
        border-style : solid;
        border-width : 1px;
        background-color : #C3E0E8;
    }

  10. #10
    SitePoint Guru mwolfe's Avatar
    Join Date
    Mar 2005
    Posts
    912
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    in reply to acebone:

    I think you forgot to mention to place a

    _left: 10px

    in the css for the legend tag.. without that IE was placing the legend on the top right side of the legend in my browser. Great hack though, saved me a lot of time, thanks

  11. #11
    SitePoint Member
    Join Date
    Nov 2008
    Posts
    1
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by N9ne View Post
    Code:
    <fieldset>
      <legend>blah blah</legend>
       blah and blahblah the blah blah ... blah.
    </fieldset>
    Code:
    fieldset {
      background-color: black;
      color: white;
    }
    legend {
      padding: 2px;
      border: 1px solid green;
    }
    The Problem: the background-color set for fieldset colours in more than just what's inside the boundaries of the fieldset, i.e. its borders. What happens is it colours in from the top of the legend to the bottom of the fieldset.

    What can I do to make it only colour what's inside the boundaries (borders) of the fieldset? I tried putting a <span> inside the fieldset, setting it as block and giving it a background colour, but it didn't colour the part where the legend overlaps the fieldset.
    fieldset is a block element. so adjust its boundaris.give margin of legend a negative value & made padding-top of fieldset none!
    fieldset{
    padding-top:0px;
    background-color: black;
    color: white;
    }
    legend {
    padding: 2px;
    border: 1px solid green;
    }
    *+html legend
    {
    margin:-8px 0 0 0;
    }
    It will work

  12. #12
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,278
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    FF is so evil here : (

    I've used the span-inside-the-legend trick... while I've been able to positioned the legend completely offscreen using pos: absolute and both a left: -9999em for regular browsers (incl IE) and margin-left: -9999em for Gecko, when positioning on the page somewhere, I've needed the span to not hack so much for IE then. I can set the fieldset to pos: rel and the span inside the legend to pos: abso, and this has worked out (maybe because IE has trouble positioning someone who's nearest positioned ancestor isn't a direct parent but a grandparent or whatever). I don't like the extra markup though, but it works.

  13. #13
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,355
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Why was this thread re-opened its 4 years old!

    John has information on styling legends here.

    Thread closed.


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
  •