Får inte height="100%" (i en tabell) att funka i NN6, ironiskt nog funkar det i NN4,5. Har testat css, men det funkar inte heller. Vad göra???
------------------
Skönhet kan man köpa sig, men jag tror jag köper mig en visselpipa
Height i NN6
17 svar · 2 633 visningar · startad av Dino
Tabeller har inte attributet height enligt standarden.
Det kan vara så att NN6 följer standarden. ;)
------------------
/Tor
www.tor.nu
[Redigerat av Web-Tor den 11 dec 2001]
Jag misstänker att Mozilla tolkar det hela bokstavligt. Säger du att tabellen ska vara 100% hög så blir den det. Vill du ha 50% istället så renderar den bara hälften. Det är min teori, och den är egentligen förbannat logiskt riktig.
------------------
Hollowhead - levererar din dagliga dos av nyttig hårdrock!
Jo, det är väl så att om man har tabellen i t.ex. en div-tagg så blir det 100% av höjden av div-taggen och eftersom att div-taggen endast är så hög som det krävs om man inte specificerat någon höjd så fyller inte tabellen upp hela fönstret på höjden.
------------------
/Erik
www.juhlin.nu /sk8files/ /mp2d/
Jag har nästan samma problem. Jag sitter och leker lite med en sida, och vill att hela sidan ska bestå av ett stort block med lite luft runtomkring. Jag antog att det skulle vara så här:
[i]head mm... bla bla bla...[/i]
<body style="margin: 40px;">
<div style="height: 100%; width: 100%;">
Mahga kre fûoox.
</div>
</body>
... dvs, div:en skulle fylla ut allt utrymme som finns i body:n, förutom de där 40 pixlarna på varje sida. Men det gör den inte, eftersom body:n inte anses ta upp hela fönstret utan bara det utrymme innehållet tar upp (vilket snarare låter som height: auto isf 100%). Det här innebär att div:en bara tar upp ett fåtal rader, om det är lite innehåll i den, vilket ser extremt korkat ut.
Är det någon som har en lösning på det här irriterande problemet, eller är det något man är tvungen att leva (och dö) med?
------------------
Vaddå HTLM design? Jag e UTVECKLARE för fan! /mrblonde
[Redigerat av spango den 16 dec 2001]
Det är samma sak i IE6!!
Mozilla och Opera 5 gick att lura med följande:
<body>
<div style="position:absolute; border:0px solid; width:100%; height:100%;">
<table width="100%" height="100%">
<tr>
<td>Hej hopp</td>
</tr>
</table>
</div>
</body>
Tyvärr funkar inte detta i IE6. Är därför också jag intresserad av om det finns någon lösning.
------------------
Fiskesällskapet Salamander
NN6 verkar ha en marginal satt på body.
Är det det här du är ute efter Dino?
<body style="margin:0 0 0 0">
<table width="100%" height="100%" border="1">
<tr>
<td>Hej hopp</td>
</tr>
</table>
</body>
------------------
Have fun
;)
Det är just så jag skrivit, men NN6 tar endast upp height="100% av det utrymme som behövs, inte 100% av fönstret. Men detta var "a long time ago", jag gick runt problemet.
------------------
Skönhet kan man köpa sig, men jag tror jag köper mig en visselpipa
Lägg inte tabellen eller något liknande inne i ett annat element som inte är 100% av höjden. Jättesimpelt ju.
Låter man tabellen vara 100% av höjden av en <div>-tagg som endast är så hög som det krävs för att innehållet ska få plats!
------------------
/Erik
www.juhlin.nu /sk8files/ /mp2d/
Några exempel:
Här tar tabellen upp hela sidan i Mozilla.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>...</title>
</head>
<body>
<table style="height: 100%; border: 1px solid #000000">
<tr>
<td>...</td>
</tr>
</table>
</body>
</html>
Här tar tabellen upp hela höjden av <div>-taggen. Men eftersom att <div>-taggen endast är så hög som det krävs för att innehållet ska få plats så blir inte tabellen 100% av fönstret.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>...</title>
</head>
<body>
<div><table style="height: 100%; border: 1px solid #000000">
<tr>
<td>...</td>
</tr>
</table></div>
</body>
</html>
Här blir det rätt eftersom att tabellen tar upp 100% av <div>-taggen och <div>-taggen är 100% av hela sidan.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title></title>
</head>
<body>
<div style="height: 100%"><table style="height: 100%; border: 1px solid #000000">
<tr>
<td>...</td>
</tr>
</table></div>
</body>
</html>
Så simpelt är det och det är Internet Explorer som gör fel som tolkar det på annat sätt.
------------------
/Erik
www.juhlin.nu /sk8files/ /mp2d/
Jag tog bort height och eftersom jag bara behövde utrymmet så fyllde jag ut med BR tills saker hamnade där de skulle. Kanske inte det "rätta sättet", men jag fick det önskade resultatet. Nu ser det perfekt ut i IE(självklart), NN4,5 och NN6.
------------------
Skönhet kan man köpa sig, men jag tror jag köper mig en visselpipa
Lustigt (eller inte alls, om man tänker efter) - anledningen till att height inte funkade för mig var att jag använde XHTML isf HTML4. Eriks första exempel funkade toppen, men när jag bytte ut DTD:n + lite annat så att det blev korrekt XHTML så tog tabellen (eller div:en, som det var i mitt fall) bara upp det utrymme den behövde, inte det den hade tillgängligt. (Och ja, det är korrekt XHTML och CSS enligt W3C.)
------------------
Vaddå HTLM design? Jag e UTVECKLARE för fan! /mrblonde
... men när jag bytte ut DTD:n ...
Jupp, <!DOCTYPE ...> spelar numera roll!!!
Det beror på att NN6 numera har åtminstånde två olika renderingsmoder för HTML-dokument ("standard" och "quirky") där "standard"-moden används om man använder en "aktuell" <!DOCTYPE ..> och "quirky" gör att NN försöker göra sitt bästa för att vara bakåtkompatibel med gamla webbläsarbeteenden som inte nödvändigtvis är standard (även kallad "Bugwards compatible mode" ;) )
En uttömmande genomgång av detta och hur det hanteras bl.a. i Mozilla (NN6) och IE6 finns på http://www.hut.fi/~hsivonen/doctype.html
------------------
Have fun
;)
[Redigerat av jarvklo den 17 dec 2001]
Att XHTML renderas som man säger att det ska renderas har jag inga problem med, men jag förstår inte varför 100% av body:n är all tillgänglig höjd i vanlig HTML och varför det är den höjd som behövs (alltså auto snarare än 100%) i XHTML?
------------------
Vaddå HTLM design? Jag e UTVECKLARE för fan! /mrblonde
Hmmm... Rotade vidare lite...
Det du får när du sätter height:100% på ett block-element (som t.ex. body), är att du får ett block som får höjden satt till 100% av omgivande block-elements höjd. Yttersta blocket får rot-elementets höjd... Så långt är allt klart... Men vad är det som är rot-element? <body> eller ???
I XHTML a'la Mozilla:s (och många andra standardivrares) tolkning av hur XHTML skall samverka med CSS2, är det <html> som är rot-element och inte <body>... Och <html>-elementet har fått height-attributet defaultat till auto (dvs "så mycket plats som behövs för innehållet, men inte mer) ... <body> ärver <html>:s inställning, och även om du sätter 100% på <body>:s höjd, får du 100% av den höjd som bestäms av innehållet eftersom höjden på <html> defaultar till auto i webbläsarens grundinställningar...
Lösning: Sätt height:100% på html-elementet!
Exempel: OBS! xhtml-strict:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="sv" lang="sv" style="height:100%">
<head><title>test</title></head>
<body style="margin:0 0 0 0;height:100%">
<table width="100%" height="100%" border="1">
<tr>
<td>Hej hopp</td>
</tr>
</table>
</body>
</html>
och tjolahej - du får en tabell över hela höjden även i NN6.2 !! (har inte kollat i övriga NN6:or dock...)
Och jo - det finns en hel del inlägg i debatten som anser att just detta fenomen är en bugg i Mozilla ;)
------------------
Have fun
;)
[Redigerat av jarvklo den 18 dec 2001]
Jisses, vilken overkill. Men jaja, det funkar iaf...
------------------
Vaddå HTLM design? Jag e UTVECKLARE för fan! /mrblonde
Lite mer overkill. Detta är testat och fungerar i IE6, Mozilla 0.9.6, Opera 5.12 samt Netscape 4.78 (samtliga i windows):
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Test Tabell 100%</title>
</head>
<body marginwidth="0" marginheight="0" style="height:100%; margin:0px;">
<div style="position:absolute; height:100%;">
<table width="100%" height="100%">
<tr>
<td>Hej hopp</td>
</tr>
</table>
</div>
</body>
</html>
------------------
Fiskesällskapet Salamander