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;
	}

Geef die div nu een "text-align: left;" mee en de body "text-align: center;" mee.
Hmmm, apart. Ik vind het niet zo spannend om * te gebruiken. Ik weet wat het resultaat er van is en ik heb nog nooit problemen gehad met deze selector. Ga dus ook niet overstappen.

@Bart:
Als je de basis van je css nou even opnieuw schrijft? Gewoon de globale manier van indelen... Ik denk dat dit het meest eenvoudig is...
@Mitchell:
Wat is nou het doel van jouw actie? Je ziet toch dat het werkt? Heb ook nog even aangepast wat je wilde (dus: "text-align: left;" en de body "text-align: center;"), maar het blijft gewoon netjes in het midden staan.

Heb je nog serieuze comments dan graag! Anders dan graag vrij houden voor andere reacties.

@Crispijn:
Ja, daar zat ik ook al aan te denken. Macromedia Dreamweaver doet de laatste tijd ook een beetje raar: zo was er laatst al een probleem met de BOM. Zou het daar aan kunnen liggen misschien? Ik denk dat ik maar eens ga herschrijven. Schroom niet om met suggesties te komen! Mijn dank is groot.
@Mitchel:
Wat ik altijd doe om te centrerenis het volgnede:


#container {
margin: 0px auto;
margin-top: 10px;
}

Oftewel: ik maak dus onderscheid in de margin... wel zo handig en duidelijk en dit gaat altijd goed.

Verder wat betreft die 100%: je wil toch gewoon een scrollbar hebben in je pagina? Met de height 100% maak je die betreffende div net zo hoog als je browser scherm. Haal deze gewoon eens weg, net als de overflow en je krijgt een 'normale' pagina.

Veel succes!

PS, wel de position absolute weghalen bij je ovarall container!
Zover ik weet werkt alleen "margin: 0 auto;" niet in alle browsers, daarom probeer ik duidelijk te maken dat text-align er bij word gebruikt, maar goed. Als de margin centering genoeg werkt voor jullie.. :)
@Crispijn:
100% weggehaald en ook de overflow. Resultaat: een normale pagina!

Alleen de centrering in IE lukt nog niet.....

Thanks mate!


@Mitchell:
Wordt text-align gebruikt om een div element te centreren? Lijkt me niet....


IK BEN ER INMIDDELS UIT....!!!
Doordat ik een tabelnaam in mijn database had hernoemt en deze tabelnaam in mijn db-connect-file wordt opgeroepen (en dus niet werd gevonden) werd om de een of andere reden de hele css overhoop gegooid. Het is nu opgelost.

Dank voor de hulp mensen!
Hey,
ik zat eens even die site net te bekijken maar volgens mij is er nog steeds 1 foutje namelijk bij je potrfolio pagina daar gaan alle vakjes over de 'inline' heen
Konings, ben blij voor je!
Portfolio is inderdaad nog niet goed. Een </div> te veel ofzo?
En de knoppen "Bestellen" bij "Download" werkt ook niet.
@Milo:
Ja, dat klopt. Dat zag ik inderdaad ook. Heel erg bizar. Om gek van te worden! Geen flauw idee waarom dit niet gewoon werkt.

@Turmin:
Wellicht, ik zal eens kijken naar een </div> te veel.

Wat betreft die knoppen: dat klopt, ik ben momenteel bezig om er een webshop-functie in te plaatsen.

Reageren