Überlappende DIV's im IE 7

[HoschMOsch]

Hallo,

nachdem ich nun tagelang versuche hier das Problem zu lösen, muss ich jetzt einfach mal auf euch Profis zurückgreifen.

  
/******************************************************* LAYOUT BEGIN*/  
#div_left {  
	float:left;  
	width:200px;  
	}  
  
#div_right {  
	float:right;  
	width:200px;  
	margin-right:-4px;  
	}  
  
#div_content{  
	width:598px;  
	margin-left:181px;  
	}  
#div_container {  
	width:960px;  
	height:auto;  
	margin-left:0;  
	margin-right:auto;  
	text-align:left;  
	}  
#div_body {  
	height:auto;  
	}  
  
#div_right-top{  
	background-image:url('../../images/right-top.jpg');  
	background-repeat:no-repeat;  
	height:33px;  
	}  
  
#div_right-middel{  
	background-image:url('../../images/right-middel.jpg');  
	background-repeat:repeat-y;  
	height:auto;  
	}  
#div_right-bottom{  
	background-image:url('../../images/right-bottom.jpg');  
	background-repeat:no-repeat;  
	height:20px;  
	}  
#div_left-menu-top{  
	background-image:url('../../images/left-top.jpg');  
	background-repeat:no-repeat;  
	height:37px;  
	}  
  
#div_left-menu-middel{  
	background-image:url('../../images/left-middel.jpg');  
	background-repeat:repeat-y;  
	height:auto;  
	}  
  
#div_left-menu-bottom{  
	background-image:url('../../images/left-bottom.jpg');  
	background-repeat:no-repeat;  
	height:20px;  
	}  
  
  

Hier das HTML Gerüst

  
<div id="div_body">  
		<div id="div_left">  
			<div id="div_placeholder-left"></div>  
			<div id="div_left-menu-top"></div>  
			<div id="div_left-menu-middel">  
				<div id="div_mainmenu">###MAINMENU###</div>  
			</div>  
			<div id="div_left-menu-bottom"></div>  
		</div>  
		<div id="div_right">  
			<div id="div_placeholder-right"></div>  
			<div id="div_right-top"></div>  
			<div id="div_right-middel">  
				<div id="div_options">  
					<ul>  
						<li>###PRINT###</li>  
						<li>###PDFPRINT###</li>  
						<li>###TIP###</li>  
  
					</ul>  
				</div>  
			</div>  
			<div id="div_right-bottom"></div>  
		</div>  
		<div id="div_content">  
			<div id="div_content-top">  
				<div class="placeholder"></div>  
				<span class="headline">###HEADLINE###</span>  
			</div>  
			<div id="div_content-middel">  
				###CONTENTAREA###  
				<hr class="endofline"/>  
				<a title="Zum Seitenanfang" class="nachoben" href="#top"></a>  
			</div>  
			<div id="div_content-bottom"></div>  
		</div>  
	</div>  
  

Das Problem ist das die Layout Elemente "left" "right" "middel" gefloted sind. Die Hintergrundbilder passen nicht genau aufeinander da ich noch ein schattenverlauf habe. deswegen hab ich versucht mit negativen margin einstellungen die bilder zusammenzupuzzel. das funktioniert auch im IE8 und ich Firefox. nur im IE7 wird der mittlere teil weit nach unten geschoben.

Hat jemand ein Tip ?

gruß Hoschie

[apsel]

Om nah hoo pez nyeetz,

verwende ein CSS-Hack um die Werte für den IE7 anzugeben.

Matthias

[HoschMOsch]

Om nah hoo pez nyeetz,

verwende ein CSS-Hack um die Werte für den IE7 anzugeben.

Matthias

Danke für die Antwort, aber was meinst du damit ?
Eine Browserweiche hab ich schon integriert, falls du das meinst.

gruß Hoschie

[apsel]

Om nah hoo pez nyeetz,

foo{bar:baz;} /* Eigenschaften für alle Browser */  
*+html foo{bar:baz_1;} /* geänderte Eigenschaft für IE7 */

Matthias

[HoschMOsch]

Om nah hoo pez nyeetz,

foo{bar:baz;} /* Eigenschaften für alle Browser */

+html foo{bar:baz_1;} / geänderte Eigenschaft für IE7 */

>   
>   
> Matthias  
  
Also wie gesagt es geht nicht darum wie ich eigenschaften speziel für den IE aufschreibe.. habe ja eine Browserweiche.  
  
Es gehts um die Eigenschaften selbst. 

[ChrisB]

Hi,

Das Problem ist das die Layout Elemente "left" "right" "middel" gefloted sind.

Klassen/IDs für Elemente nach deren derzeit gewünschter Darstellung zu vergeben, anstatt nach ihrer Bedeutung, ist ein kleines Armutszeugnis.
Die falsch gewählten Bezeichner nicht mal richtig schreiben zu können, ist ein größeres :-)

MfG ChrisB