Why is IE7 cutting off the bottom of list items with this CSS?

Question

Hey I have a really annoying IE7 bug that I am trying to work out. The bottom of list items are getting cut off:

IE7

Firefox

Here is the CSS:

/* begin buttons */

ul.buttons { /* general settings */                       
margin-left: 0;                                              
margin-bottom: 0em;                                              
margin-right: 0;                                              
margin-top: .0em;                                              
float: left;                                              
height: 23px;                                             
text-shadow: 0px 0px;                       
text-align: left; /* set to left, right or center */ /* set margins as desired */ /* set font as desired */
list-style-type: none; /* THIRD number must change with respect to padding-top (X) below */
}

ul.buttons li { /* do not change */
display: inline;
height: 35px;  
}

ul.buttons li img {
margin-right: 7px;
}

body#tab1 li.tab1, body#tab2 li.tab2, body#tab3 li.tab3, body#tab4 li.tab4 { /* settings for selected tab */
border-bottom: 1px solid #fff; /* set border color to page background color */
background-color: #fff; /* set background color to match above border color */
}

body#tab1 li.tab1 a, body#tab2 li.tab2 a, body#tab3 li.tab3 a, body#tab4 li.tab4 a { /* settings for selected tab link */
background-color: #fff; /* set selected tab background color as desired */
color: #000; /* set selected tab link color as desired */
position: relative;
top: 1px;
padding-top: 4px; /* must change with respect to padding (X) above and below */
}

ul.buttons li a { /* settings for all tab links */                                 
border-bottom-color: #4c9a01;                                                                  
border-bottom-width: 1px;                                                                  
border-bottom-style: solid;                                                                  
letter-spacing: .1em;                                                                  
color: white;                                                                  
padding-left: 8px;                                 
padding-bottom: 4px;                                 
padding-right: 8px;                                 
padding-top: 5px;                                 
font-size: .75em; /* set padding (tab size) as desired; FIRST number must change with respect to padding-top (X) above */ /* set border COLOR as desired; usually matches border color specified in #tabnav */
background-color: #94c909; /* set unselected tab background color as desired */ /* set unselected tab link color as desired */
margin-right: 8px; /* set additional spacing between tabs as desired */
text-decoration: none;
}

and the html:

<ul class="buttons">
  <li class="tab1"><a href="index.html">Dashboard</a></li>
  <li class="tab2"><a href="index2.html">My Leases</a></li>
  <li class="tab3"><a href="index3.html">Guide</a></li>
</ul>

I have googled this but I can't seem to find a solution, any ideas?

Answer 1

It looks like the li elements are cut off by the ul element's height (23px):

ul.buttons { /* general settings */                        
margin-left: 0;                                               
margin-bottom: 0em;                                               
margin-right: 0;                                               
margin-top: .0em;                                               
float: left;                                               
height: 23px;  /* <--- here */                                             
text-shadow: 0px 0px;                        
text-align: left; /* set to left, right or center */ /* set margins as desired */ /* set font as desired */ 
list-style-type: none; /* THIRD number must change with respect to padding-top (X) below */ 
}

Most likely, the default overflow value differs in IE and Firefox. Can you increase the ul height to the 35px height of your li elements?

---

rohancragg commented with a good suggestion of using a CSS reset file to normalize browser CSS defaults - http://meyerweb.com/eric/tools/css/reset/.

---

I've just spotted the display: inline; on your li elements. height is ignored for inline elements and you should use inline-block instead.

Answer 2

First guess is that one browser is ignoring the height of the ul and using the height of the li. why do you need to specify a smaller height on the ul.buttons than that of ul.buttons li?

Answer 3

First, install IE Development Tools. It is like Fire Bug and will let you change CSS on the Fly.

Second, change the CSS in the live site to find the problem.

Third, change the CSS and test in Firefox. If it still looks fine in Firefox you are done else create an IF IE statement in your CSS like this:

<!--[if IE 7]>
Special instructions for IE here
<![endif]-->