[CSS] div height probleem?

Ola,

Ik heb een probleem met de volgende site: link.

Hij werkt prima in safari en firefox op mac en pc, alleen in explorer op mac en pc laat hij de verticale balk niet goed zien, hij laat hem maar zien tot aan het einde van de list die erin staat en niet tot aan de onderkant van de de browser. Heeft explorer problemen met height: 100%??

Ook de list die erin staat (link 1, 2, 3, 4, 5) plaatst hij een stuk naar binnen ipv netjes tegen de zijkant aan?

Zijn dit bekende problemen of heb ik gewoon iets verkeerds in de code staan? Of moet ik misschien wel een hack voor exporer toevoegen?

[code:1:2852075be6] body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
background-color: #FFFFCC;
background-image: url(images/header.gif);
background-repeat: no-repeat;
SCROLLBAR-FACE-COLOR: #000000;
SCROLLBAR-HIGHLIGHT-COLOR: #000000;
SCROLLBAR-SHADOW-COLOR: #000000;
SCROLLBAR-3DLIGHT-COLOR: #005b3c;
SCROLLBAR-ARROW-COLOR: #005b3c;
SCROLLBAR-TRACK-COLOR: #000000;
SCROLLBAR-DARKSHADOW-COLOR: #005b3c;
overflow: auto
}

#verticalebalk
{
	height: 100%;
	width: 140px;
	position: absolute;
	background-image: url(images/leaves.jpg); 
	background-repeat: repeat-y;
	padding: 0px; 
	margin: 0px 0px 0px 50px;
	z-index: 1;
}

#navigatiebalk
{
	width: 100%;
	height: 20px;
	position: absolute;
	float: left;
	background-image: url(images/navBarBg.gif);
	padding: 0px; 
	margin: 90px 0px 0px 0px;
	z-index: 2;	
}

#navigatiebalk ul 
{ 
	padding: 0px; 
	margin: 0px 0px 0px 210px; 
}

#navigatiebalk ul li
{
	list-style-type: none;
	padding: 0px;
	margin: 0px;
	display: block;
	float: left;
	background-image: url(images/navBarBg.gif);
	background-repeat: repeat-x; 
	font: 12px/20px "Lucida Grande", verdana, sans-serif;
	text-align: center;
}

#navigatiebalk a
{
	color: #FFFFCC;
	text-decoration: none;
	display: block;
	width: 100px;

/* border-top: 1px solid #004D26;
border-bottom: 1px solid #004D26;/
/
border-left: 1px solid #FFFFCC;*/
border-right: 1px solid #FFFFCC;
}

#navigatiebalk li#active
{ 
	background-image: url(images/navBarBgHover.gif);
	background-repeat: repeat-x; 
}

#navigatiebalk a:hover 
{ 
	color: #005b3c;
	background-image: url(images/navBarBgHover.gif); 
	background-repeat: repeat-x; 
}

#navigatiebalk #active a 
{
	color: #005b3c;
}

#verticallist
{
	font: 12px/20px "Lucida Grande", verdana, sans-serif;
	padding-left: 0px;
	margin-top: 109px;
	border-bottom: 1px solid #FFFFCC;
}

#verticallist li
{
	list-style: none;
	margin: 0;
	padding: 0.25em;
	border-top: 1px solid #FFFFCC;
}

#verticallist li a 
{ 
	color: #FFFFCC;
	padding-left: 10px;
	text-decoration: none;
}

div.content 
{
	font: 12px/20px "Lucida Grande", verdana, sans-serif;
	position: absolute;
	border-style: none;
	text-align: left;
	margin-left: auto;
	margin-right: auto;
	width: 650px;
	height: 450px;
	left: 244px;
	top: 130px;
	overflow: auto;	
&#125;[/code:1:2852075be6]</p>

body,html { /* geef aan dat je body 100% hoog moet zijn, */ /* anders is de body zo hoog als je content. */ width: 100%; height: 100%; }

Ok, height 100% toegevoegd aan body, dat werkt nu dus!! Thnx Martijn!!

Nu zit ik alleen nog met het probleem dat de list in de balk aan de linkerkant inspringt terwijl dit dus in de andere browsers wel goed werkt! Maar volgens mij heb ik nergens aangegeven dat hij moet inspringen?!

list-style-position: inside;

Ik snap wel wat je bedoelt, en dat werkt ook wel alleen wil de list niet aan de linkerzijde van de div lijnen om een of andere reden?! Ik heb net al een hoop code verwijder in de hoop er achter te komen waar het nou aan ligt maar geen suc6....

Anyway bedankt voor je hulp Martijn!

Iemand anders nog een oplossing?! Als je hem bekijkt met explorer en een andere browser dan zie je wel wat ik bedoel!

Ik heb nu een beetje weing tijd om uit te gaan vissen waarom, mischien heb je wat aan de volgende link:

http://css.maxdesign.com.au/listamatic/

Als best practice kan ik je wel aanraden als eerste selector in jouw stylesheet volgende CSS op te nemen:[code:1:3f5d63a0dc]* { margin: 0; padding: 0; border: 0; }[/code:1:3f5d63a0dc]

Hiermee zet je alle marges, padding en borders by default op 0, en overschrijf je de standaardwaarden.

[quote:5c2ad0c8e5="iBert"]Als best practice kan ik je wel aanraden als eerste selector in jouw stylesheet volgende CSS op te nemen:[code:1:5c2ad0c8e5]* { margin: 0; padding: 0; border: 0; }[/code:1:5c2ad0c8e5]

Hiermee zet je alle marges, padding en borders by default op 0, en overschrijf je de standaardwaarden.[/quote:5c2ad0c8e5]

Bedankt hoor dit verhelpt gelijk ook 't probleem dat ik had met IE!!