DIV anpassung an alle Browser

Stefan Kietz · 31. März 2011

Ich verzweifle noch und fange immer mehr an Microsoft zu hassen, ich erstelle derzeit eine Website http://www.danceinvasion.de/djm-cut im Firefox & Safari wird alles so dargestellt, nur im Internetexplorer verzieht er mir alles... Warum****?

index Code:

<body bgcolor="#000000" text="#FFFFFF">
<div id="root">
<div id="leftside"></div>
<div id="rightside"></div>
<div id="social">
<a href="http://www.facebook.com/pages/DJ-M-Cut-GER-wwwdjm-cutde/148079998573172" target="_blank"><img src="images/fb_g.png" onMouseOver="this.src='images/fb_w.png'" onMouseOut="this.src='images/fb_g.png'"/></a>
<a href="http://www.myspace.com/deejaymcut" target="_blank"><img src="images/msp_g.png" onMouseOver="this.src='images/msp_w.png'" onMouseOut="this.src='images/msp_g.png'"/></a>
<a href="http://www.wer-kennt-wen.de/person/k1c8qus8" target="_blank"><img src="images/wkw_g.png" onMouseOver="this.src='images/wkw_w.png'" onMouseOut="this.src='images/wkw_g.png'"/></a>
</div>
<div id="header"></div>
<div id="mainnav">
<ul id="Navigation">
<li><a href="#">Home</a></li>
<li><a href="#">Termine</a></li>
<li><a href="#">Biographie</a></li>
<li><a href="#">Booking</a></li>
<li><a href="#">Referenzen</a></li>
<li><a href="#">Gallerie</a></li>
<li><a href="#">Kontakt</a></li>
</ul>
</div>
<div id="header2"></div>
<div id="content">
<div id="fblikebox" style="float:left;"></div>
</div>
<center>Copyright 2011 by DJ M-Cut</center>
<script type="text/javascript" src="http://connect.facebook.net/de_DE/all.js"></script>
<script type="text/javascript">
/* <![CDATA[ */
document.getElementById('fblikebox').innerHTML = '<fb:fan profile_id="148079998573172" width="700" connections="12" stream="1" header="true" css="http://www.danceinvasion.de/djm-cut/stylesheetfb.css?10"></fb:fan>';
FB.init({xfbml : true});
/* ]]> */
</script>
</body>

CSS:

body
{
text-align: center;
font-size: 11px;
font-family: Arial;
background-color:#OOOOOO;
}
#root
{
width:1150px;
margin: 0px auto;
text-align: left;
color: #ffffff;
background-color: #OOOOOO;
}

a img {
border : 0 none;
}

#root a
{
color: #FFFFFF;
text-decoration: none;
font-weight: bold;
}
#root a:hover
{
color: #FF0000;
}

ul#Navigation
{
margin: 0; padding: 1.2em;
list-style-type: none;
border: 1px solid black;
}

ul#Navigation li
{
margin: 1em; padding: 0em;
list-style-type: none;
display:inline;
font-size: 16px;

}

ul#Navigation a
{
text-decoration: none;
font-weight: bold;
list-style-type: none;

}

ul#Navigation a:hover
{
color: #F60;
list-style-type: none;
}

#leftside
{
float: left;
height: 900px;
width: 200px;
background-image: url(images/leftside.png);
background-repeat: no-repeat;
position: relative;
margin: 0px auto;
}

#social
{
float: inherit;
height: 60px;
width: 850px;
background-image: url(images/social.png);
background-repeat: no-repeat;
text-align:right;
position: relative;
margin: 0px auto;
}

#header
{
float: inherit;
height: 148px;
width: 850px;
background-image: url(images/header.png);
background-repeat: no-repeat;
position: relative;
margin: 0px auto;
}

#rightside
{
float: right;
height: 900px;
width: 150px;
background-image: url(images/rightside.png);
background-repeat: no-repeat;
position: relative;
margin: 0px auto;
}

#mainnav
{
float: inherit;
height: 45px;
width: 850px;
background-image: url(images/mainnav.png);
background-repeat: no-repeat;
position: relative;
margin: 0px auto;
}

#header2
{
float: inherit;
height: 94px;
width: 850px;
background-image: url(images/header2.png);
background-repeat: no-repeat;
position: relative;
margin: 0px auto;
}
#content
{
float: inherit;
height: 553px;
width: 850px;
background-image: url(images/content.png);
background-repeat: no-repeat;
position: relative;
margin: 0px auto;
}
#video
{
text-align: right;
position: relative;
margin: 0px auto;

hela · 31. März 2011

Stefan Kietz hat gesagt.:
... Warum****?

Hallo,

du gibst für dein HTML-Dokument keinen Dokumenttyp an. Deshalb arbeiten die Browser im Quirksmode und da ist der IE etwas eigenwilliger als die anderen.
Das Thema wurde hier schon oft besprochen. Die entsprechenden Threads haben meistens den Titel "Layout im IE zerschossen ...". Bitte such mal hier im CSS-Forum danach.

DIV anpassung an alle Browser

Stefan Kietz

Grünschnabel

hela

Neue Beiträge