...

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



Iwan
04-25-2006, 10: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">
<html>
<head>
<title>Layout</title>
<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">
</head>

<style>
html, body

{

margin: 0;

padding: 0;

border: 0;

background-color: #F0E8E8;

color:#000;

}
</style>

<body>

<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>
</table>

</body>

</html>

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


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

Correct me if I'm wrong.

Iwan
04-25-2006, 10: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!!

Masterslave
04-25-2006, 10: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:

VIPStephan
04-25-2006, 01: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:



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum