[Standards-JIG] Re: XHTML further simplification

Byron Ellacott 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 mailing list