TD som blir större än bestämt

pröva nåt sånt här istället

<table style="width:580px;">
  <tr>
    <td style="width:150px;">Namn</td>
    <td>utrymme</td>
  </tr>
  <tr>
    <td style="width:150px;"><input type="text" name="txt_1" /></td>
    <td>utrymme</td>
  </tr>
  <tr>
    <td style="width:150px;">Lösenord</td>
    <td>E-Mail</td>
  </tr>
  <tr>
    <td style="width:150px;"><input type="text" name="txt_2" /></td>
    <td><input type="text" name="txt_3" /></td>
  </tr>
  <tr>
    <td style="width:150px;">Kom ihåg mig </td>
    <td>Bevaka</td>
  </tr>
  <tr>
    <td style="width:150px;"><input name="checkbox" type="checkbox" value="checkbox" checked="checked" /></td>
    <td>
      <input name="checkbox2" type="checkbox" value="checkbox" />
    </td>
  </tr>
  <tr>
    <td style="width:150px;">utrymme</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td style="width:150px;">utrymme</td>
    <td>utrymme</td>
  </tr>
</table>

Din kod funkar fint även i IE.
Ska testa att göra om min kod lite senare, så får vi se om det funkar.
Det är alltså det här med colspan som IE inte verkar fatta..?

Man slutar aldrig fundera över hur IE egentligen tolkar vanlig enkel html kod.

Tack på förhand!

markera som löst om du är nöjd med svaret.

trendol skrev:

markera som löst om du är nöjd med svaret.

Skrev i mitt förra svar att jag skulle testa och återkomma, därför har jag inte accepterat.
Hur som helst funkar inte det här, hur jag än gör.
Allt ser bra ut tills jag har med den stora textarean längst ner, så förlängs de första cellerna ovan i IE, i Firefox förlängs de celler "längst åt höger", precis så som det ska vara.

Har slut på idéer, inget verkar funka...
Såhär ser min kod ut:

<div class="white_back_border forumCont">
<form name="nThread" action="default.asp?mP=newthread&amp;fId=1" method="post">
<table>
<tr>

<td style="width: 150px;">Namn:</td>
<td>utrymme</td>
</tr>

<tr>
<td style="width: 150px;"><input type="text" name="tAuth_Name" class="hundrafemtio" value="hrynrynrnry" /></td>
<td>utrymme</td>
</tr>
<tr>
<td style="width: 150px;">Lösenord:</td>
<td>Email:</td>
</tr>
<tr>
<td style="width: 150px;"><input type="password" name="tAuth_Pass" class="hundrafemtio" value="nnrntrn" /></td>
<td><input type="text" name="tAuth_Mail" class="hundrafemtio" value="ntntntrn" /></td>
</tr>
<tr>
<td style="width: 150px;">Kom ihåg mig:</td>

<td>Bevaka:</td>
</tr>
<tr>

<td style="width: 150px;"><input type="checkbox" name="remMe" class="checkbox" /></td>
<td class="">
	<input type="checkbox" name="bT" class="checkbox" />
</td>
</tr>
<tr>
<td style="width: 150px;">Ämne:</td>
<td>utrymme</td>
</tr>

<tr>
<td colspan="2" style="width: 300px;"><input type="text" style="width: 300px;" name="tTop" value="" /></td>
</tr>
<tr>
<td style="width: 150px;">
<input type="hidden" name="tVar" value="" />
<input type="hidden" name="fId" value="1" />
</td>
<td>
<input type="hidden" name="tId" value="" />
<input type="hidden" name="pN" value="" />
</td>
</tr>
<tr>
<td colspan="2" style="padding-top: 10px; width: 508px;">
	<table cellpadding="0" cellspacing="0" style="border-top: 1px #000000 solid; padding: 0px; margin: 0px;">

	<tr>
	<td colspan="2" style="background-color: #D8D4CC; padding-left: 2px; padding-top: 2px; border-left: 1px #000000 solid; border-right: 1px #000000 solid;">
	<table cellpadding="0" cellspacing="2" style="background-color: #D8D4CC; border: 0px #000000 solid;">
