Tabell height vill inte

Jag får inte höjden på mina TD's att fixera sig som jag vill. TD'sarna vid sidan som innehåller bilder i mitten är de enda som ska ändra storlek beroende på tabellens innehåll. De andra ska vara fixerade. Nu är det precis tvärtom. Jag har slut på idéer hur man bestämmer det.

Här är en länk till sidan.
http://www.ganget.com/test/test.htm

Och här är koden:

<TABLE BORDER="1" CELLSPACING="0" CELLPADDING="0" HEIGHT="100%">
<TR>
	<TD WIDTH="17" ROWSPAN="4"></TD>
	<TD COLSPAN="4" WIDTH="215" HEIGHT="29" STYLE="background-image: url('pic/layout/scroll_top.gif'); background-position: top left; background-repeat: no-repeat;"></TD>
</TR>
<TR>
	<!--Den här höjden ska vara 64, så att bakgrunden bara repeterar sig en gång, men så blir det inte-->
	<TD ALIGN="right" WIDTH="16" HEIGHT="64" BACKGROUND="pic/layout/scroll_left_top.gif"></TD>
	<TD BACKGROUND="pic/layout/scroll_bg.jpg" WIDTH="160" STYLE="color: #000000;" VALIGN="top" ROWSPAN="3">
		<B>Hej hej</B><BR><BR><BR>
		
		<B>Hej hej</B><BR><BR><BR>
		<B>Hej hej</B><BR><BR><BR>
		<B>Hej hej</B><BR><BR><BR>
		<B>Hej hej</B><BR><BR><BR>
		<B>Hej hej</B><BR><BR><BR>
		<B>Hej hej</B><BR><BR><BR>
		<B>Hej hej</B><BR><BR><BR>
		<B>Hej hej</B><BR><BR><BR>
	</TD>
	<!--Den här höjden ska vara 64, så att bakgrunden bara repeterar sig en gång, men så blir det inte-->
	<TD WIDTH="16" HEIGHT="64" BACKGROUND="pic/layout/scroll_right_top.gif"></TD>
	<TD WIDTH="23" ROWSPAN="4"></TD>
</TR><TR>
	<!--Bara här bakrunden ska repeteras och fylla ut med bakgrund för att täcka innehållet-->
	<TD BACKGROUND="pic/layout/scroll_left.gif"></TD>
	<TD BACKGROUND="pic/layout/scroll_right.gif"></TD>
	<!----->
</TR><TR>
	<!--Dessa höjder ska vara 32, så att bakgrunden bara repeterar sig en gång, men så blir det inte-->
	<TD WIDTH="16"  HEIGHT="32" BACKGROUND="pic/layout/scroll_left_bottom.gif"></TD>
	<TD WIDTH="16" HEIGHT="32" BACKGROUND="pic/layout/scroll_right_bottom.gif"></TD>
</TR>
<TR>
	<TD COLSPAN="4" WIDTH="211" HEIGHT="53" STYLE="background-image: url('pic/layout/scroll_bottom.gif'); background-position: top left; background-repeat: no-repeat;"></TD>
</TR>
</TABLE>

Cellen med

\<B\>Hej hej\</B\>\<BR\>\<BR\>\<BR\>

expanderar höjden på hela raden. Inget att göra åt, såvida du inte vill placera den översvämmande texten i en <div> med CSS 'overflow: auto'.

Ja jo, jag vill ju att den ska expandera hela raden. Men det borde ju gå att fixera de två TD i kanterna medans den i mitten kompenserar för expanderingen av raden. Det som händer nu är ju precis tvärtom. Därför borde det gå att fixa på något sätt.

Hmm...

Lägger du bara till lite innehåll (t.ex. en &nbsp; ) i *varje* cell i tabellen så funkar din kod i Mozilla. ;)

MSIE däremot är kroniskt allergisk mot det där med specifika höjder blandat med rowspans... Har inte lyckats hitta någon enkel lösning på ditt problem för MSIE (än ;) ) - tyvärr...

Det finns aldrig någon anledning att använda &nbsp;, förutom då man använder det till vad det är avsett för, t.ex. 15&nbsp;km/h,

Slå ihop de tre cellerna på sidorna till en cell. Lägg en div med height:100% i varje, sedan ytterligare en div i dessa. Alltså:

<td class="Left1"><div class="Left2"><div class="Left3"></div></div></td>

Sedan lägger du bakgrundsbilder i dem:

.Left1 {
background: url(pic/layout/scroll_left.gif);
}

.Left2 {
height: 100%;
background: url(pic/layout/scroll_left_top.gif) no-repeat top left;
bottom left;
}

.Left3 {
height: 100%;
background: url(pic/layout/scroll_left_bottom.gif) no-repeat }

Cheguelin skrev:

Det finns aldrig någon anledning att använda &nbsp;, förutom då man använder det till vad det är avsett för, t.ex. 15&nbsp;km/h,

Jo - i detta fall eftersom du
a) inte får se någon border runt de tomma cellerna i MSIE annars
b) Får en felaktig expansion av cellhöjderna i Mozilla annars

Testa så får du se ;)

Kan tyvärr inte testa. Jag är faktiskt inte heller införstådd med vad problemet är, men jag lovar att jag skulle nå exakt det resultat som nill är ute efter utan att använda &nbsp;.

Well...
Lägg border på alla kanter i tabellen för det specifika problemet i den här tråden utan att använda &nbsp; och få det att funka i både MSIE6 och Mozilla så skall jag sluta säga emot dig ;)

Här är en skärmbild som sammanfattar problemet som kommer sig av att man har några heltomma celler i en tabell (med eller utan bakgrundsbild) samtidigt som man väljer att använda <table border="1"> ...

Lyckas du skall jag hylla dig som hjälte och be dig rejält om ursäkt!

Lyckas du inte så kanske vi iallafall kan enas om att &nbsp; behövs i vissa lägen ;)

Lycka till! :birp

Det brukar vara olämligt att använda rows- samt colspan när man använder tabeller för layout typ. Det blir bättre med tabeller i tabeller. För övrigt så finns det ingen anledning, åtminstone inte i ditt fall att sätta en storlek på celler för att däri sätta en bakgrundsbild. Varför inte sätta bilden i cellen så får man rätt storlek automatiskt och slipper sätta text i cellen som ni alla anser är ett måste.

nill - ursäkta att vi fortsätter gnabbas i din tråd - men har vi tur kommer vi att munhugas fram till något som fungerar till slut :L

Cheguelin skrev:

Varför inte sätta bilden i cellen så får man rätt storlek automatiskt och slipper sätta text i cellen som ni alla anser är ett måste.

Knacka ihop ett exempel så ser du vilka problem det medför - den valda/önskvärda layouten är problematisk även med tabeller i tabeller och bilder i vissa av cellerna... :birp

Även Guffas lösning ovan har problem eftersom bilderna i de olika div:arna delvis är genomskinliga och alltså skiner igenom på oönskade ställen när de hamnar ovanpå varandra...

Har du en lösning som fungerar så är vi säkert många fler än nill och undertecknad som är intresserade att få se koden för den eftersom vi hela tiden går bet på problemet ;)

Så - visa lite kod är du snäll :birp

hooray

http://www.w3.org/TR/REC-CSS2/tables.html#empty-cells

Ja empty-cells:show är en vacker lösning för Mozilla och andra CSS2-hanterande webbläsare (hade inte tänkt på den, tack för tipset !)...
Men empty-cells: stöds tyvärr inte av MSIE...
Och den löser heller inte det aktuella problemet med att "mellankantcellerna" på höjden får fel dimensioner i MSIE...

Fler idéer ?