Why is IE7 cutting off the bottom of list items with this CSS?
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
Image in IE7 http://img291.imageshack.us/img291/9363/picture16u.pngFirefox
Image in Firefox http://img704.imageshack.us/img704/246/picture17lk.pngHere 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; 开发者_如何学Go
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?
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.
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]-->
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.button
s than that of ul.buttons li
?
精彩评论