Hallo Zusammen,
ich habe im IE ein Problem mit einem DIV ( #content : rot angelegt!). Der DIV soll um 40px über den darüber liegenden DIV ( #header ) geschoben werden.
Es funktioniert wie gewünscht in Opera, Firefox u. Safari (Win + Mac), im IE (ie7 getestet) leider nicht.
Wie kriege ich IE dazu sich wie die anderen Browser bei der Darstellung der Seite zu verhalten?
ich habe im IE ein Problem mit einem DIV ( #content : rot angelegt!). Der DIV soll um 40px über den darüber liegenden DIV ( #header ) geschoben werden.
Es funktioniert wie gewünscht in Opera, Firefox u. Safari (Win + Mac), im IE (ie7 getestet) leider nicht.
Wie kriege ich IE dazu sich wie die anderen Browser bei der Darstellung der Seite zu verhalten?
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title></title>
<style type="text/css">
body {
font-family : Verdana, Arial, Helvetica, sans-serif;
margin : 0 auto;
margin-top : 25px;
background-color : #EEE;
}
#wrapper {
position : relative;
margin : 0 auto;
text-align : right;
width : 900px;
background-color : #ccc;
}
#header {
position : relative;
padding-top : 140px;
}
#header_links {
width : 450px;
float : left;
margin-top : 0;
background-color : #fff;
position : relative;
}
#header_rechts {
float : left;
width : 450px;
background-color : #003366;
height : 240px;
position : relative;
}
#spacer {
clear : both;
}
#header_rechts h1 {
color : #ffffff;
font-size : 1.2em;
font-family : Arial, Helvetica, sans-serif;
font-weight : normal;
letter-spacing : 0.1em;
margin : 80px 20px 0 0;
}
#breadcrump {
position : relative;
width : 630px;
background-color : #fff;
font-size : 0.7em;
margin : 40px 0 0 -200px;
padding : 7px 20px 7px 0;
z-index : 55;
}
#head_container {
position : absolute;
top : 0;
left : 0;
width : 100%;
height : 140px;
background-color : #fff;
}
#content {
min-height : 400px;
width : 610px;
position : relative;
background-color : #f00;
font-size : 0.8em;
text-align : left;
padding : 25px 10px 25px 30px;
margin : -40px 0 0 250px;
z-index : 90;
}
#logo {
position : absolute;
top : 0;
right : 38px;
height : 130px;
padding-top : 28px;
}
#topnavi {
position : absolute;
top : 20px;
left : 34px;
font-size : 0.6em;
color : #999999;
}
#topnavi a {
color : #999999;
text-decoration : none;
}
#topnavi a:hover {
color : #999999;
text-decoration : underline;
}
#search {
position : absolute;
bottom : 13px;
left : 34px;
font-size : 0.6875em;
}
#search a {
color : #000000;
text-decoration : none;
}
#search a:hover {
color : #000000;
text-decoration : underline;
}
#navi {
position : absolute;
font-size : 0.8em;
text-align : left;
left : 0;
top : 380px;
width : 250px;
z-index : 100;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="head_container">
<div id="topnavi"><a href="index.php" accesskey="1">Home</a></div>
<div id="logo"><a href="index.php"><img src="logo.png" border="0" alt=""></a></div>
<div id="search">
<form id="form" method="get" action="">
...
</form>
</div>
</div>
<div id="header">
<div id="header_links"><img src="images/header.jpg" width="450" height="240" border="0" alt=""></div>
<div id="header_rechts"><h1>Überschrift</h1>
<div id="breadcrump">Sie befinden sich hier: <a href="#">Home</a></div>
</div>
<div id="spacer"></div>
</div>
<div id="navi">
<div id="menuwrapper">
<ul id="primary-nav">
<li>
<a href="index.php"><span>Home</span></a>
</li>
</ul>
<div class="spacer"></div>
</div>
</div>
<div id="content">
<p><strong>Guten Tag</strong></p>
Lorem Ipsum
</div>
</div>
</body>
</html>
