background-image vreemd gedrag

[nl18663]

Hallo beste helpmijers!

ik ben voor een vriend een website aan het maken, nu loop ik tegen een probleem aan met CSS wat ik niet begrijp.
ik heb een main div waar ik een background-image in stop met vaste height en width.
de margin-left en right staan op auto, dit gaat goed. ook geef ik een margin-top mee.
in deze div heb ik nog een div genest, deze heeft wat tekst. daar zit het probleem! als ik deze div een margin-top mee geef dan gaat die margin voor de main div en niet voor de geneste div... als ik uit de main div de background-image verwijder is het probleem opgelost en werkt alles zoals het zou moeten werken... queu??

body {
	background-color: lightgrey;
}

#maindiv {
	height: 603px;
	width: 1023px;
	margin-top: 25px;
	margin-right: auto;
	margin-left: auto;
	background-image: url('../images/achtergrond.gif');
	background-repeat: no-repeat;
}

#logintext {
	height: 100px;
	width: 325px;
	margin-top: 200px;
	margin-right: auto;
	margin-left: auto;
	padding: 15px 15px 0px 25px;
	background-color: white;
	border: 2px solid red;
}

#loginform {
	height: 100px;
	width: 325px;
	margin-right: auto;
	margin-left: auto;
	padding: 15px 15px 0px 25px;
	background-color: white;
}

.loginform {
	width: 150px;
	color: red;
	background: #FCFFBF;
	border: 1px;
	border-style: groove;
	border-color: black;
}

label {
	width: 110px;
	display: block;
	float: left;
	text-align: right;
	margin-right: 5px; 
}

.loginformbutton {
	display: block;
	width: 60px;
	margin-top: 10px;
	margin-left:160px;
	margin-right: auto;
	
}

	<div id="maindiv">
		<div id="logintext">
	    	Toegang tot dit systeem is uitsluitend toegestaan voor geauthoriseerde personen!<br />
			Als u dat niet bent verlaat dan direct deze pagina. misbruik zal worden gemeldt bij de locale autoriteiten.
			<?php 
			if (isset($_SESSION['failed'])){
				echo "Aantal foute logins: ".$_SESSION['failed']; 
			}
			?>
	    </div>	
	    <div id="loginform">
	        <form action="<?php $_SERVER['PHP_SELF'] ?>" method="POST">
	        <table border="0">
	        	<tr>
	        		<td><label>Gebruikersnaam :</label><input type="text" name="username" class="loginform" /></td>
	        	</tr>
	        	<tr>
	        		<td><label>Wachtwoord :</label><input type="password" name="password" class="loginform" /></td>
	        	</tr>
	        	<tr>
	        		<td><input type="submit" name="loginbtn" value="Log in" class="loginformbutton" /></td>
	        	</tr>
	        </table>
	        </form>
	    </div>
	</div>

 

[nl18663]

jaa! ik heb het gevonden... het fenomeen heet dus collapsing margins. om het te voorkomen kun je dus in de parent div overflow:auto; gebruiken.