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?
From an interesting blog:
This link is a little less cool ... but a lot more understandable ;):
|All times are GMT -5. The time now is 05:05 PM.|