DIV-Container links verschoben, aber warum?

[tkliesch]

Hi,

ich habe folgendes Problem:
Ich habe eine HTML Seite und ein CSS dafür. In dem CSS habe ich ein div "content_left" und ein div "Content right". Content right floated, so dass ich beide nebeneinander habe. Durch Margin attribute habe ich beide so ausgerichtet, dass sie oben unter dem div "title" bündig erscheinen. Wenn ich mir die Seite mit IE8 anschaue, passt das auch. In IE7 und IE6 aber ist der div container content_left nach unten verschoben, so dass div "content_right" weiter oben auf der Seite beginnt als div "content_left". Hier ist der Quelltext des CSS und der entsprechende Ausschnitt aus dem HTML File (etwas vereinfacht. D.h ich habe Textblöcke im HTML weggelassen, die in den Divs noch stehen) . Hat irgendwer eine Idee woran das liegen könnte?

CSS-File Auszug:

@charset "windows-1252"; 

body 
{

background-color:#F3FBFA;

}

#Inhalt
{
width:900px; 
margin-left:auto;
margin-right:auto;

}

h1 {font-size:150%;color:#black;margin:0px;}
h2 {font-size:120%;color:#black;}
h3 {font-size:medium;color:#black;}
p {margin-top:0px;}




#Footer {
width:860px;
height:0px;
padding: 0px 0px 0px 0px;
margin:0px 0px 0px 0px;
text-align:center;
font-size:12px; 
font-family:Verdana; 
background-color:#F3FBFA;
color:black; 
}

#Logo {
width:90px;
height:65px;
margin: 0px 20px 0px 0px; 
background-color:#DEDEDE;
float:right;
}

#Block {
width:780px;
height:65px; 
padding: 15px 0px 10px 0px;
margin:0px 0px 0px 20px;
text-align:center;
font-size:40px; 
font-family:Verdana; 
background-color:#808080;
color:silver; 

}


#title {
width:860px;
height:161px;
padding:0px 0px 0px 0px;
margin:0px 20px 0px 0px;
text-align:right;
float: right; 
background-color:#4B4B4B;
}


#menu {
width: 860px;
background-color:#576061;
text-align:left;
padding:12px 0px;
margin:0px 20px 0px 20px;
font-weight:bold;
font-size:16px; 

}

#content_left {
background-color:#D9F3F0;
padding-top:20px; 
padding-right:20px;
padding-bottom:250px;
padding-left:30px;

margin-top:213px; 
margin-right:335px;
margin-bottom:5px;
margin-left:20px;
color:#black;
font-family:Helvetica;
font-size:15px;
height:200px; 
} 

#content_right {
width: 275px;
height: 200px;
background-color:#FFFFFF; 
text-align: left;
padding-top:20px; 
padding-right:25px;
padding-bottom:250px;
padding-left:5px;

margin-top:10px; 
margin-right:20px;
margin-bottom:5px;
margin-left:30px;
color:#4a4d18;
float:right;
font-family:Helvetica;
font-size:14px; 
}

HTML-File Auszug:

<div id="content_right">
<img src="Sprechstunde_IIIa.jpg" alt="Sprechstunde">
</div>

<div id="content_left">
<h2>Willkommen auf meiner Seite</h2>
</div>
<p><br>

 

[Maik]

Hi,

wenn die Seitendarstellung im IE8 und den anderen standardkonformen Browsern (FF, Opera, Safari, Google-Chrome, u.ä.) soweit stimmt, die bei mir der margin-top:213px-Regel für #content_left folgend, beide Boxen nebeneinander nach unten versetzen, IE6 und IE7 hingegen aber den rechten Block gemäß seiner margin-top:10px-Regel zum oben Fensterrand hin ausrichten, leg für sie ein gesondertes CSS mit der entsprechenden margin-top-Regel an, das du ihnen per "Conditional Comment" übergibst. Mit dem Operator "lt" (= less-than = kleiner als) wird IE8 von dieser CSS-Formatierung ausgeschlossen.

<link href="..." rel="stylesheet"  type="text/css">
<!--[if lt IE 8]>
    <style type="text/css">#content_right { margin-top:213px; }</style>
<![endif]-->

Andernfalls wäre es hier eine Überlegung wert, die beiden Blöcke in einen übergeordneten DIV-Block einzubetten, um stattdessen für ihn den gewünschten oberen Außenabstand festzulegen. Auf diese Weise kommen die beiden Browser nämlich erst garnicht in Versuchung, den beiden diskrepanten margin-top-Regeln Folge zu leisten, denn genau das geschieht derzeit mit deinem CSS, und hat die vertikale Verschiebung der beiden Boxen zueinander zur Folge.

<div id="content_wrap">
     <div id="content_right">
          <img src="Sprechstunde_IIIa.jpg" alt="Sprechstunde">
     </div>

     <div id="content_left">
          <h2>Willkommen auf meiner Seite</h2>
     </div>
</div>

#content_wrap {
margin-top:213px;
}

#content_left {
background-color:#D9F3F0;
padding-top:20px;
padding-right:20px;
padding-bottom:250px;
padding-left:30px;

margin-right:335px;
margin-bottom:5px;
margin-left:20px;
color:#black;
font-family:Helvetica;
font-size:15px;
height:200px;
}

#content_right {
width: 275px;
height: 200px;
background-color:#FFFFFF;
text-align: left;
padding-top:20px;
padding-right:25px;
padding-bottom:250px;
padding-left:5px;

margin-right:20px;
margin-bottom:5px;
margin-left:30px;
color:#4a4d18;
float:right;
font-family:Helvetica;
font-size:14px;
display:inline;
}

mfg Maik