✔ IE: verhält sich bei position:relative u. padding nicht richtig

[BenschM@ster]

Hi allerseits,

und mal wieder habe ich ein Problem mit dem Internet Explorer.
Unfassbar.

Ich habe ein Div in einem Div.
Das innere Div soll ein dünner farbiger Streifen oben am äußeren Div sein für die Überschrift.
Allerdings hat das äußere Div eine Padding Angabe von 3px.
Aus diesem Grund habe ich dem inneren Div die Angabe position:relative und top:-3px sowie left:-3px gegeben, da ansonsten rund um das innere DIV ein weißer Rand von 3px wäre.
Gleichzeitig habe ich das innere Div um 6px vergrößert.

Im FF ist alles super.
Im Internet Explorer dagegen verhält er sich leider nicht korrekt. Auf derrechten Seite ist nun ein weißer Rand von 6px.

Wie kann ich dagegen vorgehen?

 

[Maik]

Hi,

zeig doch bitte mal den dazugehörigen Quellcode.

 

[BenschM@ster]

Alles klar.
CSS hier:

/*DIVs für die Backend-News*/
div.news_left {
border: 1px black solid;
padding: 3px;
width: 340px !important;
width: 334px;
font-family: Arial;
float:left;
font-size: 12px;
margin-bottom: 20px;
}

div.news_right {
border: 1px black solid;
padding: 3px;
width: 340px !important;
width: 334px;
font-family: Arial;
float:right;
margin-bottom: 20px;
}
/*
div.news_right {
border: 1px black solid;
} */

div.news_header {
width: 346px;
background-color: #deddff;
position:relative;
top: -3px;
left: -3px;
font-size: 14px;
}

for($i=0;$i<$anz;$i++) {
	list($time_posted,$ueberschrift,$nachricht) = mysql_fetch_row($sql);
	if($schalter == 0) {
		echo '
			<div class="news_left">
                          <div class="news_header">'.$ueberschrift.'</div>
                           '.$nachricht.'
                         </div>
                 ';
		$schalter = 1;
         }
         else {
		echo '
			<div class="news_right">
                          <div class="news_header">'.$ueberschrift.'</div>
                           '.$nachricht.'
                         </div>
                 ';
         	$schalter = 0;
         }


}

Hoffe das ist ok mit PHP. Könnte jetzt auch einen Ausschnitt aus dem generierten Quelltext zeigen...

Das Problem ist übrigens, dass der Internet Explorer das äußere Div ausdehnt.
Sprich die Größenangaben sind dann völlig egal, er macht das immer 6px größer als das innere Div.

 

[Maik]

Das ist ja mal eine verzwickte Geschichte.

Und wenn du auf die padding-Deklaration für das äußere DIV, sowie die Positionierung des inneren DIVs verzichtest?

Falls der nachfolgende Inhalt den horizontalen Innenabstand besitzen soll, könntest du ihn ja entsprechend formatieren.

 

[hela]

Als Tipp: Versuch es mal mit negativen margin-Werten statt der Positionierung. Kann mich erinnern, dass ich mal ähnliche Probleme hatte und es damit funktionierte. Leider habe ich die Einzelheiten nicht mehr parat.

 

[BenschM@ster]

Dankesehr ihr beiden.
Hab mich jetzt für die Variante entschieden das Padding wegzulassen.
Allerdings fuchst es mich immer, wenn etwas nicht so klappt wie ich es will und ich klein beigeben muss :-/

Aber naja für den Internet Explorer sollte man sich die Arbeit sparen.

Vielen Dank.
Gruß,
Ben