Help! De styles van mijn website is plotseling gek gaan doen (ik weet het: het klinkt raar, maar eerst was het netjes en goed en nu opeens lijkt het of iemand er stiekem een andere css-stylesheet achter heeft gezet en ik krijg hem niet goed).

Het gaat om deze site:
http://www.juridischevoorwaarden.nl

Probleem in FF:
Mijn paginatekst is langer dan de pagina. Ik heb overflow:hidden toegepast op enkele plaatsten (zie css), maar het gekke is dat ik overal 'height:100%;' heb, dus hoe kan de pagina nou niet 100% weergeven?

Probleem in IE:
Ik heb de pagina met 'width:800px;' gecentreerd dmv 'margin:60px auto 0px auto;' maar hij is helemaal niet gecentreerd. Hoe kan dit in godsnaam? Ik doe dit altijd op deze manier en het werkt ook altijd.......

Heel vreemd allemaal. Kijk bijvoorbeeld maar eens bij contact:
http://www.juridischevoorwaarden.nl/contact.php
Daar kun je niet eens op de verzend-knop drukken omdat de pagina te kort is......

Hier de CSS:






/*		1.	General styles
*/

*{
	margin:0px;
	padding:0px;
}

body{
	background-color:#000000;
	}
	
#overall_container{
	width:800px;
	height:100%;
	margin:60px auto 0px auto;
	position:relative;
	}
#logo{
	position:absolute;
	top:-50px;
	left:15px;
	height:39px;
	width:287px;
	background-image:url(img/logo.png);
	background-repeat:no-repeat;
	background-position:top left;
	}
.page{
	height:100%;
	width:780px;
	padding:10px;
	background-color:#FFFFFF;
	margin-top:10px;
	overflow:hidden;
	}
.page_main{
	height:100%;
	width:780px;
	margin:0px auto;
	padding-bottom:10px;
	background-color:#ebebeb;
	overflow:hidden;
	}
.page_txt_area{
	width:740px;
	height:100%;
	min-height:330px;
	padding:20px;
	overflow:hidden;
	}

#bottom_info{
	margin-top:5px;
	color:#666666;
	font-family:"Trebuchet MS", Verdana;
	font-size:.6em;
	}

.input_bar{
	height:18px;
	width:138px;
	padding:3px 0px;
	background-image:url(img/input_bar.png);
	}

#login{
	height:150px;
	width:150px;
	position:relative;
	}
	#gebruikersnaam{
		height:18px;
		width:138px;
		padding:3px 0px;
		background-image:url(img/input_bar.png);
		position:absolute;
		top:36px;
		left:7px;
		}
	#wachtwoord{
		height:18px;
		width:138px;
		padding:3px 0px;
		background-image:url(img/input_bar.png);
		position:absolute;
		top:80px;
		left:7px;
		}
	#login_button{
		height:18px;
		width:138px;
		padding:3px 0px;
		position:absolute;
		top:110px;
		left:7px;
		}
.txtbox_dashed_grey{
	width:700px;
	height:auto;
	padding:5px 10px;
	margin:0px auto;
	background-color:#EEEEEE;
	border:2px dashed #999999;
	}


/*		2.	Navigation
*/
	
#navigation{
	height:30px;
	width:780px;
	background-color:#CCCCCC;
	}
.nav_button_container{
	height:20px;
	width:100%;
	padding-top:5px;
	}
.nav_button a{
	font-size:.9em;
	color:#000000;
	font-family:"Trebuchet MS", Verdana;
	font-weight:bold;
	padding:0px 20px;
	text-decoration:none;
	}
.nav_button a:hover{
/*	color:#FFFFFF;
	background-color:#999999;
*/	border-bottom:2px dotted #000000;
	}
	

/*		3.	Picture
*/

.picture_nav{
	height:10px;
	width:780px;
	background-color:#FFFFFF;
	}
.picture{
	height:210px;
	width:780px;
	}

/*		4.	Fonts
*/

p,input,textarea{
	font-family:Arial, Helvetica, sans-serif;
	font-size:.8em;
	line-height:160%;
	}
h1{
	font-size:.9em;
	color:#000000;
	font-family:"Trebuchet MS", Verdana;
	line-height:160%;
	}
h2{
	font-size:.9em;
	color:#000000;
	font-family:"Trebuchet MS", Verdana;
	border-bottom:2px solid #CCCCCC;
	line-height:160%;
	}
.form_txt{
	font-family:"Trebuchet MS", Verdana, Arial;
	font-size:.8em;
	color:#999999;
	}
#bottom_info a{
	color:#666666;
	text-decoration:none;
	}
#bottom_info a:hover{
	color:#CCCCCC;
	text-decoration:underline;
	}
	
	
/*		5. Portfolio
*/

