CODEWITHSUNDEEP
htmlcss
A Mohammed Hussain
A Mohammed Hussain

Reputation: 245

how to remove space below fieldset legend

I am using a table inside fieldset and there is a gap below legend, I wand to remove it. I tried using padding:0px and margin:0px on both fieldset and legend inline style. But none worked. Please help me with some suggestions.

Thanks!

Edit:

The code is very huge since I am using select menu. But here is the overview of the code.

<fieldset>
          <legend><b>Options</b></legend>
          <table>
            <tr>
              <td colspan="1"><label>Passengers:&nbsp; </label></td></tr></table>    
</fieldset>

margin and padding is working for fieldset but it is doing nothing for legend. Is there any way to remove the gap produced by legend?

Upvotes: 2

Views: 10972

Answers (5)

Tony Mountifield
Tony Mountifield

Reputation: 109

I was just fighting with this too, to get the same behaviour between browsers when using absolute positioning inside a fieldset.

What I found would happen when adding a legend to a fieldset was that Chrome and IE would move the top border of the fieldset down to the middle of the text, but the contained elements were still positioned relative to the original top of the fieldset. But Firefox would also move the top of the contained elements to below the legend. FF would also allow space above and below the legend text itself.

I finally was able to overcome it by adding this CSS:

legend {
   line-height: 0;
}

The legend was then added without moving the top border and the positioning was the same in Chrome, IE and FF.

Upvotes: 0

Cyberwip
Cyberwip

Reputation: 29

Browser formatting of fieldset and legend varies widely between browsers but in any case is a mess.

If you have any whitespace between your opening fieldset tag and the first tag firefox will add BREAKS. Same goes for legends.

The easiest way to get around itis to remove all whitespace between your tags.

Upvotes: 0

Silent_killer
Silent_killer

Reputation: 41

To remove the space below label use margin-top: -ve px;

Just like:

<fieldset> <legend><b>Options</b></legend> <table style="margin-top:-13px;"> <tr> <td colspan="1"><label>Passengers:&nbsp; </label></td></tr></table>
</fieldset>

Upvotes: 1

Jukka K. Korpela
Jukka K. Korpela

Reputation: 201768

Default rendering may include padding intended to make the document appearance legible. The defaults vary by browser, but they may include vertical padding on fieldset and legend, and they almost certainly include vertical padding on td elements. To remove such padding, you can set:

legend { 
  padding-top: 0;
  padding-bottom: 0;
}
fieldset, td { 
  padding-top: 0;
}

But there’s also spacing between table cells by default, and this means that there is some spacing around a cell even in a single-cell table. The cross-browser way to remove that is:

table {
  border-collapse: collapse;
}

Adding this removes the spacing between the legend and the cell content (you can see this by setting background colors on the legend and label elements) on IE and Chrome. On Firefox, a one-pixel gap seems to remain, with no obvious explanation.

Upvotes: 1

Giona
Giona

Reputation: 21114

According to Eric Meyer's reset, margin:0; and padding:0; on both fieldset and legend should do the job.

Testing your code in a fiddle it actually worked, so a couple of other things that may cause this issue are:

  1. Padding / margin set on the table / td
  2. Line-height of label / td

Upvotes: 2

Related Questions