-   Programming (
-   -   HTML5 "<details>" tag display:inline, display:hidden CSS ignored (Firefox, Seamonkey) (

ShellyCat 01-11-2011 04:51 AM

HTML5 "<details>" tag display:inline, display:hidden CSS ignored (Firefox, Seamonkey)
Hello. Can't find anything relevant on Google search, so decided to look in the "other best place"...LQ!

I'm testing HTML5 for the first time, using Firefox (beta) 4.0b8 and SeaMonkey (beta) 2.1b1, and its ignoring some CSS. Specifically, I have problems with the <details> tag. (It is nested in a paragraph...I am using it to provide an in-paragraph definition in hopes it can be toggled.)

Firefox only partly supports <details>. It's not supposed to show anything except the content of <summary>, unless you click on <summary>'s content. Instead, it puts a line break before the content of <details>, splitting the paragraph in two peices (which looks silly), without the "closed/open" functionality.

So I tried using "display:inline" in my CSS, but that gets ignored. Just for fun, I also tried "display:hidden" (also ignored) and "display:none" (obeyed).

SeaMonkey doesn't doesn't do anything special with the content of <display>...but it also ignores the same CSS as Firefox.

The only thing I can do to support semantic design is apply "font-style:italic" to all <details> elements.

Granted, you might ask, "why bother using <details> at all. then?" Well, I would like to have <details> for the browsers that support it, with the "font-style:italic" to degrade the page nicely for those that don't (such as for SeaMonkey).

Does anyone know why "display:inline" and "display:hidden" get ignored?

paulsm4 01-11-2011 10:23 PM

Hi -

From an interesting blog:

The HTML5 <details> element is currently not natively supported in any browser.
Mathias goes on to suggest an interesting workaround:

CSS, JavaScript, and jQuery to the rescue

Luckily itís pretty easy to make <details> work cross-browser using a combination of CSS, (plain) JavaScript, and jQuery.
Here's a really interesting depiction of HTML 5 support, by browser:

This link is a little less cool ... but a lot more understandable ;):

All times are GMT -5. The time now is 11:21 PM.