.client_pic_overall_container{
	height:100%;
	width:660px;
	margin:10px auto;
	}
.client_pic_frame{
	width:220px;
	height:120px;
	background-image:url(img/clients/pic_frame.png);
	float:left;
	}
.client_pic{
	width:200px;
	height:100px;
	margin:10px auto;
	}
.client_info{
	width:400px;
	height:120px;
	background-color:#FFFFFF;
	float:left;	
	}
	
	
/*		6. Download
*/

.product_line_dark{
	width:700px;
	height:20px;
	padding:4px 20px 0px 20px;
	background-color:#CCCCCC;
	}
.product_line_light{
	width:700px;
	height:20px;
	padding:4px 20px 0px 20px;
	background-color:#DDDDDD;
	}
font.product_line{
	font-size:.9em;
	font-family:"Trebuchet MS", Verdana;
	font-weight:bold;
	color:#666666;
	}
font.product_line a{
	color:#666666;
	text-decoration:none;
	}
font.product_line a:hover{
	color:#000000;
	text-decoration:underline;
	}



/*		7. Product page
*/

.product_img_frame{
	height:240px;
	width:380px;
	background-color:#FFFFFF;
	border:2px solid #CCCCCC;
	padding:10px;
	float:right;
	margin-left:10px;
	margin-top:10px;
	}

.inhoudsopgave{
	height:100%;
	width:200px;
	background-color:#FFFFFF;
	border:2px solid #CCCCCC;
	padding:10px;
	float:right;
	margin-left:10px;
	margin-top:10px;
	color:#666666;
	font-size:.6em;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	}
	
	
/*		8. Overview
*/

table.leftMargin{
	margin-left:0px;
	border:2px solid #CCCCCC;
	}
tr.title{
	font-weight:bold;
	}
td{
	font-size:.7em;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	border:1px solid #CCCCCC;
	}
td a:hover{
	color:#0066FF;
	}
td.product{
	font-size:.7em;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	padding:5px 10px;
	}

@ 1e probleem: Je body en html staan niet op 100% height, als deze dit niet hebben, kunnen de child elementen ook geen 100% height aannemen.
@ 2e probleem: Text-align: center?

Gebruik btw ook niet zomaar overflow: hidden, het is leuk om sommige bugs te fixen, maar niet om regelmatig te gebruiken. :)


*{
    margin:0px;
    padding:0px;
}
Is niet netjes, gebruik dit in de plaats.
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, button, textarea, p, blockquote, th, td { margin: 0; padding: 0; }
@Mitchell:
Ik heb de body en html 100% gegeven, maar er verandert niets. Volgens mij is het ook niet waar wat jij zegt. Ik heb namelijk een andere site waar ik ook geen 100% op de body of html heb en daar werkt 100% prima. Overigens voor wat betreft de overflow heb je gelijk, deze staat er wellicht een keer te veel in.

Wat je bedoelt met 'text-align:center' is mij een raadsel.

Mocht je nog andere suggesties hebben dan hoor ik het uiteraard graag!
Een element neemt de 100% hoogte van zijn parent element, uit de box denken doet een element niet. Een <body> groeit dus ook niet over het hele scherm, dat doet alleen <html>. Het probleem blijft waarschijnlijk omdat je overflow: hidden gebruikt.

margin: 0 auto werkt NIET in IE, dus daarom moet je op de parent element (<body> in dit geval) de waarde text-align: center; meegeven. Om het netjes te houden geef je dan het element dat je wilt centreren text-align: left; mee.
Mitchell schreef op 27.04.2009 13:34


*{
    margin:0px;
    padding:0px;
}
Is niet netjes, gebruik dit in de plaats.
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, button, textarea, p, blockquote, th, td { margin: 0; padding: 0; }
En waarom dan wel niet?
@ Terence: De * selector is trager in renderen en haalt van ALLES margin en padding af. Ook van bepaalde form elementen die je later niet meer kunt aanbrengen doormiddel van CSS.
Welke elementen zijn dat dan precies Michell?
Crispijn schreef op 27.04.2009 14:06
Welke elementen zijn dat dan precies Michell?
Geen idee, las het pas geleden in de comments (3de). En ook frameworks gebruiken * niet, dus daar zal vast wel een goede reden voor zijn. Ik neem aan dat hij met form element, het file select element bedoeld.

Verder is het niet zoveel moeite om gewoon een lijn code te vervangen voor *, voorzorgsmaatregelen zijn nooit slecht. :)
@Mitchell:
Bedankt voor de hulp, maar wat jij zegt klopt gewoon niet. Kijk hier maar eens naar in IE:
http://www.juridischevoorwaarden.nl/test.php

Daar zie je een div element dat is gecentreerd dmv 'margin:0px auto'. Dit staat netjes in het midden.
Link doet het niet..

Reageren