<tr>
<td class="ntTb" onmouseover="navOver('', this);" onmouseout="navOut(this);" onclick="bold(document.nThread.tPost);">
<img src="css/editor/bold.gif" style="border: 0px;" alt="" />
</td>
<td class="ntTb" onmouseover="navOver('', this);" onmouseout="navOut(this);" onclick="italic(document.nThread.tPost);">
<img src="css/editor/italic.gif" style="border: 0px;" alt="" />
</td>
<td class="ntTb" onmouseover="navOver('', this);" onmouseout="navOut(this);" onclick="under(document.nThread.tPost);">
<img src="css/editor/underline.gif" style="border: 0px;" alt="" />
</td>
<td class="ntTb" onmouseover="navOver('', this);" onmouseout="navOut(this);" onclick="through(document.nThread.tPost);">

<img src="css/editor/overline.gif" style="border: 0px;" alt="" />
</td>
<td class="ntTb" style="border-right: 1px #D8D4CC solid; padding-left: 2px; padding-right: 0px; width: 1px;">
<img src="pics/spacer.gif" style="border: 0px;" alt="" />
</td>
<td class="ntTb" style="border-right: 0px #D8D4CC solid; padding-left: 2px; padding-right: 0px; width: 1px;">
<img src="pics/spacer.gif" style="border: 0px;" alt="" />
</td>
<td class="ntTb" onmouseover="navOver('', this);" onmouseout="navOut(this);" onclick="code(document.nThread.tPost);">
<img src="css/editor/code.gif" style="border: 0px;" alt="" />
</td>
<td class="ntTb" onmouseover="navOver('', this);" onmouseout="navOut(this);" onclick="addLink(document.nThread.tPost);">
<img src="css/editor/createlink.gif" style="border: 0px;" alt="" />
</td>
<td class="ntTb" onmouseover="navOver('', this);" onmouseout="navOut(this);" onclick="mLink(document.nThread.tPost);">
<img src="css/editor/email.gif" style="border: 0px;" alt="" />
</td>

<td class="ntTb" onmouseover="navOver('', this);" onmouseout="navOut(this);" onclick="cImg(document.nThread.tPost);">
<img src="css/editor/insertimage.gif" style="border: 0px;" alt="" />
</td>
<td class="ntTb" style="border-right: 1px #D8D4CC solid; padding-left: 2px; padding-right: 0px; width: 1px;">
<img src="pics/spacer.gif" style="border: 0px;" alt="" />
</td>
<td class="ntTb" style="border-right: 0px #D8D4CC solid; padding-left: 2px; padding-right: 0px; width: 1px;">
<img src="pics/spacer.gif" style="border: 0px;" alt="" />
</td>
<td class="ntTb" onmouseover="navOver('', this);" onmouseout="navOut(this);" onclick="quote(document.nThread.tPost);">
<img src="css/editor/quote.gif" style="border: 0px;" alt="" />
</td>
<td class="ntTb" style="border-right: 1px #D8D4CC solid; padding-left: 2px; padding-right: 0px; width: 1px;">
<img src="pics/spacer.gif" style="border: 0px;" alt="" />
</td>
<td class="ntTb" style="border-right: 0px #D8D4CC solid; padding-left: 2px; padding-right: 0px; width: 1px;">
<img src="pics/spacer.gif" style="border: 0px;" alt="" />

</td>
</tr>
</table>
	</td>
	</tr>
	<tr>
	<td class="nTf" style="background-color: #D8D4CC; padding: 3px; border-left: 1px #000000 solid;">
	<textarea name="tPost" style="width: 450px; height: 200px;" rows="15" cols="45"></textarea></td>
	<td class="nTf" style="background-color: #D8D4CC; border-right: 1px #000000 solid;"><table cellpadding='3' cellspacing='0' style="border: 0px #000000 solid;">
<tr>
<td><img src='css/smiley/orangebigeek.gif' onclick="insertSmiley('8=', document.nThread); return false;" border='0' alt="" /></td>

