IE fügt 2px Zwischenraum ein

Status
Nicht offen für weitere Antworten.
H

Harzteufel

Erfahrenes Mitglied
Hallo, ich habe in folgendem Code das Problem, dass der IE 7 einen Zwischenraum von 2px einfügt, den ich aber nicht haben möchte. Im Firefox ist alles bestens. Wie bekomme ich den Zwischenraum im IE weg? Bin über Hilfe dankbar!

HTML: 
<body>
<div id="container">
	
	<div id="header">
		<img src="img/header_left.jpg">	
	</div>
  
	<div id="left">
	  <img src="img/navi_logounten.jpg"><br />
	  <h2>Menu left</h2>
	</div>
	
	<div id="content">
		<h2>Content</h2>
	</div>

	<div id="footer">
		<img src="img/footer_left.jpg">Footer
	</div>

</div>
</body>

CSS-ANGABEN:

body {
background-color: #D2DFB8;
background-image: url(img/bg.jpg);
background-repeat:repeat-x;
font-size: 11px;
font-family: Verdana, Arial, Tahoma, Times;
color:#564b47;
padding:0;
margin:0;
}
h1 {
font-size: 11px;
text-transform:uppercase;
background-color: #E0A3B7;
border-top:1px solid #564b47;
border-bottom:1px solid #564b47;
padding:5px 15px;
margin:0
}
h2 {
font-size:20px;
font-weight: normal;
padding: 5px 10px;
margin:0;
}
#container {
width: 980px;
margin: 0 auto;
background-color: #FC0;
}
#header {
background-image: url(img/header_bg.gif);
background-repeat:repeat-x;
text-align: left;
padding: 0;
margin: 0 auto;
}
#content {
background-color: #ffffff;
padding: 0px;
margin-left: 230px;
}
div#content {
min-height:500px;
height:expression(this.scrollHeight > 500 ? "auto":"500px");
}
#left {
float: left;
background-image: url(img/navi_bg.jpg);
background-repeat:repeat-y;
width: 230px;
margin: 0;
padding: 0;
}
div#left {
min-height:500px;
height:expression(this.scrollHeight > 500 ? "auto":"500px");
}
#footer {
clear: both;
background-image: url(img/footer_bg.gif);
background-repeat:repeat-x;
line-height: 100px;
margin: 0;
}
 
Der IE fügt zwischen dem Header-Div und den beiden Divs "left" und "content" die Lücke ein und nocheinmal ganz am Ende, also unter dem Footer!
 
Code: 
img { display:block; }
stellt die Interpretierung bzw. Ausgabe der sog. "Whitespaces" (Zeilenumbrüche, Tab-Einrückungen) rund um das <img>-Tag von seitens aller IE-Versionen ab.
 
Danke, die Zwischenräume sind weg. Leider habe ich jetzt ein anderes Problem und zwar wird unter dem Footer ein neuer Zwischenraum eingefügt... Dieser ist genau so hoch wie der Footer. Woran liegt das?
 
Das Element verhält sich nun wie ein Block-Element und erzeugt im Textfluss einen Absatz.

Zeichne daher dieses Grafikelement mit der float:left-Eigenschaft aus, damit es vom nachfolgenden Text umflossen wird.

Code: 
img.block { display:block; }
img.float { float:left; }
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück