IE macht Probleme bei float:left, pos: absolute

seventyfour · 27.05.2006, 01:03

Hallo Community.

Mir fällt nichts mehr ein. Ich bin quasi am Ende und gebe mich geschlagen.

Schaut Euch das hier an. (am besten erst im FF, dann im IE)

Es geht um das Bild "Consulting for Success" links unten. Im Firefox, im Opera, sogar im Netscape funktionierts. Im IE... ...nicht.

Ich verstehs nicht, ich weiß nicht warum und mir sind jetzt wirklich alle Ideen ausgegangen.

Ich weiß, dass wenn ich das float:left aus dem Linken Teil nehme, dann wird das Bild angezeigt. Aber ich brauche das float:left... (In den linken Teilen werden faux-colums kommen, in die Mitte der Content)

Könnt Ihr mir sagen an was es liegt? Neue Ideen/ Ansätze.

Bin echt um jede Hilfe dankbar.

Hier der Kot:

HTML-Code:

<style type="text/css">
<!--
#container {
/*umfasst left und middle*/
/*muss absolut positioniert sein. sonst gibts Probleme im NS*/
  position: absolute;
  width: 950px;
  float:left;
  border: 1px solid yellow;
}

#left {
/* linke navigation */
  position: relative;
  width: 248px;
  float:left; 
  border: 1px solid red;
}

#middle {
/*Inhalt */
  position: relative;
  float:right;
  width: 698px;
  border: 1px solid blue;
}

#image {
/*Soll immer am linken unteren Rand des Containers erscheinen*/
position: absolute; 
bottom: 0px; 
left: 0px; 
z-index: 100;
}
-->
</style>

Code:

<body> 
<div id="container"> 

<div id="image"> 
<img  src="http://www.traum-projekt.com/forum/images/consulting_for_success.gif" width="148" height="20" border="0" alt="" />
</div>

<div id="left" style="">
 left   
</div>

<div id="middle">
 Mitte 
</div>

</div>

</body>

schöne Grüße. M

hero-master · 27.05.2006, 09:44

Hi

ich kann dir leider nicht sagen woran das liegen könnte. WAs sich der IE wieder dabei denkt.
Aber wenn du das Div mit dem Bild in HTML unter den Divs #left und #middle packst, dann klappt das auch im IE

Ich hätte da noch einiges geändert:

HTML-Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>{empty}</title>
 <style type="text/css">
#container {
/*umfasst left und middle*/
/*overflow:auto cleart die floats quasi*/
  width: 950px;
  position:relative;
  overflow:auto;
  border: 1px solid yellow;
}

#left {
/* linke navigation */
  width: 248px;
  float:left;
  border: 1px solid red;
}

#middle {
/*Inhalt */
  float:right;
  width: 698px;
  border: 1px solid blue;
}

#image {
/*Soll immer am linken unteren Rand des Containers erscheinen*/
position: absolute;
bottom: 0px;
left: 0px;
z-index: 100;
}
</style>
</head>
<body>

<div id="container">

  <div id="image">
    <img  src="http://www.michaelhuebl.com/tp/images/consulting_for_success.gif" width="148" height="20" border="0" alt="" />
  </div>

  <div id="left">
    left
  </div>

  <div id="middle">
    Mitte Anfang<br /><br /><br /><br />gelber Rand: div-ID: Container<br />roter Rand: div-ID: Left<br />blauer Rand: div-ID: Middle<br /><br /><br /><br />Mitte Ende
  </div>
  <div style="clear:both"></div>
  <div id="image">
    <img  src="http://www.michaelhuebl.com/tp/images/consulting_for_success.gif" width="148" height="20" alt="" />
  </div>
</div>

</body>
</html>

seventyfour · 27.05.2006, 12:38

Hey, danke für deine Antwort!

Das pure Runtersetzen des Bildes hatte soweit ich mich erinnern kann keine Wirkung.
Was allerdings hilft ist das clear:both!

Also jetzt funktionierts wenigstens. Trotzdem verstehe ich den IE hier absolut nicht.

Aber danke für deine Antwort!

Boris · 27.05.2006, 14:37

Zitat:

Trotzdem verstehe ich den IE hier absolut nicht

Und ich verstehe das hier nicht:

Zitat:

/*muss absolut positioniert sein. sonst gibts Probleme im NS*/

Welcher "NS", und welche Version? Und was für ein Problem ist das?

Wenn man das nämlich anders lösen kann, macht der IE garantiert auch keine Probleme mehr. float: left und position: absolute klingt nach keiner guten Idee

seventyfour · 27.05.2006, 15:10

Moin.

Das ganze Konstrukt ist etwas verschachtelter als das obige Beispiel. Ich hatte es auf dem NS7 getestet, weil ich weiß, dass die Kundin eben diesen Browser auch checkt. Irgendwas hatte sich dann dort bei pos:absolute verschoben. In der "wirklichen" Version stehts auf relative. Waren einfach ein paar Ansätze die ich ausgetest habe.

Ich werde das bei Gelegenheit nochmal komplett auseinander nehmen, und dann hier posten. Momentan funktionierts erstmal.