space before each list item in IE

Discussion in 'CSS' started by akinak, Apr 14, 2008.

  1. #1
    I have created a simple vertical menu using <ul> and <li>. It works fine with firefox but in IE there is extra space before each list item i.e. each list item looks like it is aligned to center. here is the code:

    <ul style="list-style-type:none; text-align:left; padding-left:0; ">
    <li><a href=" ">Degree Programs</a></li>
    <li><a href=" ">Courses</a></li>
    </ul>
    Code (markup):
    and CSS:

    li{padding-left:0; padding-bottom:1em; }
    Code (markup):
    How can I get rid of the extra space before each item in IE?
     
    akinak, Apr 14, 2008 IP
  2. webdesigner

    webdesigner Well-Known Member

    Messages:
    489
    Likes Received:
    14
    Best Answers:
    0
    Trophy Points:
    110
    #2
    Each browser has its own seperate stylesheet it uses as standard for various elements hence why things look different in different browsers.

    Best practice is to start your stylesheet with:

    This overrides browser settings and sets everything to have padding and margin of 0. Then you declare what padding/margin you want on elements as you go along. Try that as i'm quite sure that is what it will be.
     
    webdesigner, Apr 15, 2008 IP
  3. akinak

    akinak Peon

    Messages:
    256
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #3
    thnx webdesigner. It worked and also I learnt a new thing :)
     
    akinak, Apr 15, 2008 IP