CSS overflow hidden issue on FireFox

Question

Advise: it happens with fieldset, not with div. See the links with tests below.

In Firefox, this works, the content is cut off at 50px:

#someDiv {
    display:block;
    height:50px;
    overflow:hidden;
}

but this doesn't works, all content is shown:

.openAndClose {
    display:block;
    height:50px;
    overflow:hidden;
}

In Safari and Chrome, both CSS declarations works. Using the pseudo class is useful for divs that will open and (almost) close later by JavaScript. Otherwise I'll have to set every ID and if I decided to change 50px to 60px, all will have to be corrected.

Is there a way to make FireFox accept the pseudo-class CSS overflow declaration?

As your wish, two live tests:

With ID

With class

By the way, there was a stupid error, but now nor Id or class works...

I think you will have to link/show an example as there must be more to the story than this. Can you set up a codepen or something? — whoughton, Mar 11 '14 at 19:37
cannot reproduce -> http://jsfiddle.net/4UUbc/. But then a `.class` is not applied properly for an element (seen it before at least with tables) then I set the type also - `div.openAndClose` — davidkonrad, Mar 11 '14 at 19:44
I think it works pretty well. Tested it in all browsers. You obviously have some stupid mistake and you fail to see it. If you would like we to point it please post the original code. Thanks! — Itay Grudev, Mar 11 '14 at 21:38
@ItayGrudev: I'm thinking about the fact of is not a div tag, but a fieldset, maybe I'm looking the wrong side of the problem, maybe FireFox got a problem with difference between tags that hasn't for other browsers. — Gustavo, Mar 11 '14 at 23:04
@GustavoPinent, maybe this could help...http://stackoverflow.com/questions/1673346/fieldset-firefox-overflow-css-fix — sinisake, Mar 11 '14 at 23:06
@nevermind, it stops been dimensioned by height declaration, just grow down to show all. Maybe I'll have to manufacture a fieldset width a div to make it cross browser... — Gustavo, Mar 11 '14 at 23:17
The online examples are not the same as your snippets here. Instead of `display:block`, one has `display:table` while the other has `display:table-column`. — Mr Lister, Mar 12 '14 at 06:42
I was trying to fix it with nevermind tip. It's now with block again. — Gustavo, Mar 12 '14 at 13:09

score 1 · Accepted Answer · answered Mar 13 '14 at 05:26

1

It looks like you're running into https://bugzilla.mozilla.org/show_bug.cgi?id=261037, which is fixed in the upcoming Firefox 28. That's shipping about 5 days from now, so unless you really need this working in old Firefox versions I wouldn't bother with workarounds; just assume it will work.

If you do need to work around, you can try using a nested div inside the fieldset, with height set to 100% and the overflow style on the div.

answered Mar 13 '14 at 05:26

Boris Zbarsky

34,758
5
52
55

Ok, this is really an answer. Also, I think is good to have at hand the solution for old FF versions, who knows... My solution got the same method than yours, but height is set to auto (full) or 0px to hide all, or 50px to show just a portion, 100% will make it relative. Interesting that this "bug" is from 2004 and has a long story so far, the last update is today... what a coincidence! – Gustavo Mar 13 '14 at 19:10

score 0 · Answer 2 · answered Mar 12 '14 at 14:53

FireFox has a different understanding of fieldset kind of element. However, as described here:

Content categories by MDN

it should be render as a div. Instead, is render as a transparent rectangle, maybe because is considered in the form context, but is unclear in the documentation.

Looking at this example os usage from Mozilla:

Example of fieldset usage by Mozilla

I did a cross browser version: This will work in FireFox

The content is enlarging the frameset...

I don't know if FireFox is right, but the usage of fieldset should be more clear since there is a difference from other common content categories as div. I could not find a proper Mozilla forum to discuss this, I do think they should know about. If you know how can I better contact the developer team, please let me know.

CSS overflow hidden issue on FireFox

2 Answers2