Problem med höjden på tabeller i Safari

Tråden skapades och har fått 15 svar. Det senaste inlägget skrevs .
1
  • Oregistrerad
  • 2005-03-02 17:06

Jag har ett stort problem!
Jag skall göra en sida som består av en tabell vidd och höjd 100% och trerader. Längst upp och längst ner skall det vara celler med bakgrund. Fälten upptill och nertill skall vara lika höga och mitten ha fixt storlek. De två fälten uppe och ner blir inte lika stora i Safari, vad göra?

<table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td bgcolor="#CCCCCC"> </td>
</tr>
<tr>
<td height="300"> </td>
</tr>
<tr>
<td bgcolor="#CCCCCC"> </td>
</tr>
</table>

Det blir lika höga om jag sätter höjden till pixlar istället för procent... Men jag vill ju att mitten skall ha bestämd höjd... Kan nån hjälpa mig?

Senast redigerat 2005-03-03 02:23
  • Medlem
  • Karlstad
  • 2005-03-02 19:42

100% höjd på en tabell har aldrig varit godkänd kod. W3C har i sin outgrundliga visdom bestämt att man inte får göra så.

Men det går ändå. Om du tar bort DTD (den allra översta kodraden som definerar doctypen) så funkar det. Men då anses sidan inte vara korrekt av en del folk.

Eller så kan du kolla här: http://apptools.com/examples/tableheight.php

I ditt fall (och om jag fattar rätt) så måste du göra mittencellerna med fast höjd och den översta och nedersta cellen i procent. Jag tror du kan dra till med vilkne siffra som helst. Hela tabellen gör du 100%.

Men....om innehållet i mittencellerna expanderar när t.ex. en användare ökar fontstorleken, så kommer cellen att expandera också.

Ursprungligen av Danne V:

Om du tar bort DTD (den allra översta kodraden som definerar doctypen) så funkar det. Men då anses sidan inte vara korrekt av en del folk.

Inte bara av en del folk och av W3C. De flesta webbläsare hanterar (X)HTML och CSS olika beroende på om en DOCTYPE finns eller inte, och beroende på vilken DOCTYPE som anges.

  • Medlem
  • Karlstad
  • 2005-03-03 07:33
Ursprungligen av system.log:

Inte bara av en del folk och av W3C. De flesta webbläsare hanterar (X)HTML och CSS olika beroende på om en DOCTYPE finns eller inte, och beroende på vilken DOCTYPE som anges.

Jorå, jag förenklade svaret eftersom jag inte ville gå in på alla olika modes som webbläsare hamnar i vilka olika DTD, felaktiga DTD eller inga DTD alls. Jag förutsätter att man praktiskt testar sitt jobb i olika läsare, och ibland kan man faktiskt vara tvungen att köra quirk's mode för att för nåt att bli som man vill.

Den här guiden är bra: http://hsivonen.iki.fi/doctype/

Ursprungligen av Danne V:

och ibland kan man faktiskt vara tvungen att köra quirk's mode för att för nåt att bli som man vill.

Den här guiden är bra: http://hsivonen.iki.fi/doctype/

Det har jag inte råkat ut för. Hur som helst - vill man absolut använda quirks mode är ett alternativ att ändå använda en DOCTYPE (förmodligen HTML 4.01 Transitional), men utan URL.

Och den guiden är bra, ja. Det finns flera andra.

  • Oregistrerad
  • 2005-03-03 13:01

Tack för allt idéer!

Klart det finns massor med andra lösningar... Frames, tabell i tabell, etc... Men det är ju himla konstigt att det blir så här. Borde inte den översta och den understa raden bli lika stora?

  • Medlem
  • Karlstad
  • 2005-03-03 13:56
Ursprungligen av Beez:

Tack för allt idéer!

Klart det finns massor med andra lösningar... Frames, tabell i tabell, etc... Men det är ju himla konstigt att det blir så här. Borde inte den översta och den understa raden bli lika stora?

Att se en bild säger tyvärr inte ett dugg. Du måste ge en länk till sidan ifråga om man ska kunna svara. ALLT beror nämligen på hur koden ser ut, och kan man inte se den, så kan man inte ge ett vettigt svar utan bara en massa gissningar.

  • Oregistrerad
  • 2005-03-03 20:54
Ursprungligen av Danne V:

Att se en bild säger tyvärr inte ett dugg. Du måste ge en länk till sidan ifråga om man ska kunna svara. ALLT beror nämligen på hur koden ser ut, och kan man inte se den, så kan man inte ge ett vettigt svar utan bara en massa gissningar.

Koden finns ju mitt första inlägg, eller rättare sagt koden för själva tabellen som jag sedan har dumpat och bifogat i mitt tidigare inlägg. Gjorde det för att det kan var lättare att se vad jag menar. Sidan finns ju inte uppe eftersom jag håller på att jobba med den...

  • Oregistrerad
  • 2005-03-03 21:06

Tack för alla tips på alla olika sätt det kan göras! Får se vilket sätt det bli i slutändan... tabell-i-tabell eller nån CSS-variant.

Tycker fortfarande det är konstigt att det inte funkar som det står i det första inlägget... men, men, så är det...

Ursprungligen av Beez:

Tack för allt idéer!

Klart det finns massor med andra lösningar... Frames, tabell i tabell, etc... Men det är ju himla konstigt att det blir så här. Borde inte den översta och den understa raden bli lika stora?

Jo, det är konstigt. Fick samma problem.

<table width="100%" height="100%" border="1" cellspacing="0" cellpadding="0">
<tr>
<td align="center" valign="middle">
xxx<br>
</td>
</tr>
<tr>
<td height="300" align="center" valign="middle">
xxx<br>
</td>
</tr>
<tr>
<td align="center" valign="middle">
xxx<br>
</td>
</tr>
</table>

Tabell-i-tabell löser som sagt problemet:

<table width="100%" height="100%" border="1" cellspacing="0" cellpadding="0">
<tr>
<td align="center" valign="middle">

<table width="100%" height="300" border="1" cellspacing="0" cellpadding="0">
<tr>
<td height="300" align="center" valign="middle">
xxx<br>
</td>
</tr>
</table>

</td>
</tr>
</table>
  • Medlem
  • Karlstad
  • 2005-03-03 16:04
Ursprungligen av Beez:

Tack för allt idéer!

Klart det finns massor med andra lösningar... Frames, tabell i tabell, etc... Men det är ju himla konstigt att det blir så här. Borde inte den översta och den understa raden bli lika stora?

Nej, eftersom webbläsaren inte vet vad du menar, dvs 100% av VAD. Den antar att du menar "100% av <body>" och alltså ritar den upp detta, även om du inte ser hela <body> i läsarfönstret.
Därför måste du tala om för webbläsaren hur du vill att den ska göra och definera både body och html.
Än en gång: Kolla länken till apptools.com och lägg in en tabell i en annan som jag beskrev tidigare, så är det klart.

Ursprungligen av Beez:

Men jag vill ju att mitten skall ha bestämd höjd...

Hur ska mitten få en bestämd höjd när du varken anger höjd i procent eller pixlar?

  • Oregistrerad
  • 2005-03-03 02:27

Problem är att den översta raden och den understa raden inte blir lika höga. Det är bara mittenraden jag vill skall vara fast (height = "300") Innehållet i den raden kommer inte att var större än så. Koden jag skrev i första inlägget stämmer så klart inte, så jag har ändrat det.

Det funkar inte att ta bort doctype och oavsett om jag har 100% eller 95% blir de inte lika höga.

Jag har testat vidare och även om jag inte har height 100% på tabellen utan sätter den till 500 och mitten raden till 300, kan jag inte få de båda andra raderna att bli lika höga...

Senast redigerat 2005-03-03 02:40
  • Medlem
  • Karlstad
  • 2005-03-03 07:30
Ursprungligen av Beez:

Problem är att den översta raden och den understa raden inte blir lika höga. Det är bara mittenraden jag vill skall vara fast (height = "300") Innehållet i den raden kommer inte att var större än så. Koden jag skrev i första inlägget stämmer så klart inte, så jag har ändrat det.

Det funkar inte att ta bort doctype och oavsett om jag har 100% eller 95% blir de inte lika höga.

Jag har testat vidare och även om jag inte har height 100% på tabellen utan sätter den till 500 och mitten raden till 300, kan jag inte få de båda andra raderna att bli lika höga...

Gör en tabell enligt länken jag gav tidigare. Ge den EN enda cell. Ge den cellen attributed valign="middle". Lägg in en ny tabell, 300px hög, INUTI den cellen.

Men "Innehållet i den raden kommer inte att var större än så" fungerar troligen inte om den är html-text och när anändaren ökar sin textstorlek.

  • Medlem
  • Karlstad
  • 2005-03-03 17:22

Klistra in detta i ett nytt dokument och kolla:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
	"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="imagetoolbar" content="no">
<meta name="MSSmartTagsPreventParsing" content="true">
<title>Standards Compliance Mode with CSS Rendering</title>
<style type="text/css">
body{color:#000; background-color: #fff;}
table{
	border: solid #008;
	border-width: 0 1px;
}
html, body{
	height:100%;
	margin: 0;
	padding: 0;
}
.fullheightTable{
	background-color: #ccccff;
	border: solid #008;
	border-width: 0 1px;
	height:100%;
	margin: 0 auto;
	text-align: center;
	vertical-align: middle;
}
#innerTable {
	background-color: #FFFFFF;
	height: 300px;
	width: 100%;
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	font-size: 24px;
	font-weight: bold;
	color: #666666;
	text-align: center;
}
</style>
</head>
<body>
<table width="700" border="0" align="center" cellpadding="0" cellspacing="0" class="fullheightTable">
	<tr>
		<td><table width="100%"  border="0" cellspacing="0" cellpadding="0" id="innerTable">
<tr>
<td>Här är mitten-tabellen med 300px höjd. </td>
</tr>
</table>
</td>
	</tr>
</table>
</body>
</html>
1
Bevaka tråden