SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    Afraid I can't do that Dave Hal9k's Avatar
    Join Date
    Mar 2004
    Location
    East Anglia, England.
    Posts
    640
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

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

    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.
    Last edited by Hal9k; Feb 8, 2008 at 14:20.

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,535
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    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.

  3. #3
    Afraid I can't do that Dave Hal9k's Avatar
    Join Date
    Mar 2004
    Location
    East Anglia, England.
    Posts
    640
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    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.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •