Radavståndsproblem (igen)

5 svar · 220 visningar · startad av oGGo 23 juli 2005

oGGoMedlem sedan apr. 2003120 inlägg

23 juli 2005 14:17#1

Hej!
Sitter här och kodar ett litet hobbyprojekt.
Nu är det så att jag skall kasta in ett par bilder precis under varandra (så de ligger kant i kant) typ:

bild
bild
bild
bild

Problemet är att när jag gör detta så får jag ett litet mellanrum mellan bilderna jag inte vill ha, vilket irriterar mig något fruktansvärt.

Jag har testat alla möjliga metoder för att lösa detta, bla. line-height, margins, paddings mm. Inget vill fungera.
Aha tänkte jag, nu jävlar kastar jag in två bilder under varandra på en clean sida utan stylesheets, DOCTYPE mm.

Döm om min förvåning att nu så fungerar visst radavståndet utan problem, inga skumme små fel.
Ok, jag testar att slänga in min stylesheet på den tomma sidan och allt fungerar korrekt fortfarande.
Slänger då in DOCTYPE som är XHTML 1.0 Strict.

Ja, nu fuckar det sig igen.

Oavsett om jag lägger alla taggar på en och samma rad, slänger in alla bilder i olika celler mm så fungerar det absolut inte, det verkar som om bilderna per automatik får en margin på typ 1px runtom sig.

Någon som varit med om liknande och fått det att fungera?

Bifogar härmed också koden för att ni skall få se vad som händer:

css:

img
{
border: 2px solid;
border-color: #c0c0c0;
line-height:0px;
}

body
{
	margin-left:0px;
	margin-right:0px;
	margin-top:0px;
	margin-bottom:0px;
	background-color: #dad6c8;
	font-family:verdana;
	font-size:10px;
}

.table_main
{
	padding-left:0px;
	padding-right:0px;
	padding-top:0px;
	padding-bottom:0px;
	table-border:0px solid;
	font-family:verdana;
	font-size:10px;
	color:#FFFFFF;
}

.div_start
{
	text-align: center;
}

.img_start
{
border: 2px solid;
border-color: #c0c0c0;
}

HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>

<head>
	<title>FÖRBANNADE SKIT</title>
	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<!--	<meta http-equiv="Content-Type" content="text/html; charset=windows-1252" /> -->

	<link rel="stylesheet" type="text/css" href="style.css" />
</head>

<body background="back.gif">

<table class="table_main" cellspacing="0" cellpadding="0">
	<tr>
		<td width="77">
		</td>

		<td>

			<table class="table_main" cellspacing="0" cellpadding="0">
				<tr>
					<td valign="top">
						<img src="logo.gif" width="547" height="93"><br><img src="meny_bg.gif" width="19" height="19"/><br/>
					</td>
				</tr>

				<tr>
					<td valign="top"><img src="meny_bg.gif" width="19" height="19"/><br/><img src="meny_bg.gif" width="19" height="19"/><br/></td>
				</tr>

			</table>

		</td>

		<td>

		</td>
	</tr>
</table>

</body>

</html>

Jag skickar också med en länk för er som vill se koden in action:
http://oggo.ath.cx:8080/hemsida1/default2.asp

OBS!
Kanterna är satta för att se vad som händer och var mellanrummen exakt sker, alltså de skall inte vara där senare...
OBS!

Tack på förhand, oGGo

oGGoMedlem sedan apr. 2003120 inlägg

23 juli 2005 14:22#2

Märkte att detta problem bara uppenbarar sig i Firefox oxh alltå inte i Internet Explorer... :l

InsiderMedlem sedan jan. 2000978 inlägg

23 juli 2005 14:53#3

Lägg till:
line-height:0;
i
.table_main{}

zcorpanMedlem sedan dec. 20042 245 inlägg

23 juli 2005 14:54#4

Images, Tables, and Mysterious Gaps

td img { display:block; }

oGGoMedlem sedan apr. 2003120 inlägg

23 juli 2005 14:56#5

Insider skrev:

Lägg till:
line-height:0;
i
.table_main{}

Hmmm... att det kunde lösa det var ju logoskt... hade ju iofs. testat det innan (tror jag :)), men jaja huvudsaken är att det löste sig! :)

Nåja, fungerade gjorde det och det är huvudsaken... tack så mycket!

Men finns det någon som vet varför det blir såhär såfort man byter DOCTYPE ?

InsiderMedlem sedan jan. 2000978 inlägg

23 juli 2005 15:13#6

Det viktigaste är att man vet att det blir skillnad ibland, med eller utan <!DOCTYPE> och det säkraste sättet att få lika resultat i så många webläsare som möjligt är att ha sidor som validerar med en korrekt <!DOCTYPE>.

För att få tre bilder under varandra behöver du inte använda tabeller:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"  
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="sv" lang="sv">
    <head>
        <title>Minimalt dokument</title>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
        <style type="text/css">
		img {display:block;}	
	</style>
    </head>
    <body>
	<p>
		<img src="wf.gif" width="16" height="16" alt="wf-logga" />
		<img src="wf.gif" width="16" height="16" alt="wf-logga" />
		<img src="wf.gif" width="16" height="16" alt="wf-logga" />
	</p>
    </body>
</html>