Frangoo: Automatische Breite im IE7 bei absol. Elementen mit float. Kind.

SELF-Forum

Automatische Breite im IE7 bei absol. Elementen mit float. Kind.

Frangoo
– Informationen zu den Bewertungsregeln

Hi,

ich verstehe grade nicht, was der IE7 genau falsch macht und wie ich diesen Bug richtig googeln soll um einen Workaround zu finden.

Meine Situation:

Ich habe ein DIV, absolut positioniert. Höhe fix, Breite soll sich dem Inhalt anpassen. Darin weitere Elemente,.... alles kein Problem, SOLANGE ich nicht eins oder mehrere der Kindelemente mit einem Float versehe - dann nimmt das Eltern-DIV (was ja absolut ausgerichtet ist) im IE7 (wahrscheinlich auch IE6, nicht getestet) die gesamte Breite des Browsers ein.

Was passiert da!?
Hat jemand von euch schonmal was gehabt?

Danke im Voraus,

Frangoo :)

Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. Automatische Breite im IE7 bei absol. Elementen mit float. Kind.

    ChrisB
    – Informationen zu den Bewertungsregeln

    Hi,

    Was passiert da!?

    Schauen wir uns gerne an, wenn du ein vollständiges, valides, auf's wesentliche reduziertes Online-Beispiel zeigst.

    MfG ChrisB

    --
    “Whoever best describes the problem is the person most likely to solve the problem.” [Dan Roam]
    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. Automatische Breite im IE7 bei absol. Elementen mit float. Kind.

      Frangoo
      – Informationen zu den Bewertungsregeln

      ...das kann ich gerne tun:

        
	#infobox {  
		position:absolute;  
		height:90px;  
		overflow:hidden;  
	}  
	#infobox div.text {  
		height:58px;  
		width:auto;  
		background-image:url(infobox-map.png);  
		background-repeat:no-repeat;  
		background-position:0 0;  
		float:right;  
	}  
	#infobox div.layoutElementCloser {  
		float:right;  
		background-image:url(infobox-map.png);  
		background-repeat:no-repeat;  
		background-position:0 -70px;  
		width:6px;  
		height:58px;  
	}  
	#infobox div.arrow {  
		width:10px;  
		height:10px;  
		margin:0 auto;  
	}	  


        
<div id="infobox">  
   <div class="layoutElementCloser"> </div>  
   <div class="text">  
	Ich bin ein infobox!  
   </div>  
  
   <div class="arrow"> </div>  
</div>

      Doctype:

      <!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">

      Ausser diesem enthält mein Document auch nichts anderes.

      Frangoo

      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

      1. Automatische Breite im IE7 bei absol. Elementen mit float. Kind.

        ChrisB
        – Informationen zu den Bewertungsregeln

        Hi,

        ...das kann ich gerne tun:

        Abgesehen davon, dass ich unter einem Online-Beispiel etwas verstehe, was man direkt per Klick auf einen Link ansehen kann ... wenn du uns schon Copy&Paste zumuten willst, dann poste das ganze doch bitte wenigstens an einem Stück und gleich in der richtigen Reihenfolge.

        MfG ChrisB

        --
        “Whoever best describes the problem is the person most likely to solve the problem.” [Dan Roam]
        Beitrag melden
        –
        Informationen zu den Bewertungsregeln

        1. Automatische Breite im IE7 bei absol. Elementen mit float. Kind.

          Frangoo
          – Informationen zu den Bewertungsregeln

          Hi Chris,

          Abgesehen davon, dass ich unter einem Online-Beispiel etwas verstehe,

          ja - ääh.. sorry :) Hatte das übersehen und alles auf den nötigsten Code generiert.

          Hier also das komplette Document:

            
<!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">  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
<title>infobox</title>  
<style type="text/css">  
	#infobox {  
		position:absolute;  
		height:90px;  
		overflow:hidden;  
		width:auto;  
	}  
	#infobox div.text {  
		height:58px;  
		width:auto;  
		background-color:#09F;  
		float:right;  
	}  
	#infobox div.layoutElementCloser {  
		float:right;  
		background-color:#F93;  
		width:6px;  
		height:58px;  
	}  
  
	#infobox div.arrow {  
		width:10px;  
		height:10px;  
		margin:0 auto;  
		  
	}	  
</style>  
</head>  
  
<body>  
  
<div id="infobox">  
	<div class="layoutElementCloser"> </div>  
	<div class="text">  
	Ich bin eine Infobox!  
    </div>  
  
    <div class="arrow"> </div>  
</div>  
  
  
  
  
</body>  
</html>

          Danke für deine Hilfe!!

          Gruß
          Frangoo

          Beitrag melden
          –
          Informationen zu den Bewertungsregeln

          1. Automatische Breite im IE7 bei absol. Elementen mit float. Kind.

            ChrisB
            – Informationen zu den Bewertungsregeln

            Hi,

            Hier also das komplette Document:

            Ja, Fehlverhalten des IE 7 per IETester nachvollziehbar.

            Keine spontane Lösungsmöglichkeit; höchstens ein Umbau des ganzen, so dass float entbehrlich wird, fällt mir ein (bspw. inline-block statt float).

            MfG ChrisB

            --
            “Whoever best describes the problem is the person most likely to solve the problem.” [Dan Roam]
            Beitrag melden
            –
            Informationen zu den Bewertungsregeln

            1. Automatische Breite im IE7 bei absol. Elementen mit float. Kind.

              Frangoo
              – Informationen zu den Bewertungsregeln

              Keine spontane Lösungsmöglichkeit;

              Okay, das hab ich schon befürchtet...
              (die üblichen IE-Fluchereien spare ich mir hier jetzt :-] )

              Danke fürs Drüberschauen!

              Gruß
              Frangoo

              Beitrag melden
              –
              Informationen zu den Bewertungsregeln