Firefox 3.6 Issue - New Bug?

HTML & CSS
1

I’m not sure if anyone has come across this before, but I was just about to put a site live today, and Firefox 3.6 got released yesterday, so I tested it in that.

I found that the positioning of my legends within my fieldsets was screwed up. It seems when you absolutely position a legend element within a fieldset (that has position: relative on it), the positioning is worked out from where the padding stops on the fieldset, NOT the actual corner of the element - ie, it adds the padding of the fieldset on to your top and left values.

This doesn’t happen in any other browser I’ve tested it on (IE7 doesn’t keep the legend all the way to the left, but that’s a different issue). I have tried recreating it with div’s as well, but as far as I can tell it’s a problem specific to fieldsets and legends. Firefox 3.5 didn’t allow you to position legend elements in this way, but it let you position a <span> element inside the legend instead.

What is the correct behaviour here? Which browser is doing it right? Is this a new bug? And most importantly, is there anything I can do to fix it and keep it consistent across browsers?


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html lang="en">
  <head>
    <title>Test</title>

    <style>
      fieldset {
        position: relative;
        background-color: #ff0000;
        padding: 10px;
        width: 100px;
        height: 100px;
        border: none;
      }

      fieldset legend {
        position: absolute;
        background-color: #0000ff;
        top: 0;
        left: 0;
        width: 50px;
        height: 50px;
      }
    </style>
  </head>

  <body>
    <form action="whatever.php" method="post">
      <fieldset>
        <legend>Test</legend>
      </fieldset>
    </form>
  </body>
</html>
2

Hi,

This is an old problem and the only fairly consistent way to move the legend around is not to use padding on the fieldset and add a span inside the legend and style that instead.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>Test</title>
<style>
fieldset {
    position: relative;
    background-color: #ff0000;
    padding:0px;
    width: 100px;
    height: 100px;
    border: none;
}
fieldset legend span{
    position: absolute;
    background-color: #0000ff;
    top: 0;
    left: 0;
    width: 50px;
    height: 50px;
    color:#000;
}
</style>
</head>
<body>
<form action="whatever.php" method="post">
    <fieldset>
    <legend><span>Test</span></legend>
    </fieldset>
</form>
</body>
</html>

Just make the spacing on inner elements instead. It’s a bit of a pain but at least it will be consistent.

The problem is that there are a lot of various rules applied internally by the browsers to form elements and some can’t be over-ridden with css.

For example these are some of moz’s rules from forms.css.


legend {
  padding-left: 2px;
  padding-right: 2px;
  border: none;
  position: static ! important;
  float: none ! important;
  width: -moz-fit-content ! important;
  min-width: 0 ! important;
  max-width: none ! important;
  height: auto ! important;
  min-height: 0 ! important;
  max-height: none ! important;
  white-space: nowrap;
}

However there are plenty of other buggy behaviours on these elements also. :slight_smile:

e.g some I remember off the top of my head:

IE places padding top on top of the border in the fieldset.
Fieldsets in moz don’t take min-height and won’t apply pseudo classes like before and :after.
In Opera 9 a fieldset stops parent form being positioned to the right in an absolute context.

3

Have a look at this.

It basically requires an extra element and you style that (because styling the <legend> in FF/IE can be buggy) but that’s the safest way :slight_smile:

Edit:

Shoulda refreshed the old tab

4

Oh yeh, I’ve done that with the span and everything, but it still happened in Firefox that it added the padding, but only in 3.6, not in 3.5 or below. It doesn’t happen in any other browser I’ve tested either. I know styling legends is tricky, and I have in fact done it with the <span> inside, but then this extra problem appeared when I did the upgrade yesterday anyway.

Ho hum, had to sort it using a nasty firefox hack for the time being :confused:

The page is http://www.interunis.co.uk/contact/email-us/ if you are interested. There’s a lot of weird styles on the form/legend that I could probably not have but I had got it consistent across all the browsers!

5

Nice job Stormrider - that’s a unique website.

A month ago or so, I tried for quite a few hours to find some simple/clean way of styling the fieldset/lengend cross browser. As others before me, I eventually gave up and just styled the form and used a heading instead.

6

The code I gave above is consistent cross browser and you just have to avoid putting padding on the fieldset and then there are no problems. It is a pain but workable without hacks.

You are mistaken about the bug though as it is present in all my Firefox versions (3.5.7 & 3.0 & 2.0). They all take reference form the inner padding edge of the fieldset for the absolute element (whether it is a legend or a span).

The page is http://www.interunis.co.uk/contact/email-us/ if you are interested. There’s a lot of weird styles on the form/legend that I could probably not have but I had got it consistent across all the browsers!

The page looks great - good job :slight_smile:

7

I think to be honest, leaving the hack in there, while messy, is more practical at the moment to adding the spacing to all the inner elements at the moment. Perhaps later on when I’ve got a bit more time I’ll revisit it!

It’s strange about the versions though, cause I developed the site using Firefox, and I would have noticed if it did that before, and it’s only since the upgrade to 3.6 that I’ve seen it happen. Strange.

Cheers for the comments though everyone!

8

It’s strange about the versions though, cause I developed the site using Firefox, and I would have noticed if it did that before, and it’s only since the upgrade to 3.6 that I’ve seen it happen. Strange.

The padding/absolute bug is there in all my Firefox versions but I didn’t actually check your whole page so maybe there is a bug in combination with something else that I missed. I just checked the snippet I posted above.:slight_smile:

9

Hi Stormrider

I have exactly the same issue that you do.

My legends were working in all versions of FF (and IE, which as you say was a bit of a different approach) but now after the upgrade to FF3.6, the legends are displaying incorrectly i.e. lower than before. This definitely worked in previous versions of Firefox. It looks like this is the only formatting issue I have seen since the upgrade though.

Keen to see what the cause for this is.

10

I think it’s just that they let you style the legends in 3.6, and combined with the bug being there, caused the change to show.