I was doing your WDG tutorials by way of revision and learning and found something I don't understand.

I created an outer container called <div id="box">
and another inner container called <div id="innerbox">

I pasted two paragraphs of lorem ipsum into "box" with "innerbox" in the middle of them, using this HTML code:



Firstly, is it legal to have an inner div in the middle of a paragraph or should the paragraph be terminated first (</p>) and then restarted (<p>) after the innerbox div?

Anyway, this is what happened ...
The font properties (size and colour) defined for #box p were:
1. displayed by the ist paragraph in "box" (starting with 'Lorem ispsum ...')
2. inherited by the text inside "innerbox" (starting with ' Curabitur posuere ...)
3. but ignored by the text below the innerbox.

So, when I made the color: red; Lorem ipsum, in the outer box, was red; Curabitur posuere in the inner box, was red; but Integer congue, in the outer box, below the innerbox, was still the original black.

If I played around with float commands to get the lower paragraph to wrap around the inner box, it made no difference: the text in the upper part of the outer box was red, the text in the inner box was red; but the second paragraph in the outerbox was black, even though wrapped around the inner box, and contiguous with the first paragraph in the outerbox.

I would be very much obliged if you could tell me what this means (it is not a problem, but good for my education)

Many thanks, James.

BTW - I note in the tutorial that in HTML you have, for example, <div id=box> with id values not surrounded by quotes - am I doing it wrong, or is it optional, or there a preference for one or the otrher?

No. P can't contain other block level elements. It's easy to look up in the reference, much easier than in the spec. Look at the "Contents" and "Contained in" bits.
http://htmlhelp.com/reference/html40/block/p.html



What happens is this. In HTML (but not in XHTML) the closing tag for P is optional. If it isn't used it is "implied". So the browser inserts a </p> before the second, nested, DIV, because the P must be closed there (as P can't contain DIV). Thus the last paragraph isn't in a P. It's directly in #box.

If you validate that snip you can see that the validator treats it the same way and reports an unmatched </p>, because </p> was impled before #innerbox.






Quotes are optional in HTML provided there are no funny characters. Quotes are mandatory in XHTML. IMO quotes are neater, makes for more readable code. I always quote. But that's my personal preference.
http://htmlhelp.com/reference/html40/struc...html#attributes

There's a power toy from MS, a shell extension, called View Partial Source. Part of Microsoft Web Developer Accessories found here.
http://www.microsoft.com/windows/ie/ie6/pr...ss/default.mspx
It shows you the mess IE converts your carefully crafted HTML to and also the result of JavaScript like document.write(). It's quite fun. There's a similar extension for FF, I think it's called View Rendered Source.

As you can see here, even if IE doesn't explicitly insert the closing P where it should be, it has removed the closing tag for the outer P altogether, which I guess in some obscure microsoftish way means that P ends where #innerbox starts.

Click to view attachment

Thanks Pany for a great reply - much appreciated.

James

Do you grok it?