html - doctype ødelægger mit stylesheet - Udvikleren.dk

Tags: html css

Bruger #7041 @ 30.09.06 23:14

Hey

Jeg har et lille problem med at vælge doctype til min kode/html-fil.

Mit problem er at når jeg indsætter en af de doctypes som w3.org anbefaler ( http://www.w3schools.com/tags/tag_doctype.asp ), så virker min højdeangivelse i css ikke længere...

nodoctype.html

Kode

<html>

<head>
  <link rel="stylesheet" type="text/css" href="style.css">
</head>

<body>
<table class="table">
  <tr>
    <td>tekst
    </td>
  </tr>
</table>
</body>

</html>

style.css

Kode

table.table{
  width: 100%;
  height: 100%;
  border-style: solid;
  }

Når jeg indsætter en af deres doctypes, så virker height: 100%; ikke længere.

Resultatet kan ses her:

http://wuhtzu.dk/random/doctype/nodoctype.html
http://wuhtzu.dk/random/doctype/doctype.html

Problemet er formentlig at doc-type ikke passer til indholdet, men hvilken skal jeg så vælge?

Mvh Jonas

Indlæg senest redigeret d. 30.09.2006 23:18 af Bruger #7041

Bruger #7041 @ 01.10.06 03:29

Ovenstående var naturligvis utrolig dumt sagt... det er jo ikke doctype der skal passe til det jeg skriver, men omvendt. Så først og fremmest var det bare mig osm ikke overholdt standarden..

Dernæst bliver det rent faktisk vist korrekt, da 100% height er 100% af 'parent-elementet', som jo er <body> og <body> fylder ikke hele browservinduet i højden...

Bruger #8222 @ 01.10.06 23:28

Suppering til Jonas's svar:

Du skal bare gøre sådan her i din css

Kode

body
{
  height: 100%;
}

table.table{
  width: 100%;
  height: 100%;
  border-style: solid;
  }

Så skulle den gerne være i vinkel :=)

Bruger #7041 @ 03.10.06 15:15

Supplering til suppleringen:

Kode

html,body{
  height: 100%;
  }

table.table{
  width: 100%;
  height: 100%;
  border-style: solid;
  }

Hvis ikke <html> også blive strukket til 100% i højden, så vil det med at strække body ikke virke

Bruger #10690 @ 16.10.06 18:01

Hmm, som oftest er det irriterende når websider har en fuld browser-vindue højde. Prøv i stedet med height: auto;.

Hvis du alligevel vil have en minimumshøjde på, er der et lille css hack her:

Kode


table.table{
  width: 100%;
height: auto;
  min-height: 500px;
_height: 500px;
  border-style: solid;
  }

Dette lille hack sørger for en minimumshøjde på 500 px. _Height paramereten kompenserer for IE's dårlige understøttelse af CSS2.

God Ferie

doctype ødelægger mit stylesheet

Karma barometer (30 dage)

Modtaget

Givet

Favorit hos
Forum tråde
Artikler