Notifikationer

Markér alle som læst Log ud

tiller3 Nybegynder

16. september 2006 - 23:30 Der er 14 kommentarer

Height i % virker ikke i ie6 med strict doc type

Jeg har foelgende lille eksempel html, som burde lave en roed kasse som fylder hele browseren(Minus margin og border). Men af en eller anden grund ignorerer internet explorer min height, saa kassen kun bliver hoej nok til lige at indeholde teksten
Height test.
Height test.
Det underlige er at hvis jeg fjerner den korrekte doc type, og dermed faar internet explorer til at koere i querks mode, saa bliver kassen som forvented. Nogle der har en ide om hvad der sker, og hvad man kan goere for at faa ie til at forstaa min height. (Andet end at gaa i querks mode altsaa)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<head>
<META http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Height test</title>
<body>
<div style="height:100%; width:100%; background-color: red">
Height test 
Height test 
</div>
</body>
</html>

Synes godt om

erikjacobsen Ekspert

16. september 2006 - 23:35 #1

Så højden af din <div> skal være 100%, men i forhold til hvad? Siden indeholder et par linier, og det er så det, den tager de 100% af. Sådan skal det være, andre virkemåder er bare fup og svindel. Men hvad mon der sker ved at sige at også siden, dvs. <body>, skal være 100% ?

Synes godt om

pidgeot Nybegynder

16. september 2006 - 23:36 #2

Du kan ikke sige den skal være 100% høj, uden at html og body-elementerne har samme height.

Quirks mode ignorerer det, men det er forkert - for du siger jo at DIV'ens højde skal være 100% af body's højde. Det skal jo så gå galt når den ikke er defineret :)

Synes godt om

erikjacobsen Ekspert

16. september 2006 - 23:39 #3

Og den kode du viser mangler <html> og </head>. Snup en tur forbi http://validator.w3.org/ inden du undrer dig over hvordan din HTML-kode vises.

Synes godt om

tiller3 Nybegynder

16. september 2006 - 23:58 #4

Jeg har vel bare altid gaaet ud fra at body havde en stoerelse der var minimum viewporten(Altsaa skaermen) men det er faktisk ikke specifikeret.

Men at saette height: 100% paa body, virker ikke ordentligt, fordi andre browsere
ikke expander deres parent. Saa hvis indholedt er for stort, saa flower det ud over body, da body jo ikke expander. Det rigtige er vel at saette min-width: 100% paa body, men ie6 forstaar ikke min-width.

Hmm det er vist paa tide at lave et ie only stylesheet til min body.

Synes godt om

tiller3 Nybegynder

17. september 2006 - 00:03 #5

(Mente naturligvis height: og min-height i stedet for width og min-width i ovenstaaende svar.

Synes godt om

mclemens Nybegynder

17. september 2006 - 00:05 #6

Mon ikke du kan sætte baggrunden på html ? ... ellers kan du:
html,body {margin:0px;padding:0px;height:100%;}
html > body {min-height:100%;height:auto;}

Synes godt om

erikjacobsen Ekspert

17. september 2006 - 00:06 #7

Ja, det er rigtig sjovt at lave kode til websider. Jeg ved ikke om det er en holdbar løsning: http://archivist.incutio.com/viewlist/css-discuss/5125 men ellers kunne man jo bare la' vær'.

Synes godt om

mclemens Nybegynder

17. september 2006 - 00:17 #8

Tjah man skal jo også cleare float's og passe på absolutes i FF ...
- Hvis det er et baggrundsproblem så ser min egen css fil sådan her ud:

html,body {margin:0px;padding:0px;}
html{background: #00f url("/a/bg.png") repeat-x fixed;color:#fff;font:bold 18px arial,sans-serif;}

a {color:#fff;}

...

- Det virker fint hos mig :o)

Synes godt om

mclemens Nybegynder

17. september 2006 - 00:17 #9

( det skal jo nok varieres lidt ... )

Synes godt om

mclemens Nybegynder

17. september 2006 - 00:29 #10

Umiddelbart har jeg dog kun set problemet når jeg laver xhtml ?

... Synes ikke din kode fremviser fejlen ?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="da"><head><meta http-equiv="content-type" content="text/html; charset=iso-8859-1" /><meta http-equiv="Content-Style-Type" content="text/css" /><meta http-equiv="content-language" content="da" /><title>...</title></head><body>

<div style="height:100%; width:100%; background-color: red">
Height test 
Height test 
</div>

</body></html>

Synes godt om

mclemens Nybegynder

17. september 2006 - 00:31 #11

... Hov undskyld den i 00:17:29 fangede ikke at det var div'en
- sad vist i mine egne tanker da jeg skrev den med body og html ...

Synes godt om

mclemens Nybegynder

17. september 2006 - 00:33 #12

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="da"><head><meta http-equiv="content-type" content="text/html; charset=iso-8859-1" /><meta http-equiv="Content-Style-Type" content="text/css" /><meta http-equiv="content-language" content="da" /><title>...</title>

<style type="text/css">
html,body{margin:0px;padding:0px;height:100%;}
#diven{height:100%;background:red;}
</style>

</head><body>

<div id="diven">
Height test Height test Height test Height test Height test Height test Height test Height test Height test Height test Height test Height test Height test Height test Height test Height test Height test Height test Height test Height test Height test Height test Height test Height test Height test Height test Height test Height test Height test Height test Height test Height test Height test Height test Height test Height test Height test Height test Height test Height test Height test Height test Height test Height test Height test Height test Height test v
</div>

</body></html>

vs.:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="da"><head><meta http-equiv="content-type" content="text/html; charset=iso-8859-1" /><meta http-equiv="Content-Style-Type" content="text/css" /><meta http-equiv="content-language" content="da" /><title>...</title>

<style type="text/css">
html,body{margin:0px;padding:0px;height:100%;}
#diven{height:100%;background:red;}
body > #diven{height:auto;min-height:100%;}
</style>

</head><body>

<div id="diven">
Height test Height test Height test Height test Height test Height test Height test Height test Height test Height test Height test Height test Height test Height test Height test Height test Height test Height test Height test Height test Height test Height test Height test Height test Height test Height test Height test Height test Height test Height test Height test Height test Height test Height test Height test Height test Height test Height test Height test Height test Height test Height test Height test Height test Height test Height test Height test v
</div>

</body></html>

Synes godt om

mclemens Nybegynder

17. september 2006 - 00:36 #13

(glemte at rette doctypen ... det er
jo også et problem ved almindelig html)

Synes godt om

mclemens Nybegynder

17. september 2006 - 00:52 #14

D.v.s. dit eksempel kunne se sådan her ud:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd"><html>
<head>
<META http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Height test</title>

<style type="text/css">
html,body{margin:0px;padding:0px;height:100%;}
#diven{height:100%;background:red;}
body > #diven{height:auto;min-height:100%;}
</style>

</head>

<body>
<div id="diven">
Height test 
Height test 
</div>
</body></html>

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
Hjælp med HTML og CSS Af Nojsa i HTML	18	10/09/202515:07	17/09/202515:11
CSS 2 x firkanter + tekst på samme linje Af nemlig i HTML	3	19/03/202522:16	20/03/202513:04
Se og ændre html på en webside Af magger i HTML	4	11/03/202513:55	12/03/202506:56
Få input felt, der er med fed skrift og formatteres på linje Af KurtG i HTML	5	02/03/202520:05	04/03/202515:40
Variabler som ikke virker Af Frits Jensen i HTML	3	30/10/202409:37	01/01/202515:27

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