Large font size and list-style-position: inside: incorrect spacing

**Hal9k** · Feb 8, 2008 13:45

Hey there,

This is a simple problem, code can illustrate the clearest:

Code:

<html>
<head>
<style>
ol
{
	margin 0;
	padding: 0;
	list-style-position: inside;
	font-size: 2.6em;
}

li
{
	
	margin: 0;
	padding: 0;
}

cite
{
	margin: 0;
	padding: 0;
}
</style>
</head>
<body>
<ol>
<li><cite>Foo</cite></li>
</ol>
</body>
</html>

On Firefox it inserts spacing after the numbers, on IE (6--and 7 I believe) the number and the list item runs into each other.

I know I could wrap Foo in a container and give that spacing, but then I would also need to use conditional includes, as there will be too much spacing for Firefox.

Are there any fixes?

Edit:

To that point, is there any way to control the spacing between the number and the list item in Firefox?

Cheers.

**Paul O'B** · Feb 8, 2008 15:12

Hi,

I'm afraid that the space between the bullet and the content is completely controlled by the browser and there's nothing you can do to change it. The amount of space isn't defined in the specs so its up to the UA to decide which accounts for the differences.

You will have to add some padding to the inner element as you suggested which I know is a bit of a pain.

**Hal9k** · Feb 9, 2008 10:34

Originally Posted by Paul O'B

Hi,

I'm afraid that the space between the bullet and the content is completely controlled by the browser and there's nothing you can do to change it. The amount of space isn't defined in the specs so its up to the UA to decide which accounts for the differences.

You will have to add some padding to the inner element as you suggested which I know is a bit of a pain.

Thanks for replying Paul.

It's a shame that I have basically finished a design without using one hack, but now I'll need a conditional stylesheet.

User Tag List

Thread: Large font size and list-style-position: inside: incorrect spacing

Thread Tools

Display

Large font size and list-style-position: inside: incorrect spacing

Bookmarks

Bookmarks

Posting Permissions