I have some CSS that doesn't behave correctly with IE8. It works fine with FF3, but in IE8 there are white boxes in between the list items and the whole thing is buggy.
here is the css in question
#golist {
width:900px;
margin-top:20px;
margin-right:auto;
margin-left:auto;
}
#listing {
list-style:none;
margin:0;
padding:0;
}
#listing li {
float:left;
display:block;
width:128px;
background:#fff;
border:1px solid #000000;
height:96px;
}
#listing li a {
border:none;
}
#listing p {
margin-bottom:0;
}
/* ---- show-hide elements ---- */
#listing li .show{
display:block;
width:128px;
height:96px;
}
#listing li .hide {
color:#121212;
text-align: left;
height: 0;
overflow: hidden;
background-image:url(bghover.png);
}
#listing li:hover .hide, #listing li.over .hide {
cursor: pointer;
height: 96px;
width:128px;
text-align:center;
}
#listing li:hover .show, #listing li.over .show {
height: 0;
overflow: hidden;
}
#listing li a, #listing li a:visited, #listing li a:active {
color:#121212;
font-size:12px;
text-decoration:none;
}
#listing li a:hover {
color:#121212;
text-decoration:none;
}
And here is the code itself:
Link
