CSS Make List Nav Work in IE 6

Discussion in 'CSS' started by happyharry, Jan 19, 2009.

0
  1. #1
    Hello,

    Ive created a menu with the following code 

    


<html>
<head>
  <style type="text/css">
    body{
      margin:0;
      padding:0;
    }
    
    *{
      margin: 0;
      padding: 0;
    }
    
    #navigationTabs{
      width:199px;
      height:301px;
      position:relative;
      top:51px;
      font-family: Calibri;
      font-size:18px;
      float:left;
    }


    #navigationTabs ul {
      list-style: none;
      margin: 0;
      padding: 0;
    }
      
    #navigationTabs li {
    }
      
    #navigationTabs a {
      background-image: url(img/nav2.gif);
      background-repeat: no-repeat;
      color: #565656;
      height:24px;
      padding-top:19px;
      padding-left:45px;
      text-decoration: none;
      width:154px;
      font-weight:normal;
      display:inline-block;
      display:block;
    }

    #navigationTabs a:hover {
      background-image: url(img/nav1.gif);
      background-repeat: no-repeat;
      color: #35afef;
    }
    #navigationTabs #selected {
      background-image: url(img/nav1.gif);
      background-repeat: no-repeat;
      color: #35afef;
      font-weight:bold;
    }

    #navigationTabs #selected a {
      background-image: url(img/nav1.gif);
      background-repeat: no-repeat;
      color: #35afef;
      font-weight: bold;
      position: relative;
    }


    
  </style>
</head>
<body>
      <div id="navigationTabs"> 
        <ul> 
          <li><a href="" id="selected">Home</a></li> 
          <li><a href="" class="a">Profile One</a></li> 
          <li><a href="" class="a">Profile Two</a></li> 
          <li><a href="" class="a">Profile Three</a></li> 
          <li><a href="" class="a">Profile Four</a></li> 
          <li><a href="" class="a">Profile Five</a></li> 
        </ul> 
      </div> 
</body>
</html>
    Code (markup):
    You can download the files in a zip file from here

    http://puddle.info/issue.zip

    I need it to look the same in ie as it does in FF, IE is ignoring the padding :S

    Can someone PLEASE HELP!!!!!
     
    happyharry, Jan 19, 2009 IP
  2. Anthony Thomas

    Anthony Thomas Peon

    Messages:
    46
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    0
    #2
    I don't think you need { display:inline-block; } - just have { display: block; }

    If you link to where you have these files online, I could help further.
     
    Anthony Thomas, Jan 19, 2009 IP
  3. happyharry

    happyharry Peon

    Messages:
    93
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #3
    I have fixed this. IE wanted padding-top:2em; :D

    Cheers anyways :D
     
    happyharry, Jan 19, 2009 IP