CSS is driving me crazy really. Some much time lost for such simple things!

I just want a vertical thumbnail list, with a bottom margin of 10px. In IE7 I get 3px or more added, why?? I tried everything setting all margins, paddings and borders to 0 and specifying width and heights.

I based my code on http://www.javascriptkit.com/script/script2/verticalmenu.shtml

CSS:

#wrapper {
width:120px;
padding:10px;
background:orange;
}

.glossymenu, .glossymenu li ul {
width: 120px;
margin: 0; padding: 0; border:0;
list-style-type: none;
background:gray;
}

.glossymenu li {
width:120px; height:80px;
position: relative;
margin: 0; padding: 0; border:0;
margin-bottom:10px;
background:red;
}
.glossymenu li a {
width:120px; height:80px;
display: block;
margin: 0; padding: 0; border:0;
text-decoration: none;
background:green;
}
.glossymenu li a img {
width:120px; height:80px;
display:block;
margin: 0; padding: 0; border:0;
border-style:none;
}

/* Holly Hack for IE */
* html .glossymenu li { float: left; height: 1%; }
* html .glossymenu li a { height: 1%; }

.glossymenu li.lastitem {
margin-bottom:0;
}

HTML:

<div id="wrapper">
<ul id="verticalmenu" class="glossymenu">
    <li><a href="#"><img src="../images-s/001.jpg" /></a></li>
    <li><a href="#" ><img src="../images-s/002.jpg" /></a></li>
    <li class="lastitem"><a href="#"><img src="../images-s/003.jpg" /></a></li>
</ul>

2 answers

o.k.w 2355
2
points
This was chosen as the best answer

I'm really puzzled by this IE7 issue. Even IE6 rendered properly. Maybe it's an IE7 bug.

(Un)fortunately, I can only think of a get around for you which should ease our IE7 pain.

Add the following below the rest of the CSS styles:

<!--[if IE 7]>
<style type="text/css">
.glossymenu li {
  margin-bottom: 6px;
}
.glossymenu li.lastitem {
  margin-bottom:-4px;
}
</style>
<![endif]-->

A hack but nonetheless does the trick.

Answered almost 7 years ago by o.k.w
  • Yeah I think it's the only solution.. Cheers Anton PTM almost 7 years ago
0
points

have you tried setting the line-height and font-size on the li's to a small number?

Answered almost 7 years ago by Tony Crockford
  • nah, doesn't work. Thanks for the thought. Anton PTM almost 7 years ago