✔ IE: Bild + Div auf inline -> Lücke zwischen beiden

[Layna]

Hallo .
Ich habe ein "kleines" positionierungssystem mit dem IE.
Und zwar baut er bei folgendem HTML-code:

	<div id="subhead">
		<img src="img/bild_oben_links.jpg" alt="Edle Speisekarten" height="229" width="307" class="inline" />
		<div id="secondary" class="inline">
			<img src="img/panorama_oben.jpg" alt="Panorama" height="112" width="593" />  
			<div id="nav2"> nav 2</div>
			<div id="special"> special header</div>
		</div>
	</div>

mit den zugehörigen CSS-anweisungen:

html, body, div, p, h1, h2, h3, h4, h5, h6, img {
	margin: 0px;
	padding: 0px;
	border: none;
}

div {
	position: relative;
}


	#secondary{
		height: 229px;
		position: absolute;
		top: 0px;
		background-color: red;
	}
	
		#nav2 {
			height: 60px;
		}
		
		#special{
			height: 56px;
		}

.inline {
	display: inline;
}

Eine Lücke zwischen das Bild und das ansonsten erfolgreich daneben positionierte div secondary.
Weiss jemand wie ich dem IE das abgewöhnen kann? Der Firefox macht es so wie ich es mir dachte...

Layna

 

[Maik]

Hi,

entweder definierst du für das DIV #secondary die entsprechende linke Position:

#secondary{
height: 229px;
position: absolute;
top: 0px;
left:307px;
background-color: red;
}

oder du setzt den folgenden "Conditional Comment" hinter dem normalen Stylesheet ein:

<style type="text/css">
 ...
</style>
<!--[if lte IE 7]>
<style type="text/css">
#secondary {
margin-left:-4px;
}
</style>
<![endif]-->

 

[Layna]

Ah, danke .
Sag mal, woher weisst du das das wirklich 4 Pixel waren? Ein weiterer bekannter IE-bug von dem ich noch nichts gehört habe?

 

[Maik]

Hi,

ich hatte es zunächst mit 3 Pixel versucht, aber da blieb noch ein "Zipfel" offen ;-)