CIO Tech Eksperten IT-JOB IT-Kurser Events Podcast Søg

Log ind eller opret profil

Du kan også logge ind via nedenstående tjenester

elgringo Nybegynder

09. juli 2004 - 12:09 Der er 9 kommentarer og
1 løsning

DOCTYPE ødelægger tabeller i IE

Har et problem med at doctype åbenbart smadre design af f.eks
tabeller der har højden angivet i procent, bliver td'ernes højde i tabellen også tolket som procent.
Men kun i IE, i firefox/opera virker det selvfølgelig fint :(

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<style>
body
{
margin: 0;
padding: 0em 0em 0em em;
color: #000;
background: #ffffff;
height: 100%
}
</style>
<body>
<table border=1 style="height: 100%" width="100%">
<tr><td style="height:50px">Header</td></tr> <-- Ja, det bliver så til 50%-agtigt i IE
<tr><td style="height:*">Middle</td></tr>
<tr><td style="height:20px">Footer</td></tr>
</table>
</body>

Synes godt om

elgringo Nybegynder

09. juli 2004 - 12:10 #1

Grunden til jeg har doctype på, er at tabellen er inde i et div-tag som jeg har fundet et stykke kode som kan fake "position: fixed" da IE ikke supportere det.

Synes godt om

roenving Novice

09. juli 2004 - 12:21 #2

Det er fordi * ikke understøttes af css, så cellerne forhøjes forholdsvis ens ...

-- og den korrekte doctype er iøvrigt:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

Se http://www.w3.org/QA/2002/04/valid-dtd-list.html

Synes godt om

elgringo Nybegynder

09. juli 2004 - 12:26 #3

Ændre desværre ikke på noget, og mht * ja okay, var et forsøg på at fortælle den, at jeg skal have resten der, men ændre jo ikke på at 50px bliver toklet som 50%, og det hele ligner noget der er løgn.

Synes godt om

roenving Novice

09. juli 2004 - 12:43 #4

Nej, 50px bliver _ikke_ tolket som 50%, men IE laver følgende beregning:

forholdshøjde = højde1 + højde2 + højde3

Højde1 = tabelhøjde/forholdshøjde * højde1
Højde2 = tabelhøjde/forholdshøjde * højde2
Højde3 = tabelhøjde/forholdshøjde * højde3

-- hvis du sætter den til 100px, vil du se, at den ikke bliver 100% !-)

Men gør i stedet sådan:

<div style="position:relative;border:2px inset black;height:100%">
<div style="position:relative;height:100%;">
<div style="position:relative;height:50px;">Skjult</div>
Middle
</div>
<div style="position:absolute;height:50px;">Header</div>
<div style="position:absolute;height:20px;bottom:opx;">Footer</div>
</div>

Synes godt om

elgringo Nybegynder

09. juli 2004 - 13:50 #5

hmm, virker det hos dig?
For her gør den som man skulle tro, laver den nested relative div
med 100% height og de efterfølgende absolute-divs kommer i bunden af
den store div.
Dvs de havner på en position over 100%, så det resultere i scrollbar
og andet for overhovedet at kunne se header og footer.

Synes godt om

roenving Novice

09. juli 2004 - 13:56 #6

Et par tavetosser, og så havde jeg ikke fået det hele med:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>

<head>

<title>Tomt dokument</title>
<style type="text/css">
html,body{height:100%;margin:0px;border:0px;padding:0px;font-family:tahoma,verdana,arial,sans-serif;font-size:small;}
.menu-text{margin:0px 10px;}
</style>
</head>
<body>
<div style="position:relative;height:100%">
<div style="position:relative;height:100%;">
<div style="position:relative;height:50px;background:blue;">Skjult</div>
Middle
</div>
<div style="position:absolute;top:0px;height:50px;width:100%;background:yellow;">Header</div>
<div style="position:absolute;height:20px;width:100%;bottom:0px;background:green;">Footer</div>
</div>
</body>
</html>

Synes godt om

elgringo Nybegynder

09. juli 2004 - 13:59 #7

Der var det jo, tnx ;)

Synes godt om

elgringo Nybegynder

09. juli 2004 - 13:59 #8

Hov, Du mangler at "svare"

Synes godt om

roenving Novice

09. juli 2004 - 14:00 #9

Velbekomme '-)

Synes godt om

roenving Novice

09. juli 2004 - 14:21 #10

-- og tak for point ;~}

Synes godt om

Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Følg dette spørgsmål

Opret Preview

Webudvikling kurser

Vi tilbyder markedets bedste kurser inden for webudvikling

Se alle Webudvikling kurser

Flere spørgsmål fra HTML kategorien

Titel	Indlæg	Oprettet	Seneste aktivitet
Variabler som ikke virker Af Frits Jensen i HTML	3	30/10/202409:37	01/01/202515:27
Aldersbegrænsning på min hjemmeside Af ØLMANDEN i HTML	2	29/09/202410:58	30/09/202412:04
Bredde på div elementer Af dane022 i HTML	2	16/02/202408:29	20/02/202412:50
Hvilken mindste mobilstørrelse til hjemmeside Af CSharpRazor i HTML	2	21/12/202322:51	22/12/202308:03
validering <input tlfnr. Af slein55 i HTML	5	15/10/202311:43	15/10/202314:51

Se alle spørgsmål i kategorien Opret spørgsmål

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester

Alle kategorier på Eksperten

Seneste artiklerRSS