PDA

View Full Version : display:inline for <details> being ignored in HTML5



TerryS
Jan 11th, 2011, 09:15 PM
Hello! I am not new to HTML and CSS, but brand-new to HTML5 (just decided to try it yesterday). I am testing on Firefox 4.0b8 and SeaMonkey 2.1b1 (on Linux).

Of course, to the eventual end of using HTML in production, I am trying the newer tags to see what works, and use CSS to style unsupported tags as to degrade gracefully. However, I am having problems with one particular element.

One of the most unique new elements is <details> (and nested <summary>). The text in <details> (except for the summary) is supposed to be hidden unless you set the "open" attribute; if a summary is there, you click the summary and the rest of the details expand. I have a details element nested within a paragraph.

SeaMonkey doesn't seem to support <details> at all. I styled this tag with "font-style:italic;" in the CSS to degrade it gracefully, so that's fine.

Firefox, however, recognizes <details> but does not render it properly. It shows the contents of <details>, and inserts a blank line before its contents! The details tag is in the middle of the paragraph, so the pargraph is getting split in half. I tried setting "display:inline;" on "details" in my CSS, but it is ingored. (For that matter, "display:hidden" is also ignored; "display:none;" works, so I know there's no syntax error preventing the CSS from being applied.)

I have the proper doctype for HTML5, <!DOCTYPE html>.
Has anyone seen this problem? I have Googled it and searched some mailing lists and forums, to no avail.

The HTML source:


<!DOCTYPE html>
<html lang="en" contenteditable="false">
<head>
<meta http-equiv="content-Type" content="text/html; charset=utf-8" /> <!-- NEED 'charset' HERE FOR LEGACY (pre-html5) SUPPORT -->
<meta charset="utf-8" /> <!-- NEED 'charset' HERE FOR HTML5 CONFORMANCE -->
<title>e-Nihongo :: my personal Japanese language website (イ-日本語 :: 日本語の私のパーソナルのウェブサイト)</title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<meta http-equiv="Window-target" content="_top" />
<meta name="author" content="my name here" />

<link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />
<link rel="stylesheet" type="text/css" media="all" href="e-Nihongo.css" />
</head>



<body>

<!-- REPLACE 'div#menu' WITH 'nav' FOR HTML5 -->
<div id="sidebar"><nav><ul>
<li><a href="index.html" title="Welcome! (ようこそ!)">Welcome!</a></li>
<li><a href="#" title="Haiku (俳句)">haiku</a></li>
<li><a href="#" title="Songs (歌)">songs</a></li>
<li><a href="#" title="Adventures with Food (食べ物の冒険)">adventures with food</a></li>
<li><a href="#" title="Japanese Names (日本の名前)">Japanese names</a></li>
<li><a href="#" title="Japanese Slang (日本の俗語)">Japanese slang</a></li>
<li><a href="#" title="Confusing Translations (戸惑い翻訳)">confusing translations</a></li>
<li><a href="#" title="Japanese on the Computer (コンピューターに日本語)">Japanese on the computer</a></li>
<li><a href="#" title="United States Photos (アメリカがっしょう国の写真)">United States photos</a></li>
<li><a href="#" title="Photos of Japan (日本の写真)">photos of Japan</a></li>
<li><a href="#" title="Japanese Language Books (日本語の本)">Japanese language books</a></li>
<li><a href="#" title="Japanese Language Tools (日本語の道具)">Japanese language tools</a></li>
<li><a href="#" title="Books about Japan (日本について本)">books about Japan</a></li>
<li><a href="#" title="Miscellaneous (様々)">miscellaneous</a></li>
<li><a href="dictionary.html" title="Website Dictionary (ウェブサイトの辞書)">website dictionary</a></li>
<li><a href="#" title="About the Author (作者について)">about the author</a></li>
</ul></nav></div>


<article><h1>e-Nihongo</h1>

<p>Hello! This website is devoted to my study of <dfn><ruby lang="ja">日本語 <rp>(</rp><rt>にほんご</rt><rp>)</rp></ruby></dfn><a href="dictionary.html#nihongo" title='look up "nihongo"'><img src="graphics/dicLink.png" height="18" width="18" alt="?" /></a>. Here, I post some of my translations, analyze Japanese-language topics, and rant about issues of translation that confound me. You might find some of these things amusing!</p>

<p>Also, there are other things to enjoy. Sometimes I write <dfn><ruby lang="ja">俳句 <rp>(</rp><rt>はいく</rt><rp>)</rp></ruby></dfn> <details>(<summary>[n.] Haiku</summary>, a specific form of Japanese poetry consisting of three lines per stanza, with the first and third lines having five syllables, and the second, seven)</details>. I will translate some funny counting songs into Japanese. Do you want to configure your computer for typing Japanese? I can show you! Of course, I discuss Japanese-language books and tools.</p>

<p>This website is a work in progress, as I (slowly) add new material. So if a section has no content in it yet, that's why. Please enjoy!</p>


<!-- BEGIN TRANSLATION TABLE -->
<table><tr><td lang="ja" class="translation"><p>今にちは! このレーブサイートは日本語の私の勉強に捧げられる。 ここに,幾つかの私の翻訳を掲示して,日本語のテームを分析して,私をまごつかせるの翻訳の問題点について喚きたてる。</p>

<p>幾つかの事はおかしいや楽しいのように見たいちがいない!</p>

<p>又,楽しむの為に他の事います。 時々に,私は俳句を書きます。 日本語で楽しい計算の歌を翻訳します。 日本語をタイプをうつの為にコンピューターを構成をしたいか? 示すことが出来ますよう! もちろん,日本 語の本と道具を話し合います。 楽しんでください!</p></td></tr></table>
<!-- END TRANSLATION TABLE --></article>

<br clear="all" /><footer>
<section class="metainfo">&copy 2011 my name here<br />
Last update: <time pubdate="2011-01-10">January 10, 2011</section></footer>

</body>
</html>

My CSS file:


/* MAIN LAYOUT AND DEFAULT FONT STYLES */
body { margin:30px 0 0 0; color:#333333; background:#ffffff url('graphics/butterflyMenu2.jpg') no-repeat; font-family:'Trebuchet MS',Tahoma,Optimum,'DejaVu Sans',sans-serif; font-size:14px; line-height:18px; }
div#sidebar { float:left; width:395px; height:570px; margin:0px 4% 50px 20px; padding:0px; text-align:center; }
/* REPLACE 'div#menu' WITH 'nav' FOR HTML5 */
nav { display:block; width:185px; margin:0px 0px 35px 90px; padding:0px; vertical-align:middle; font-size:15px; line-height:18px; }
nav ul { list-style-type:none; margin:0 0 0 4px; padding:0px; }
nav ul li { margin:0 0 12px 0; }
article { margin:0 5%; }
table { margin:10px 0; padding:0; }
td.translation { padding:0 10px; background:#efffcf; border:3px dotted #ccddaa; }
footer { margin-top:20px; padding:12px; border-top:3px dotted #ccddaa; border-bottom:3px dotted #ccddaa; background:#fafc99; text-align:center; }
section.metainfo { font-style:italic; }

/* MAIN FONT STYLES */
h1 { margin-top:0; margin-bottom:30px; color:#99aa77; text-align:center; font-size:25px; }
h2 { margin:25px 0px 12px 0px; color:#889966; font-size:21px; }
section.dicNav { font-size:16px; }
p { text-indent:30px; margin:20px 0px; }
a { text-decoration:none; }
a:link, a:visited { color:#996633; }
article.dictionary a:link, article.dictionary a:visited { text-decoration:underline; }
a:hover { color:#99aa77; text-decoration:underline; }
nav ul li a { padding:5px 5px 5px 30px; width:100%; }
nav ul li a:hover { background:url('graphics/ladybug-sm.gif') no-repeat; }

/* GENERAL VOCAB STYLES */
details { display:inline; padding:0; margin:0; font-style:italic; }
summary { display:inline; border-bottom:1px dashed #607516; }

/* INLINE VOCABULARY STYLES */
span.kanji, ruby { font-weight:bold; font-style:normal; color:#607516; }
span.furigana { color:#607516; }
rt, rp { font-weight:normal; color:#000000; }

/* VOCABULARY LIST STYLES */
dl { font-size:16px; }
article.dictionary dl { margin-left:405px; font-size:14px; }
article.dictionary h2 { padding:3px; background-color:#efffcf; border:3px dotted #ccddaa; text-align:center; font-size:16px; }
/* ABOUT DT: I MUST DISPLAY 'dt' AS INLINE TO CREATE LINE-HEIGHT THAT
WILL NOT AFFECT EVERY LINE OF THE DEFINITION, JUST THE TERM! THEREFORE,
I NEED 'br' TAG AFTER EACH 'dd' EXCEPT THE LAST OR LIST WILL BE 1 PARAGRAPH! */
dt { margin-top:10px; color:#809239; font-size:16px; }
dt span.jap { font-weight:bold; }
dt span.furigana { font-size:12px; color:#000000; }
dd aside { display:inline; font-style:italic;}

Excavator
Jan 11th, 2011, 09:39 PM
Hello TerryS,
I don't get a blank line before the contents of <details> in FF4. IE8 mangles it pretty badly though.

Look at this stripped down example -
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<!--[if lt IE 9]><script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
<style type="text/css">
html, body {
margin: 0;
font: 100% "Trebuchet MS", Arial, Helvetica, sans-serif;
color: #000;
background: #fc6;
}
/* HTML5 tags */
header, section, footer,
aside, nav, article, figure {display: block;}
article {
width: 800px;
margin: 0 auto;
padding: 50px 0 300px;
background: #999;
}
details {background: #fff;}
summary {color: #f00;}
</style>
</head>
<body>
<article>
<details>(
<summary>[n.] Haiku</summary>
, a specific form of Japanese poetry consisting of three lines per stanza, with
the first and third lines having five syllables, and the second, seven)
</details>
</article>
</body>
</html>

TerryS
Jan 12th, 2011, 03:03 AM
Ah, yes, we should always try a stripped-down example!

Except you didn't nest the "details" in a "p" so we could see the effect. So I added one, and I get the same problem I had before. (Sorry about that! I was doing other tasks in my normal browser (Firefox 3.6) and came back to see if the topic had a reply. I forgot I was using Firefox 3.6. Testing in FF 4 Beta, the problem is still there. So, Firefox is recognizing the "details" tag, and won't display it right in a paragraph...but it will inside other block-level elements. (This is true even if I have "details { display:inline; }" in the CSS.)


/* HTML5 tags */
header, section, footer,
aside, nav, article, figure {display: block;}

This did not help, but in general, I can understand the need to make sure a browser at least knows if an element should be block-level or inline. But if "article" block-level, and "p" is also block-level, why does "details" only cause a line-break in "p"?

Thanks for trying!

Excavator
Jan 12th, 2011, 03:22 AM
So I added it and that solved the problem...but I have no clue why!

HTML5 is too new to have very wide support. FF needs that bit of CSS to know how to handle the new elements and IE needs the bit of js I included in the head of the document on that same example.