Tabell med runda kanter

Jag har denna tabell för att skapa en tabell med runda kanter:

<table border="0" height='*' width="250" bgcolor="#FFFFFF" cellspacing="0" cellpadding="0">

	<tr height='6'>

		<td width='6' valign='top'><img src='bilder/table_upleft.gif' border='0' width='6' height='6'></td>

		<td width='238' bgcolor='#DEDEFF' style="border-top: 1 solid #2F19FF"><b style='font-size: 1 px;'>&nbsp;</b></td>

		<td width='6' valign='top'><img src='bilder/table_upright.gif' border='0' width='6' height='6'></td>

	</tr>

	<tr height='*'>

		<td bgcolor='#DEDEFF' width='6' style="border-left: 1 solid #2F19FF"><b style='font-size: 1 px;'>&nbsp;</b></td>

		<td width='238' valign='top' bgcolor='#DEDEFF'>
						
			<table bgcolor='#DEDEFF' border='0' cellspacing='0' cellpadding='0'><tr><td><img src='bilder/omrostning.gif'></td><td width='5'></td><td><b>Omröstning</b></td></tr></table><br><br><br><br>

		</td>

		<td bgcolor='#DEDEFF' width='6' style="border-right: 1 solid #2F19FF"><b style='font-size: 1 px;'>&nbsp;</b></td>

	</tr>

	<tr height='6'>

		<td width='6' valign='bottom'><img src='bilder/table_downleft.gif' border='0' width='6' height='6'></td>

		<td width='238' bgcolor='#DEDEFF' style="border-bottom: 1 solid #2F19FF"><b style='font-size: 1 px;'>&nbsp;</b></td>

		<td width='6' valign='bottom'><img src='bilder/table_downright.gif' border='0' width='6' height='6'></td>

	</tr>

</table>

Men jag får små vita kanter av någon underlig anledning. Varför?

Exempel kan ses på denna sida:
http://www.ampy.net/tabell_rund.html

ta bort: <b style='font-size: 1 px;'> </b>
och kolla

Här har du en färdig mall som du kan gå efter

http://www.html-gruppen.nu/resurser/html/tabell/index.shtml

voigtann1 skrev:

ta bort: <b style='font-size: 1 px;'> </b>
och kolla

Spelar ingen roll om jag har det med eller inte. Resultatet blir detsamma.

sorhh skrev:

Här har du en färdig mall som du kan gå efter

http://www.html-gruppen.nu/resurser/html/tabell/index.shtml

Kollade på den där mallen och har redan gjort som dom gör.

Du kanske skall prova med att lägga till:

<img src ... align="top">

ejick skrev:

Du kanske skall prova med att lägga till:

<img src ... align="top">

Det hjälper inte. :(

Tror att det beror på vilken webbläsare du har. På min Mac ser det ok ut i IE men inte i Safari, Netscape eller Camino.

Jag använder Internet Explorer 6.0 och där ser det inte ok ut. Har även testat med IE 5.0 med samma resultat.

Ampy - du har två olika problem.

Dels påverkas din tabell av textinställningarna eftersom du kör med &nbsp; i dina "ramceller" mellan "runda hörnen" och ställer in textstorleken på ett sätt som inte verkar funka av någon anledning. (kolla i Mozilla så ser du vad jag menar ;) )

Var noga med att ställa in font-size:1px på *alla* "tomma" celler (du kan göra det direkt på <td> så slipper du <b>-taggen ;) ) - och lägg även in en &nbsp; i alla dessa (var också noga med att ange "1px" för dina border-storlekar - bara "1" funkar bara i MSIE under vissa omständigheter!

(RED: Du hade också råkat skriva font-size: 1 px - vilket inte funkar... Det måste stå font-size: 1px - utan mellanslaget mellan siffran och enheten px ! - vilket "slog ut" textstorleken i Mozilla m.fl...)

Men du har också (håll i dig) skapat dina hörn så att den yttre kanten är genomskinlig runt hela bilden (dvs "hörnet" går inte ända ut utan du har t.ex. en pixelram med "bakgrundsfärg" nederst och till höger i "topleft"-bilden!) - vilket ger... Små vita kanter eftersom bakgrundsfärgen i tabellen (och tabellcellen) är vit... ;)

Tack för alla tips jarvklo! :bire

Nu ser det helt ok ut i Mozilla men inte i IE.

Bedöm själva:
http://www.ampy.net/tabell_rund.html

Hur fixar man så att det ser ok ut i IE?

Hmm...

Kom också på det efter en stund...

Först trodde jag att det också hade med &nbsp;-användningen att göra, så jag bytte ut "tomheten" mot "genomskinliga enpixelbilder" (ett standardtrix sedan NN4:as dagar ;) - men det hjälpte inte...

Sedan kom jag på vad det beror på!
Du har ju border till att lägga på "enpixelramen" i "mellancellerna", och det är den som ställer till det.

Den aningen ovanliga visningen i MSIE beror på hur den lägger till border på tabellceller (inom eller utom innehållets "ram" så att säga) - den har alltid varit lite "egen" i hur detta görs...

Provade att ta bort "border: 1px ... ... " från "yttre mellancellerna" och problemet försvann...

Det enda jag kom på att göra för att komma förbi detta var att byta ut användningen av border-attributen mot en repeterande bakgrundsbild istället... Och det verkar funka även i MSIE efter det...

Jag zip:ade resultatet (bifogas) - eftersom jag lade till fem nya filer, men koden kommer här:

<table border="0" width="250" bgcolor="#ffffff" cellspacing="0" cellpadding="0">
  <tr height='6'>
    <td width='6'><img src='bilder/table_upleft.gif' width='6' height='6'></td>
    <td width='238' background="bilder/table_up.gif"><img src='bilder/table_empty.gif' width='1' height='1'></td>
    <td width='6'><img src='bilder/table_upright.gif' width='6' height='6'></td>
  </tr>

  <tr>
    <td width='6' background="bilder/table_left.gif"><img src='bilder/table_empty.gif' width='1' height='1'></td>

    <td width='238' valign='top' bgcolor='#DEDEFF'>
      <table bgcolor='#DEDEFF' border="0" cellspacing='0' cellpadding='0'>
        <tr><td><img src='bilder/omrostning.gif'></td>
        <td width='5'></td><td><b>Omröstning</b></td></tr>
      </table>
      <br><br><br><br>
    </td>

    <td width='6' background="bilder/table_right.gif"><img src='bilder/table_empty.gif' width='1' height='1'></td>

  </tr>

  <tr height='6'>
    <td width='6'><img src='bilder/table_downleft.gif' width='6' height='6'></td>
    <td width='238' background="bilder/table_down.gif"><img src='bilder/table_empty.gif' width='1' height='1'></td>
    <td width='6'><img src='bilder/table_downright.gif' width='6' height='6'></td>
  </tr>

</table>

Tack för all hjälp! :bire