[Standards-JIG] Re: XHTML further simplification
bje at apnic.net
Thu Sep 23 05:49:32 UTC 2004
Peter Saint-Andre wrote:
> In article <94CC4648-0CCE-11D9-813A-000A958F753E at ceruleanstudios.com>,
> Rachel Blackman <rcb at ceruleanstudios.com> wrote:
>>Correct. I don't think we need <div/>
> http://www.jabber.org/~stpeter/div.html shows some interesting results
> in 2 of the 3 browsers I have on my current machine, which might lead
> one to believe that <div/> may be advisable. But I'm not an XHTML + CSS
> guru, so perhaps I'm missing something.
If you're using Firefox or another Mozilla based browser, which I'm 95%
sure you are based on your interpretation of the output, you should grab
the Web Developer Toolbar extension from:
You can then outline block level elements on the page, to see what's
going on. As it happens, "padding-left" is not the property you
probably intended to use, "margin-left" is. The content is being padded
out, but the content of an <ol/> is the <li/> element, not the counter
marks, and the counter marks are thus to the left of your elements.
Specifically in Firefox 0.8, the <ol/> element has a
"-moz-padding-start: 40px" property. This apparently provides a minimum
padding for <li> elements, which is what you can see in the first case
as what separates the "Item..." from the left edge. Squeezed into that
gap is the list count. If you've got the webdev extensions, Outline
custom elements, enter "li" in one of the boxes, see where the <li/>
content actually starts: the list "bullets" are outside the <li/> elements.
If instead you fired up Opera and took a look, you'd see that your
example page does look right. This is because Opera's default style
sheet, which I can't find to confirm this with, uses "margin-left: 40px"
instead of the Gecko specific property. The default CSS2.1 style sheet
recommends this property.
If you change your example to use margin-left, Gecko browsers will look
correct, but the Opera browser will not. I've no idea what WebKit or IE
browsers will do, because I don't have either a Mac or a Windows machine
handy right now.
The "correct" way to indent a block, in the XHTML+CSS world, is the way
you did the first one: create a surrounding container, and apply a
margin or padding to that container. And if that block is a quote,
you'd probably use the <blockquote/> element to do it. :)
In the XHTML-IM world, I can't tell you what's the "correct" way to do
it, because there's no base line for what to do with rendering lists.
If you're writing code to display XHTML-IM messages, you're probably not
going to have a "default style sheet" at all, and you'll just use
"padding-left" to throw a margin in. If you're using an XHTML renderer,
it's "Implementation Specific" and you'll run into problems if you don't
do it the XHTML+CSS way.
So, <div/> or <blockquote/> is necessary if you want to have a reliable
way to specify that a block should be delineated as quoted in some fashion.
More information about the Standards