Pe.: Maring-Top und IE verhalten

Beitrag lesen

Hallo zusammen,

ich habe zwei Fragen bei denen ich einfach nicht weiterkomme.

1. Auf was genau bezieht sich die Prozent Angabe bei margin-top?

Wenn ich margin-top: 13%; verwende von welchen Wert/Bereich werden die 13% berechnet? Irgendwie ist bei mir der Abstand nach oben egal bei welchen Browser/Auflösung oder Länge des Inhaltes immer exakt gleich groß. Somit klebt das Div einmal extrem weit oben und einmal sehr weit unten (je nach Browser/Device/Auflösung).

2. An was liegt es, dass mir der IE 6 das ganze Layout zerstört?

Firefox vs. IE

  
<body id="body">  
	<div id="wrapper">  
		<div id="wrapper_content">  
				<div id="header">  
					<a href="home.html" titel="Logo">  
						<img src="./assets/images/logo.png" alt="logo" />  
					</a>  
				</div>  
				  
				<div id="page_img">  
					<img src="img.jpg" />  
				</div>  
				  
				<div id="menu">  
					<ul>  
					<li>Menü 1</li>  
					<li>Menü2</li>  
					<li>Menü3</li>  
					<li>Menü4</li>  
					<ul>  
				</div>  
				  
				<div id="content">  
					Grundidee beim Entwurf von CSS ...  
				</div>  
			<div class="clear"></div>  
		</div><!-- end wrapper_content div -->  
		<div class="clear"></div>  
  
		<div id="footer">  
			<div id="footer_module">  
				Footer  
			</div>  
		</div>  
    </div><!-- end wrapper div -->  
    <div class="space"></div>  
</body>  

  
BODY#body{  
	margin:0;  
	padding:0;  
	text-align: center;  
	background-image: url(../images/bglogo_brown.png);  
	background-color:#b3b3b3;  
	background-attachment:fixed;  
}  
  
body, td, th, tr, p, div {  
	font-family: Corporate, Arial, Helvetica, sans-serif;  
	font-size: 12px;  
	color: #333;  
	line-height: 145%;  
}  
  
#wrapper {  
	width: 900px;  
	margin: 0 auto;  
	text-align: left;  
}  
  
#wrapper_content {  
	margin-top: 13%;  
	padding: 20px 25px;  
	width: 850px;  
	background: #fff;  
}  
  
#header {  
	float:left;  
	margin-bottom: 52px;  
	width: 650px;  
}  
  
#header_large {  
	margin-bottom: 52px;  
	width: 650px;  
}  
  
#header img{	  
	width: 200px;  
}  
  
#header_large img{	  
	width: 200px;  
}  
  
#page_img {  
	float: right;  
	width: 200px;  
	height: 110px;  
	margin-top: 55px;  
	margin-bottom: 55px;  
	text-align: center;  
}  
  
#page_img img{  
	width: 200px;  
}  
  
#menu {  
	margin-left: 70px;  
	width: 130px;  
	float: left;  
	text-transform: uppercase;  
}  
  
#content {  
	float: left;  
	width: 410px;  
	margin-left: 20px;  
	margin-right: 20px;  
}  
  
.clear {  
	clear: both;  
}  
.space {  
	height: 50px;  
}  
  
a, a:link,  
a:active,  
a:visited {  
	color: #251C0B;  
	text-decoration: none;  
}  
  
a:hover, a.active {  
	text-decoration: underline;  
}  
  
#menu a,  
#menu a:link,  
#menu a:visited  {  
	font-size: 14px;  
	color: #251C0B;  
  
}  
  
#menu ul li a:hover,  
#menu ul li a#active_menu {  
	text-decoration: underline;  
}  
  
#menu ul{  
	list-style-position:outside ;  
	list-style-type: none;  
	padding: 0;  
}  
  
#content ul{  
	list-style-position:inside ;  
	list-style-type:disc;  
	padding-left:3%;  
	margin-bottom: 1em;  
}  
  
#content p{  
	text-align: left  
	margin-bottom: 1em;  
	clear:both;  
}