Design im Firefox okay, im IE verschoben, pls HELP

Fiftytwo · 18. Februar 2007

Hi,

ich habe folgendes Problem, wie viele auch.

Mein kleines Design ist im IE verschoben und brauche Hilfe, damit die Site auch im IE richtig angezeigt wird.
Ich stell gleich den code mit rein, damit ihr mir hoffentlich schnell helfen könnt.
HTML

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"  
  "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xhtml:lang="de"> 
    <head> 
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-15" /> 
        <title>www.chrisse.org</title> 
        <link rel="stylesheet" type="text/css" media="screen" href="./inc/style.css" /> 
		<!--[if IE]>
<link rel="stylesheet" type="text/css" title="IE Bugfixing Stylesheet" href="./inc/style_ie.css" media="screen" />
<![endif]-->
    </head> 
    <body> 
	<div id="background"> 
		<div id="content"> 
			
                <span id="header">&nbsp;</span>
				<ul class="navi">
<li><a href="#" id="navi_1">&nbsp;</a></li>
<li><a href="#" id="navi_2">&nbsp;</a></li>
<li><a href="#" id="navi_3">&nbsp;</a></li>
<li><a href="#" id="navi_4">&nbsp;</a></li>
<li><a href="#" id="navi_5">&nbsp;</a></li>
<li><a href="#" id="navi_6">&nbsp;</a></li>
</ul >
			    <div align="justify"></div>
				
				<span id="navi_unten" style="position:absolute; top:220px; ">&nbsp;</span>
				
				<span id="footer" style="position:absolute; bottom:0px; ">&nbsp;</span>
				
				
		</div>
	</div>
	
	</body> 
</html>

CSS

Code:

/* Background Images */ 
body {
margin:0;
padding:0;
background-color:#999999;
background-repeat:repeat-y;
background-position:center;
background-image:url(../images/body_bg.gif);
} 
div#background {
background-position:top;
background-repeat:repeat-x;
background-image:url(../images/content_bg.gif);
}
/* Page centered */
div#content {
width:900px;
margin:auto;
}
/* Header */ 
span#header {
width:900px;
height:200px;
display:block;
background-repeat:no-repeat;
background-image:url(../images/header.gif);
}
/* Navigation trenner + navigation */ 
ul.navi {
margin:0;
padding:0;
list-style-type:none;
}
ul.navi li {
float:left;
}
.navi a {
display:block;
text-decoration:none;
}
a#navi_1 {
width:150px;
height:20px;
background-image:url(../images/navi_1.gif);
}
a#navi_2 {
width:150px;
height:20px;
background-image:url(../images/navi_2.gif);
}
a#navi_3 {
width:150px;
height:20px;
background-image:url(../images/navi_3.gif);
}
a#navi_4 {
width:150px;
height:20px;
background-image:url(../images/navi_4.gif);
}
a#navi_5 {
width:150px;
height:20px;
background-image:url(../images/navi_5.gif);
}
a#navi_6 {
width:150px;
height:20px;
background-image:url(../images/navi_6.gif);
}
/* Navi Unten */
span#navi_unten {
width:900px;
height:3px;
display:block;
background-repeat:no-repeat;
background-image:url(../images/navi_unten.gif);
}
/* Footer */ 
span#footer {
width:900px;
height:24px;
display:block;
background-repeat:no-repeat;
background-image:url(../images/footer.gif);
}

Wie muss dann die datei style_ie.css aussehen?
Schonmal danke für die Hilfe

Maik · 19. Februar 2007

Hi,

da mir die Hintergrundgrafiken nicht zur Verfügung stehen, hab ich mal Hintergrundfarben eingesetzt und konnte im IE6 keine Verschiebungen feststellen - siehe Anhang.

[editpost] Okay, du sprichst vom IE7

Hier mein Lösungsvorschlag für die style.css:

Code:

html,body {
height:100%;
}

div#background {
background-position:top;
background-repeat:repeat-x;
background:url(../images/content_bg.gif);
height:100%;
}
/* Page centered */
div#content {
position:relative;
min-height:100%;
height:auto !important;
height:100%;
width:900px;
margin:0 auto;
}

/* Navi Unten */
span#navi_unten {
width:900px;
height:3px;
display:block;
background-repeat:no-repeat;
background:url(../images/navi_unten.gif);
overflow:hidden;
}

Code:

<span id="navi_unten" style="position:absolute; top:220px; left:0;">navi_unten</span>

<span id="footer" style="position:absolute; bottom:0px; left:0;">footer</span>

Design im Firefox okay, im IE verschoben, pls HELP

Fiftytwo

Grünschnabel

Anhänge

Maik

Anhänge

Neue Beiträge