Forum Moderators: not2easy
I am trying to get rid of that with a conditional statement, buyt am foxed. Any suggestions?
DOCTYPE
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
CSS
body {
font-family:Arial, Helvetica, sans-serif;
color:#000099;}
#sidenavbar {
font-family:Arial, Helvetica, sans-serif;
font-size:.8em;
line-height:1.2em;
float:left;
width:100px;
margin-left:0;
margin-top:.5em;
margin-bottom:1em;
}
#sidenavbar ul {
list-style:none;
margin:0;
padding:0;
}
#sidenavbar ul a {
width:auto;
}
#sidenavbar ul li {
background-color:#000099;
margin-bottom:.5em;
}
#sidenavbar a {
padding:2px 0 2px 10px;
text-decoration:none;
display:block;
width:100%;
border-bottom: solid .1em #fff;
border-top: solid .1em #fff;
border-left: solid .1em #fff;
border-right: solid .1em #fff;
}
#sidenavbar a:link,#sidenavbar a:visited {
color:#fff;
}
#sidenavbar a:focus, #sidenavbar a:hover {
color: #000000;
background-color:#FFFF00;
}
#sidenavbar ul li a:hover{
background-color:#FFFF00;
margin-bottom:.5em;
}
HTML
<div id="sidenavbar">
<ul>
<li>
<a href="#">This</a>
</li>
<li>
<a href="#">That</a>
</li>
<li>
<a href="#">Other</a>
</li>
</ul>
</div>
CSS
<!--[if IE 7]>
<style type="text/css">
#sidenavbar ul li a:hover{
background-color:#FFFF00;
margin-bottom:0;
}
</style>
<![endif]-->
The culprit is
#sidenavbar ul li a:hover {
margin-bottom:0.5em;
}
because this adds a bottom margin on hover only. Box model interpretations etc mean this is not visually noticeable in some browsers until the borders are added.
Your conditional comment fixes the issue in ie7 because it removes the margin-bottom applied in the main style sheet. However, on the provided code there doesn't seem any reason to apply
margin-bottom#sidenavbar ul li a:hover
If I change the CSS to
#sidenavbar ul li a:hover{
background-color:#FFFF00;}The background color no longer changes in IE8 - though it does in other browsers. Effectively, there is a bug in IE8 which is overcome by specifying the bottom margin - even for zero margin.
So
[code]
#sidenavbar ul li a:hover{
background-color:#FFFF00;
margin-bottom:0;
}
cracks it for IE7, IE8, and all sensible browsers.
Thank you for getting back to me.
