Tuesday, May 23, 2006

<DL> within <CITE> in Mozilla

Another arcane css issue... Sometimes I like to use a definition list within a cite element to display the name and title of a person I am quoting, like this:

<blockquote>I am not a crook.</blockquote>
<cite>
<dl>
<dt>Richard Nixon</dt>
<dd>President, USA</dt>
</dd></dl>
</cite>

To me, this makes semantic sense. The cite tag is used to show that the information within it is the citation for what's in the blockquote, and the definition "President, USA" defines the term "Richard Nixon". The advantage to all this markup is that now I have style hooks to work with.

The problem is that in Mozilla browsers, if you make "cite" a block element, it will not contain the definition list within it. In fact, it doesn't seem to matter what you put in it. If, for example, you want to give the cite a border, the child element will appear outside the border.

Adding a span tag around the child element fixes the problem:

<blockquote>I am not a crook.</blockquote>
<cite>
<span>
<dl>
<dt>Richard Nixon</dt>
<dd>President, USA</dt>
</dd></dl>
</span>
</cite>

This is cruft, and I hate it. But it's the best fix I've found so far. Anyone else got a solution?

Was this post helpful to you? If so, please consider making a small donation to keep this blog going.

0 Comments:

Post a Comment

<< Home