<table> blir för liten

Mika3lMedlem sedan nov. 20018 492 inlägg

Trådstart4 mars 2004 19:26#1

Vill ha en sida som ser ut så här:

Tabell | 10px mellanrum | En tabell med ytterligare en under

Det konstiga är att det blir inget 10px stort mellanrum och tabellen högst uppe till höger blir uppskattningsvis ca 5px för liten (testat i IE6).

Koden jag kör med:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html>
<head>
<title>&nbsp;&nbsp; - &nbsp;&nbsp; </title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>

<table cellspacing="0" cellpadding="0" border="0" style="width: 100%; height: 100%;">
 <tr>
  <td align="center" valign="top">

<table cellspacing="0" cellpadding="0" border="0" style="width: 610px; height: 100%; vertical-align: top;">
 <tr>
  <td colspan="3" style="width: 610px; height: 100px;">
  </td>
 </tr>
 <tr valign="top">
  <td style="width: 400px;">

<table cellspacing="0" cellpadding="0" border="0" style="width: 400px;">
 <tr>
  <td align="left" style="width: 400px; background: #FCFCFC; color: #E52F00; padding: 2px;">
Välkommen
  </td>
 </tr>
 <tr>
  <td style="width: 400px; height: 2px;">
  </td>
 </tr>
 <tr>
  <td align="left" style="width: 400px; background: #FCFCFC; padding: 4px;">
Välkommen!
  </td>
 </tr>
</table>

  </td>
  <td style="width: 10px;">
[blue][b]HÄR SKA DET VARA ETT MELLANRUM.[/B][/blue]
  </td>
  <td style="width: 200px;">

[blue][b]DEN HÄR TABELLEN BLIR FÖR LITEN.[/b][/blue]
<table cellspacing="0" cellpadding="0" border="0" style="width: 200px;">
 <tr>
  <td align="left" style="width: 200px; background: #FCFCFC; color: #E52F00; padding: 2px;">
Navigation
  </td>
 </tr>
 <tr>
  <td style="width: 200px; height: 2px;">
  </td>
 </tr>
 <tr>
  <td align="left" style="width: 200px; background: #FCFCFC; padding: 4px;">
<a href="index.asp" class="blue">Startsidan</a><br />
<a href="#" class="blue">Om</a><br />
<a href="#" class="blue">Registrera</a><br />
<a href="#" class="blue">Kontakt</a>
  </td>
 </tr>
</table>

<br style="line-height: 10px;" />

<table cellspacing="0" cellpadding="0" border="0" style="width: 200px;">
 <tr>
  <td align="left" style="width: 200px; background: #FCFCFC; color: #E52F00; padding: 2px;">
Logga in
  </td>
 </tr>
 <tr>
  <td style="width: 200px; height: 2px;">
  </td>
 </tr>
 <tr>
  <td align="left" style="width: 200px; background: #FCFCFC; padding: 4px;">
<form name="loginform" method="post" action="index.asp?login" style="margin: 0px;">
<input type="text" name="username" style="width: 196px;" /><br />
<input type="password" name="password" style="width: 196px;" /><br />
<a href="javascript:document.loginform.submit()" class="red">OK</a>
</form>
  </td>
 </tr>
</table>

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

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

</body>
</html>

Någon som kan se något fel?

jarvkloMedlem sedan juli 20013 378 inlägg

4 mars 2004 22:25#2

Hmm...
Testade lite i Moz/FF/Win och MSIE6/Win

Den undre tabellen blir för bred pga att du har width:196px på <input />-taggarna. Tillsammans med marginaler och paddings i form och td och table blir det så att dessa "spänner ut" tabellen i bredd...

Minska bredden till typ 150px på de två input-taggarna så ser du vad jag menar... Och då löser sig också ditt första problem - för tack vare att den undre tabellen blev "för bred" så korpade webbläsaren tydligen den "tomma" mellancellen för att få plats med "den utspända undertabellen"...

Mika3lMedlem sedan nov. 20018 492 inlägg

5 mars 2004 15:17#3

jarvklo skrev:

Hmm...
Testade lite i Moz/FF/Win och MSIE6/Win

Den undre tabellen blir för bred pga att du har width:196px på <input />-taggarna. Tillsammans med marginaler och paddings i form och td och table blir det så att dessa "spänner ut" tabellen i bredd...

Minska bredden till typ 150px på de två input-taggarna så ser du vad jag menar... Och då löser sig också ditt första problem - för tack vare att den undre tabellen blev "för bred" så korpade webbläsaren tydligen den "tomma" mellancellen för att få plats med "den utspända undertabellen"...

Aaaaah!
Det har du så rätt i!
Hade bara räknat -4 åt ena hållet.

Tack!