|Firefox rendering div inside p|
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Firefox 22.214.171.124 renders the code like this (verified in firebug):
IE6 renders it correctly. I need my divs to be inside my paragraphs for all browsers. This makes no sense to me since they're both just block level elements. What is happening here?
Only inline elements are allowed inside p tags.
div isn't just a block level element, it's a *grouping* element. Paragraphs aren't.
Use <span> inside other block-level elements.
Or change your <p> to a <div>.
|IE6 renders it correctly. |
Actually, no it doesn't (if IE is rendering the div's inside the <p>). On the contrary, (and as usual) Firefox displays it correctly and IE does not.
What are the advantages to having p behave this way in the html specs? I always figured p was a regular block level element like a div with default top and bottom margins. Are there any other block level elements that only allow inline elements as children? It's just weird cause I've been writing html for 8 years and have never run into this spec.
|What are the advantages to having p behave this way in the html specs? I always figured p was a regular block level element like a div with default top and bottom margins. |
Your figuring is slightly out, though it's understandable as sometimes the terminology or slang we speak can get misunderstood or have different meanings ;)
Div & P, are only both "block level" elements in the formatting sense, not the content model: read more on HTML's definition of it's models [w3.org]
The formatting definition of a block level element is that it creates a new line before and after itself, it is not a complete description of it's role, or what it can contain, that is the role of the content model. For the content model definition of any element you need to look at the definition of the element itself: 9.3.1 Paragraphs: the P element [w3.org] where you see:
<!ELEMENT P - O (%inline;)* -- paragraph -->
in english this means element <p> can only contain inline elements and is a paragraph. It's the 'paragraph' bit that defines the semantics of that particular element.
Underneath the definition you will see which elements have optional end (closing) tags.
for <p> it is; Start tag: required, End tag: optional
If you go back to the first link, in section 7.5.4 you see that <div> and <span> are classed as "Grouping" Elements, that is imho a good description and covers both formatting and content models:
|The DIV and SPAN elements, in conjunction with the id and class attributes, offer a generic mechanism for adding structure to documents. These elements define content to be inline (SPAN) or block-level (DIV) but impose no other presentational idioms on the content. Thus, authors may use these elements in conjunction with style sheets, the lang attribute, etc., to tailor HTML to their own needs and tastes. |
It's not that it's an advantage for a <p> to be written like this, it's semantics - in the language of HTML a <p> is a paragraph.
For those elements whose END tag is optional, the technical nature of parsing semantic elements needs to be made clear, the parser needs rules so it understands the language and where to close the element; In the case of <p>'s the parser closes the element as soon as it meets a new block level element as you would if you were writing a paragraph. Which is what firebug showed you FF was doing. With other element it's not quite as sweeping as that as e.g. <li> elements have optional closing and can contain other block level elements but will be closed on meeting a sibling <li>, and <head> gets closed on meeting <body> etc.. anyway this is why people are saying that FF is right. It is, because of the content model rules.
The natural way, non-machine way if you like, to think of these block level, in the formatting context, elements and why they cannot contain other blocks is simple too, Have you ever spoken or written a <p>aragraph with another paragraph inside it, let alone a "grouping" division inside it?
HTML makes a lot of sense, to me anyway, if thought of like the written word. Imagine going off on a rant and writing a long letter of complaint.. I imagine an area (division) of the document would contain many paragraphs (p's) which would have some very colorful words (inline elements). in them :)
|Are there any other block level elements that only allow inline elements as children? |
Yes, The "heading" elements [w3.org], <h1>, <h2>, etc.. some more but likely not all : <address>, <dt>, <pre>
[edited by: SuzyUK at 2:18 pm (utc) on Jan. 31, 2008]
Wow, great post. Thanks.