SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    Web Enthusiast
    Join Date
    Jul 2000
    Location
    Western Massachusetts, USA
    Posts
    1,366
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Firefox & IE7 on <ul>

    My definition for ul is included here:
    Code:
    h1, h2, h3, h4, p, ul, blockquote { 
    margin : 0 20px .75em; }
    Firefox 2 honors the .75em right indent on the list, IE6&7 don't. Same with
    Code:
    h1, h2, h3, h4, p, ul, blockquote { 
    margin : 0 20px 20px 20px; }
    What gives?
    Paul C.
    ClickBasics
    http://www.clickbasics.com

  2. #2
    SitePoint Zealot
    Join Date
    Aug 2006
    Location
    Windsor, Berkshire
    Posts
    165
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    have u tried just putting the ul on its own? with its own set of properties?

  3. #3
    SitePoint Wizard bronze trophy DaveWoods's Avatar
    Join Date
    Dec 2004
    Location
    Derbyshire - UK
    Posts
    2,651
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Paul, I think you're probably misunderstanding how the margins on lists work (it's not an easy thing to understand unfortunately).

    But this bit of code should show you more clearly what's happening.

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en">
    <head><title>Demo</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <style type="text/css">
    body {
    	margin: 0; padding: 0;	
    }
    ul, li { 
    	border: 1px solid green;	
    }
    h1, h2, h3, h4, p, ul, blockquote { 
    	margin : 0 20px .75em;
    	padding: 0;
    }
    </style>
    </head>
    <body>
    <ul>
    <li><a href="#">Home</a></li>
    </ul>	
    </body>
    </html>
    The margin only applies to the content of the list item as by default the bullet appear on the outside. As you should be able to see from the code above, the green border is infact 20px from the left and right of the brower window and changing this value to 50px for example will do exactly that.

    If the lines won't be wrapping then you could easily fix this by using

    Code:
    list-style-position: inside;
    However, this won't usually be the effect you're after when the list breaks onto two lines so I'd usually opt for the following solution.

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en">
    <head><title>Demo</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <style type="text/css">
    body {
    	margin: 0; padding: 0;	
    }
    ul, li { 
    	padding: 0; margin: 0; border: 1px solid green;	
    }
    #nav {
    	margin: 0 20px;
    	padding-left: 1.4em;	
    }
    </style>
    </head>
    <body>
    <ul id="nav">
    <li><a href="#">Home</a></li>
    </ul>	
    </body>
    </html>
    This method zero's out all padding and margins on lists to give me a consistent starting point and then pulls the bullet inside the container by using left padding.

    I'd usually use a reset method for all elements as a starting point anyway and build from there so you may want to do that but I've simplified it for the purpose of this demonstration... obviously the green border is only for demonstration too

    Hope that helps.

  4. #4
    Web Enthusiast
    Join Date
    Jul 2000
    Location
    Western Massachusetts, USA
    Posts
    1,366
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Re:
    have u tried just putting the ul on its own? with its own set of properties?
    That made no difference.

    Re:
    how the margins on lists work
    Thanks for that. It seems to help to:
    Code:
    ul, li { 
        padding: 0; margin: 0; 
        /*border: 1px solid green;    */
        list-style-position: inside;
    }
    Firefox default is inside & IE default is outside. They are now both consistently inside. My current treatment for ul and li is:
    Code:
    ul, li { 
        padding: 0; margin: 0; 
        /*border: 1px solid green;*/
        list-style-position: inside;
    }
    
    h1, h2, h3, h4, p, ul, blockquote { 
    margin : 0 20px .75em; }
    I haven't yet dealt with the wrap thing yet.
    Paul C.
    ClickBasics
    http://www.clickbasics.com

  5. #5
    SitePoint Wizard bronze trophy DaveWoods's Avatar
    Join Date
    Dec 2004
    Location
    Derbyshire - UK
    Posts
    2,651
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by paulcj2 View Post

    Re: Thanks for that. It seems to help to:
    Code:
    ul, li { 
        padding: 0; margin: 0; 
        /*border: 1px solid green;    */
        list-style-position: inside;
    }
    Firefox default is inside & IE default is outside. They are now both consistently inside. My current treatment for ul and li is:
    Code:
    ul, li { 
        padding: 0; margin: 0; 
        /*border: 1px solid green;*/
        list-style-position: inside;
    }
    
    h1, h2, h3, h4, p, ul, blockquote { 
    margin : 0 20px .75em; }
    I haven't yet dealt with the wrap thing yet.
    It'll work fine as long as the text doesn't go onto two lines. Once it does then the second line will sit underneath the bullet and not inline with the text.

    You might be happy with that but if not then try using the last bit of code that I posted in my previous reply as that will keep the bullet on the outside but appear as though it's inside the block due to the way margins/padding applied (works in IE6, IE7, Safari, Opera and Firefox )


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
  •