SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Wizard jag5311's Avatar
    Join Date
    Jan 2003
    Location
    Somewhere in Indiana
    Posts
    3,082
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Getting list item padding to be the same in FF and IE

    Is there a secret to getting the padding and margins for unordered lists and list items to be the same.

    It seems IE just wants to add like 1 more pixel in top and bottom padding to every li then FF. Its throwing off what I need to do with my design.

    Thanks
    Bryan

    Code:
     ul#topmenu {
     	list-style-type: none;
     	width: 274px;
     	padding-top: 30px;
     	margin-left: 380px;
     }
     
     ul#topmenu li {
     	list-style-type: none;
     	margin: 0px;
     	padding: 0px;
     	width: 274px;
     }

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,802
    Mentioned
    158 Post(s)
    Tagged
    4 Thread(s)
    Hi,

    List items can be awkward

    You probably need to specify a height to get then to comply as they probably have different line-heights anyway.

    Sometimes you also need to get rid of the whitespace in the html and have the items back to back.

    This list is exactly the same size in both browsers.
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>Untitled Document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <style type="text/css">
    body{ font-size:16px;
    }
    ul#topmenu {
      list-style-type: none;
      width: 274px;
      padding: 30px 0 0 0;
      margin:0 0 0 380px;
      background:red;
    }
     
     ul#topmenu li {
      list-style-type: none;
      margin: 0px;
      padding: 0px;
      width: 274px;
      height:20px;
     }
    </style>
    </head>
    <body>
    <ul id="topmenu">
    <li>testing</li><li>testing</li><li>testing</li><li>testing</li>
    </ul>
    </body>
    </html>
    Paul


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
  •