<td><img src='css/smiley/orangesmilewinkgrin.gif' onclick="insertSmiley(':D', document.nThread); return false;" border='0' alt="" /></td>
<td><img src='css/smiley/orangecry.gif' onclick="insertSmiley(';(', document.nThread); return false;" border='0' alt="" /></td>
<td><img src='css/smiley/orangewink.gif' onclick="insertSmiley(':^)', document.nThread); return false;" border='0' alt="" /></td>
</tr>
<tr>
<td><img src='css/smiley/orangeembarrassed.gif' onclick="insertSmiley(':$', document.nThread); return false;" border='0' alt="" /></td>
<td><img src='css/smiley/orangedead.gif' onclick="insertSmiley(':X', document.nThread); return false;" border='0' alt="" /></td>
<td><img src='css/smiley/orangecool.gif' onclick="insertSmiley('8)', document.nThread); return false;" border='0' alt="" /></td>
<td><img src='css/smiley/orangeyes.gif' onclick="insertSmiley('^o)', document.nThread); return false;" border='0' alt="" /></td>
</tr>
<tr>
<td><img src='css/smiley/orangesad.gif' onclick="insertSmiley(':(', document.nThread); return false;" border='0' alt="" /></td>
<td><img src='css/smiley/orangeuhoh.gif' onclick="insertSmiley(':|', document.nThread); return false;" border='0' alt="" /></td>
<td><img src='css/smiley/orangesmile.gif' onclick="insertSmiley(':)', document.nThread); return false;" border='0' alt="" /></td>
<td><img src='css/smiley/orangerolleyes.gif' onclick="insertSmiley('$o', document.nThread); return false;" border='0' alt="" /></td>
</tr>
<tr>

<td><img src='css/smiley/orangemad.gif' onclick="insertSmiley('8o|', document.nThread); return false;" border='0' alt="" /></td>
<td><img src='css/smiley/orangeno.gif' onclick="insertSmiley('*-)', document.nThread); return false;" border='0' alt="" /></td>
<td><img src='css/smiley/orangenone.gif' onclick="insertSmiley(':s', document.nThread); return false;" border='0' alt="" /></td>
</tr>
</table></td>
	</tr>
	<tr>
	<td colspan="2" style="height: 5px; border-top: 1px #000000 solid;"><img src="pics/spacer.gif" style="border: 0px;" alt="" /></td>
	</tr>
	<tr>
	<td class="nTf" style="text-align: left; padding-left: 0px;">

	<input type="button" value="Förhandsgranska" onclick="return pThread('preview', 'newthread');" class="btn" />
	</td>
	<td class="nTf" style="text-align: right; padding-right: 0px;">
	<input type="button" value="Posta" onclick="return pThread('send', 'newthread');" class="btn" />
	</td>
	</tr>
	</table>
</td>
</tr>
</table>

</form>
</div>

Tack på förhand!

Du har angett att tabellen ska vara 450 bred. Dina td-celler försöker då dela på detta utrymme. IE med att dela upp cellerna lika stora och FF med att låta den första bli 150 och den andra 300. Om du sätter en tillfällig bakgrundsfärg på td så ser du vad jag menar.
Du kan förhindra detta med att plocka bort textarea-tabellen och låta den vara en egen tabell under den andra i stället.

Du kan lägga den här i headern tills du gjort tabellerna klara
<style type="text/css">
<!--
td{ background-color: #008000 }
-->
</style>

Om jag vore dig skulle jag skippa <table></table> grejen helt och hållet i <form></form>. Gör layouten i css och lägg in <form>:et i <div>:ar i stället. Då kan du styra sidans utseende mycket enklare och fler läsare tolkar det på samma sätt, nämligen som du vill.

/p

überfuzz skrev:

Om jag vore dig skulle jag skippa <table></table> grejen helt och hållet i <form></form>. Gör layouten i css och lägg in <form>:et i <div>:ar i stället. Då kan du styra sidans utseende mycket enklare och fler läsare tolkar det på samma sätt, nämligen som du vill.
/p

Jo, vet. Resten av sidan är helt i CSS och utan tabeller, men jag gjorde ett undantag just här, för att slippa att krångla till det.

Har löst problemet genom att sätta fast bredd på allt, strunta helt i colspan (som IE tolkar helt fel) och sen "tomma" bilder i de celler som inte ska synas.

Tack för alla bra förslag!

Ok!