SitePoint Sponsor

User Tag List

Results 1 to 4 of 4

Hybrid View

  1. #1
    SitePoint Evangelist mumford1's Avatar
    Join Date
    Sep 2002
    Location
    UK
    Posts
    571
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Consistent list items in browsers

    Hi

    Does anyone know how to display list items so they look the same in IE and NN.

    Whenever i add a class for list items, the spacing between the list items differ between the 2 browsers (netscape they are normally not as spaced vertically)

    CSS

    ul.leftmenu{
    margin-top:15px;
    margin-left: 0;
    padding-left: 0px;
    list-style: none;
    }
    ul.leftmenu li{
    font:10px Verdana, Arial, Helvetica, Geneva, sans-serif;
    margin-top: 5px;
    padding-left: 15px;
    border: 0;
    background-image: url(../images/bullet.gif);
    background-repeat: no-repeat;
    background-position: 0 63%;
    white-space:nowrap;
    }
    ul.leftmenu li a{
    font:10px Verdana, Arial, Helvetica, Geneva, sans-serif;
    color:#EBE8D4;
    text-decoration:none;
    margin-top:0;
    padding:0;
    }
    ul.leftmenu li a:hover{
    font:10px Verdana, Arial, Helvetica, Geneva, sans-serif;
    color:#9D936A;
    text-decoration:none;
    }

    This bugs me everytime, could someone offer there assistance please

    cheers!!

  2. #2
    Google Engineer polvero's Avatar
    Join Date
    Oct 2003
    Location
    Mountain View
    Posts
    567
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    rather than background image for lists, I use the css attribute list-style-image

    Code:
    #id li { 
    list-style-image: url(images/bullet.gif);
    }

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,344
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    I find background images more consistent in lists as there is no way to position list-images correctly cross browser. However it is the proper way to do it (if there is a proper way ),

    I think the question above was about spacing in lists rather than images and all you need to really know is that some browsers use padding for the initial spacing of lists and some browsers use margin.

    Therefore you need to control both. I usually set both to zero and then adjust the padding that I want.

    Code:
    ul, li {margin:0;padding:0}
    li {margin-left:10px}
    Something like that have a play around with it until you see how its working. Lists can be a pain at times but are structurally sound and worth persevering with.

    Paul

  4. #4
    Are You There? KDesigns's Avatar
    Join Date
    Oct 2003
    Location
    Your Monitor
    Posts
    1,146
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Slap this hack into your CSS and it should take care of your problem with spacing in IE

    Code:
    /* Fix IE. Hide from IE Mac \*/
    * html #leftmenu ul li { float: left; }
    * html #leftmenu ul li a { height: 1%; }
    /* End */
    ChooseDaily.com - Follow on Twitter
    Top Resources for Web Designers and Developers Every Day!


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
  •