View Full Version : Insane of the PIXEL again!!!! Need help!

04-25-2006, 11:12 AM
Hi back again with a pixel problem.

IE shows it good but FireFox shows some spaces between the images. I tried like hunderd different ways but it didnt work. Only one thing worked but then the rest of the div layout messed up.... I changed the doctype to a different one but still problems...

The code is very simple but still you see space between the images. The purpose is the put these images directly under eachother.

I made the layout first with div-layers but i got insane of it so i made it with a table layout but still the S(*)F&S(&FS pixel :eek:

Need help!

Here is the direct like to the page.

strange.htm (http://www.rinkel.nl/strange.htm)

And here is the easy code.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<meta name="GENERATOR" content="Microsoft Visual Studio .NET 7.1">
<meta name="CODE_LANGUAGE" content="Visual Basic .NET 7.1">
<meta name=vs_defaultClientScript content="JavaScript">
<meta name=vs_targetSchema content="http://schemas.microsoft.com/intellisense/ie5">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link name="stylesheet" rel="stylesheet" type="text/css" href="stylesheet.css">

html, body


margin: 0;

padding: 0;

border: 0;

background-color: #F0E8E8;




<table border="0" cellpadding="0" cellspacing="0">
<tr><td><img src="img/mkjactie_tmobile.gif" border="0" width="70px" height="105px" class="ProviderImg"></td></tr>
<tr><td><img src="img/mkjactie_productplus1.gif" border="0" width="72px" height="47px"></td></tr>
<tr><td><img src="img/mkjactie_mobiel.gif" border="0" width="70px" height="105px" class="MobielImg"></td></tr>
<tr><td><img src="img/mkjactie_productplus2.gif" border="0" width="72px" height="47px"></td></tr>
<tr><td><img src="img/mkjactie_kado.gif" border="0" width="70px" height="105px" class="KadoImg"></td></tr>



04-25-2006, 11:14 AM
I thought you have to add:

table img
font-size: 0;
line-height: 0;

Correct me if I'm wrong.

04-25-2006, 11:35 AM
I thought you have to add:

table img
font-size: 0;
line-height: 0;

Correct me if I'm wrong.

Im not gonna correct you im gonna thank you!!!!!!!!!!!! :thumbsup:

Super! :D

Save me a nervous-breakdown!!

04-25-2006, 11:50 AM
Hehe, all right then. :D
It's odd that you've to add that to a image... welcome in the wonderfull world of HTML/CSS.:cool:

04-25-2006, 02:30 PM
It's not the font-size property that causes/fixes that, it's the line-height. Images are inline elements so there is some space that comes from the default line-height (for text you might have). Setting the image to display: block; or, as Masterslave suggested, the line-height to zero fixes that.
Yeah, line height is a really nasty hidden thing that gave me some hard times too. :rolleyes: