<fieldset> background-color problem

HTML & CSS
1 

<fieldset>
  <legend>blah blah</legend>
   blah and blahblah the blah blah ... blah.
</fieldset>



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

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

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

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 :slight_smile:

Paul

5

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

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

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

Hi,
Thanks midnight - now why didn’t I think of that doh! :slight_smile: 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.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd](http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd)">
<html xmlns="[http://www.w3.org/1999/xhtml](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 :slight_smile:

Paul

9

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:

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

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

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

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

Why was this thread re-opened its 4 years old!

John has information on styling legends here.

Thread closed.