Luft runt bild i en <td>-cell med strict doctype. hur får man bort paddingen?

6 svar · 593 visningar · startad av Mattias Nordin 28 mars 2009

Mattias NordinMedlem sedan dec. 20051 056 inlägg

Frågan28 mars 2009 19:06#1

Följande sida har loose doctype...

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

http://www.barrelrace.se/start_en.asp

Och där fungerar allt som jag förväntar mig att det ska göra. När jag sedan provar att köra en strict doctype så smyger det in sig luft i den översta <td> - cellen. Hur får jag bort detta?

Följande har en strict doctype...

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

http://www.barrelrace.se/

Den sista fungerar alltså inte som jag förväntar mig att det borde göra.

Tabellen som håller i den övre skuggeffekten ser ut så här:

<table cellpadding="0" cellspacing="0" border="1">
<tr><td><img border="0" src="_design/border_top.png"></td></tr>
<tr><td valign="top" background="/_design/border_middle.png">
<!-- BAKGRUND -->
<div style="margin-left:4px; margin-right:6px; height:100%; background-image:url(/_design/background_inre.png)">
...

:stud

Mattias NordinMedlem sedan dec. 20051 056 inlägg

28 mars 2009 19:13#2

Ähhh... strunt samma. Jag byter till loose på alla. Drygt med tabeller i strict. Någon gång ska jag väl orka lära mig, men inte nu :)

TroxyMedlem sedan mars 20041 505 inlägg

29 mars 2009 15:37#3

Har inte kollat noggrant, men helt spontant tror jag det beror på den vertikala placeringen av inline-elements i strict mode:
http://gtwebdev.com/workshop/gaps/image-gap.php
http://www.tightcss.com/bugs/image-align.htm

Länkarna jag gav är ganska dålig, hittade inget bättre.
Lösningen är:

img { vertical-align:bottom; }

Mattias NordinMedlem sedan dec. 20051 056 inlägg

30 mars 2009 09:24#4

Jag ska testa lite senare. Vill börja använda strict men det är en del saker som tex denna som man blir tokig på.

Hur kan denna rad misstolkas?

Resultatet blir liknande...

I strict mode. Men det är väl till att lära om sig att göra rätt. :)

rhdfMedlem sedan okt. 2007446 inlägg

30 mars 2009 10:29#5

vi hade väl nåt liknande problem i en annan tråd nyligen
det gick fasiken inte att få bort det extra utrymmet där utan att sätta display:block på bilden
borde ju kunna lösas med en generell "regel" i css-filen
td img{display:block;}

zcorpanMedlem sedan dec. 20042 245 inlägg

30 mars 2009 10:42#6

Det verkar aningen meningslöst att gå över till strict så länge du använder utskurna bilder i tabellceller. Det ger nog dig bara problem med mellanrum runt bilderna.

Om du vill "göra rätt" så borde du förmodligen börja med att gå ifrån layouttabeller.

https://developer.mozilla.org/en/Images,_Tables,_and_Mysterious_Gaps

TroxyMedlem sedan mars 20041 505 inlägg

31 mars 2009 20:35#7

zcorpan skrev:

https://developer.mozilla.org/en/Images,_Tables,_and_Mysterious_Gaps

Danke! Det var den där länken jag hade i huvudet förut.