3 replies [Last post]
cubique
Offline
newbie
Last seen: 13 years 29 weeks ago
Timezone: GMT-1
Joined: 2006-03-10
Posts: 8
Points: 0

I have a problem with placing images below each other. In IE and Opera it looks good, but Firefox and Mozilla are placing 1 pixel margin between 3 of the 8 images. (see attached file). Can someone help me out?

CSS:

#hoofdmenu {
position: absolute;
left: 177px;
top: 151px;
height: 136px;
width: 125px;
background: #DD0055;
overflow: hidden;
}

Website title

AttachmentSize
css-problem.jpg6.91 KB
Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 8 years 10 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

Set the img tags to display

Set the img tags to display block. img is an inline element and by default aligned with the text baseline, which is a pixel or two above the bottom to leave space for letters with descenders. The gap may or may not show up in different browsers due to the way they are placing the images in the line box and how they are stretching the line box itself. By using display:block you take the whole inline line box thing out of the mix.

cubique
Offline
newbie
Last seen: 13 years 29 weeks ago
Timezone: GMT-1
Joined: 2006-03-10
Posts: 8
Points: 0

Thanks, this helps... a

Thanks, this helps... a little. In IE, Mozilla and Firefox it looks good now, but now IE7 suddenly places a 3px space between the images. This is what I am using:
img {
vertical-align: top;
border-style: none;
margin: 0;
display: block;
}

cubique
Offline
newbie
Last seen: 13 years 29 weeks ago
Timezone: GMT-1
Joined: 2006-03-10
Posts: 8
Points: 0

I removed the line on top,

I removed the line on top, now it works fine.