Hej!
Jag har ett rätt otrevligt problem med colspan och rowspan i en tabell som kommer från ett externt system som jag kan påverka väldigt lite i. Jag kan inte ändra till div-element - utan det måste fortsättningsvis vara en tabell.
I tabellen har jag både celler sammanslagna med colspan och med rowspan - och det verkar bli lite för mycket. Jag har lite olika problem med de olika webbläsarna.
Vi börjar med koden:
<!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="en" lang="en">
<head>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8" />
<title>ful tabell</title>
<style type="text/css">
.EmptyCell
{
font-family: verdana;
font-size: 10px;
vertical-align: top;
}
</style>
</head>
<body>
<table style="width:582px" border="1">
<tr>
<td class="EmptyCell" style="width:17%; padding-top:22px; vertical-align:bottom;">Nam a dolor leo, non consequat arcu. Aenean ornare, felis et tincidunt elementum, lacus erat pellentesque ligula, nec molestie purus nulla quis turpis. Sed vestibulum posuere urna, eu.</td>
<td class="EmptyCell" style="width:41%;" colspan="2"><img src="tabell_1.jpg" alt=""/></td>
<td class="EmptyCell" style="width:42%;" rowspan="2"><img src="tabell_2.jpg" alt=""/></td>
</tr>
<tr>
<td class="EmptyCell" colspan="2" rowspan="2"><img src="tabell_3.jpg" alt=""/></td>
<td class="EmptyCell" rowspan="2"><img src="tabell_4.jpg" alt=""/></td>
</tr>
<tr>
<td class="EmptyCell">Integer et justo quam. Sed eu dolor augue. Maecenas urna erat, ultrices ac fermentum in.</td>
</tr>
</table>
</body>
</html>
Så här ser det ut i IE7: http://ysims.com/tabell/tabell_ie.jpg
Så här ser det ut i Firefox: http://ysims.com/tabell/tabell_fx.jpg
Länk till html-sidan: http://ysims.com/tabell/table.htm
I Firefox ser det mest rätt ut - men den vänstraste kolumnen är alldeles för bred. I IE är den vänstraste kolumnen alldeles för bred, samtidigt som cellen med bild 2 i borde gå ner bredvid bild 4 och bara lämna utrymme för texten (dvs som i fx).
Koden vi använder validerar egentligen inte, men så ni inte ska bråka på mig har jag gjort så denna kod validerar. Det påverkar dock inte utseendet nämnvärt.
Finns några experter som kan peta mig åt rätt håll?
Mvh och tpf,