Hej,
det är ju känt att Internet Explorer inte förstår border-spacing.
Men finns det någon alternativ lösning (förutom html-attributet cellspacing)?
Såhär vill jag ha det (om ni tittar med Firefox, Opera osv...): http://troxy.net/table.html
Border-spacing för IE...
9 svar · 709 visningar · startad av Troxy
Kanske duger detta?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<HTML>
<HEAD>
<TITLE>Untitled Document</TITLE>
<META http-equiv=Content-Type content="text/html; charset=windows-1252">
<STYLE type=text/css>
TABLE { WIDTH:500px; BACKGROUND-COLOR: red;border-left:5px solid red;border-right:5px solid red;}
TD { border:10px solid red; border-left:5px solid red;border-right:5px solid red;}
</STYLE>
<META content="MSHTML 6.00.2900.3157" name=GENERATOR>
</HEAD>
<BODY>
<TABLE>
<TBODY>
<TR>
<TD><IMG alt="" src="Untitled Document-filer/thumb.jpg"> </TD>
<TD><IMG alt="" src="Untitled Document-filer/thumb.jpg"> </TD>
<TD><IMG alt="" src="Untitled Document-filer/thumb.jpg"> </TD>
<TD><IMG alt="" src="Untitled Document-filer/thumb.jpg"> </TD>
<TD><IMG alt="" src="Untitled Document-filer/thumb.jpg"> </TD>
</TR>
</TBODY>
</TABLE>
</BODY>
</HTML>
Tack, det där ser ganska bra ut faktiskt. :)
Det är smart att simulera avstånd med hjälp av kantlinjer av samma färg som bakgrunden.
Efter lite experiment så dök en annan fråga upp, nämligen: hur tusan beräknas den totala höjden och bredden på en tabell när man använder border-collapse:collapse; :q
Kolla in den här länken: http://troxy.net/table2.html
Resultatet blir sig inte likt i varesig Firefox, IE eller Opera.
Dessutom verkar cellernas border i vissa fall överlappa det överliggande div-elementet.
Jag har försökt att läsa rekommendationen för CSS2.1 men blir inte klokare.
Hur ska det egentligen fungera?
Firefox och Safari gör likadant ivf.
Efter lite experiment så dök en annan fråga upp, nämligen: hur tusan beräknas den totala höjden och bredden på en tabell när man använder border-collapse:collapse;
Är det så att du experimenterar med just table eller är det resultatet som fanns i din första länk som du vill uppnå?
Tabeller har ju dessutom en tendens att se lite olika ut om du experimenterar med olika doctyper också.!! Om IE ska stjäla av innehållet eller inte...
Lättare att få de se lika ut med <div>
Jag lyckades fixa en lösning som funkar i både IE och de flesta andra.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Untitled Document</title>
<style type="text/css">
table {
width:50em;
border-spacing:1em;
background-color:red;
}
td {
width:20%;
}
td img {
width:100%;
display:block;
}
</style>
<!--[if IE]>
<style type="text/css">
table { border-collapse:collapse; }
td { border:1em solid red; }
</style>
<![endif]-->
</head>
<body>
<table>
<tr>
<td><img src="thumb.jpg" alt=""></td>
<td><img src="thumb.jpg" alt=""></td>
<td><img src="thumb.jpg" alt=""></td>
<td><img src="thumb.jpg" alt=""></td>
<td><img src="thumb.jpg" alt=""></td>
</tr>
</table>
</body>
</html>
För alla webbläsare utom IE används border-spacing.
För IE används border-collapse tillsammans med borders på cellerna för att simulera samma effekt.
Tack för hjälpen!
Kanske är det så att du har bilder som passar IE perfekt, så de blev lika stora, så jag vill inte säga att det du gjort är fel... ;) men efter allt strul jag har haft med att försöka fixa till tabeller med relativ storlek och med % i IE, så kunde jag inte låta bli att testa det du gjort.
Så jag la in 5 bilder på 100px x 100px som var och en skulle fylla 20% av 50em... :)
FF fixade det med att alla fem bilderna blev 112X112, men IE6 tolkade detta som att en bild blev 107X107, en blev 108X108 en blev 116X116 och två st. blev 115X115... och det såg ju inte så kul ut...
Så det är nog så att det inte fungerar i alla lägen... men, men...
Hmm...
MSIE är en riktigt gris när det gäller tabeller i vissa lägen...
... och tyvärr är det som tanten säger - att det funkar i MSIE beror på att man använder lika bred (dvs samma) bild i varje cell...
Men en Workaround för "breddproblemet" i detta fall (dvs om man vill ha samma tjugoprocentsbredd på alla bilder och få höjderna automatskalade) är att använda table-layout:fixed i CSS:en och förse tabellen med en <col width="..."> för varje kolumn ;)
exempel:
Före: http://member.webforum.nu/2241/tabellbreddsmackel.html
Efter: http://member.webforum.nu/2241/tabellbreddsmackel2.html
Skillnaden:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Untitled Document</title>
<style type="text/css">
table {
width:50em;
border-spacing:1em;
background-color:red;
[b]table-layout: fixed;[/b]
}
td {
width:20%;
}
td img {
width:100%;
display:block;
}
</style>
<!--[if IE]>
<style type="text/css">
table { border-collapse:collapse; }
td { border:1em solid red; }
</style>
<![endif]-->
</head>
<body>
<table>
[b] <col width="20%">
<col width="20%">
<col width="20%">
<col width="20%">
<col width="20%">
[/b] <tr>
<td><img src="wink.gif" alt=""></td>
<td><img src="kaffereklam.jpg" alt=""></td>
<td><img src="wink.gif" alt=""></td>
<td><img src="umebakgrund.jpg" alt=""></td>
<td><img src="wink.gif" alt=""></td>
</tr>
</table>
</body>
</html>
... eller med bredderna på col satta via CSS (kolla källkoden ;) ) : http://member.webforum.nu/2241/tabellbreddsmackel3.html
... förutsatt att du behöver kunna hantera bilder med olika originalbredd och automatskala på det här viset förstås ;)
jarvklo skrev
... och tyvärr är det som tanten säger - att det funkar i MSIE beror på att man använder lika bred (dvs samma) bild i varje cell...
Jag använde samma bild X 5 och det blev ändå det resultatet :OO
Tror man ska pricka rätt bredd på orginalbilden... 100px fungerar inte...
Tabeller är inte skoj... men som experiment så... Vad hade du för bredd på dina orginal Troxy?
125 x 83 pixlar.
Det kan ma se om man drar bilden till webläsarens adressfält.