Log in / Register

Forum › How do I...?

ol, ul item indenting - getting it to work consistently

mischor
It appears that Prince, IE, Firefox, and Opera treat margin-left for ol differently.

Here's the test case: an ordered list with 1 element, placed under a line formatted as <p>A paragraph</p>.

In the description below, col 1 = kind of browser, or prince,
col 2 is where the "1" of the ol is positioned, relative to the line above, in approx char spaces.
no CSS:     IE:      3
no CSS:     FireFx:  3.5
no CSS:     Prince   5
no CSS:     Opera:   3.5 

margin-left: 1em

CSS:          IE:      -2   (it's outdented)
CSS:          FireFx:   5   (it added the 1em to the previous)
CSS:          Opera:    5
CSS:          Prince:  -2


From this I conclude that if a margin-left is specified, for FireFox and Opera, the length is added to the margin used by default when nothing is specified. But for IE and Prince, if a margin-left is specified, it is added to an initial negative offset which is the amount the marker is positioned in front of the list item itself.

I note that CSS has a list-style-position that affects this, but it also affects how line wraps occur.

What I want is a list-style-position: outside, so line wraps do not come underneath the number, but with a consistent meaning between IE, FireFox, Opera, and Prince.

The closest I can get to this that I've discovered so far, is to not have any setting for margin-left. Then all the browsers indent about the same amount, but Prince indents almost 2x what the browsers do. Is there any way to get Prince to indent less, the same as the browsers?

Alternatively, is there a way to say in CSS use this value if the thing using CSS is IE or Prince, otherwise, use a different value?

-Marshall Schor
mischor
To save work, here's a simple test case:

<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>title</title>
<style type="text/css">
body {margin-left: 10em;}
/* ol  {margin-left: 1em;} */
/* li {list-style-position: inside; } */
</style>
</head>
<body>
<p>A paragraph goes here</p>
<ol><li>An order list item </li></ol>
</body>
</html>


You can try this in browsers, or ask Prince to format it, and see what the difference is for various combinations. The body {margin-left: 10em;} is just there to let you see the outdenting.

-Marshall Schor
mikeday
There is also padding-left to consider. I'll take a look! :)
mikeday
Browsers (and Prince) have a built-in default style sheet for XHTML. You can see the style sheet used by Prince by looking at xhtml.css in the style directory of the Prince installation. It contains rules giving the default style for headings, lists, tables and all the other XHTML elements supported by Prince.

Opera and Firefox apply padding-left to the <ol> and <ul> elements in their default style sheets for XHTML. However, Prince and Internet Explorer apply margin-left instead. This has the same visual effect -- at least when no background color is specified -- but means that if the user overrides margin-left then they will get different behaviour in different browsers. Sadly there is no standardised style sheet specified for XHTML, and the differences between the browsers makes it impossible for Prince to emulate all of them.

The solution is to specify both margin-left and padding-left properties, which should allow you to produce layouts that will appear the same in Prince and every browser. If you take your example and add the following declarations then you should get the same behaviour in Firefox, Opera, Internet Explorer and Prince:
ol {
    margin-left: 0;
    padding-left: 0
}

The body of the list item will line up with the paragraph above it, while the marker will be to the left of the list item, thus appearing outdented. Adjusting either of these properties is fine, as long as you specify both to ensure interoperable behaviour.
mischor
Thanks Mike - it's wonderful to have these seemingly insurmountable issues solved with such simple things!

-Marshall Schor