Mr.Float: IE Float wird von Container eingeschlossen

SELF-Forum

IE Float wird von Container eingeschlossen

Mr.Float
– Informationen zu den Bewertungsregeln

IE/Win schliesst ein Float "automatisch" innerhalb eines Containers ein.

Wie verhindere ich das? Soll bedeuten ich möchte, dass mein Float so richtig schön aus dem umgebenden Container raushängt.

Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. IE Float wird von Container eingeschlossen

    dr.colossos
    – Informationen zu den Bewertungsregeln

    Hi,

    wenn ich dich richtig verstehe, was anhand der etwas unpräsisen Problembeschreibung nicht verwunderlich wäre, dann suchst du nach "overflow:visible" ... musst im Container angeben.

    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. IE Float wird von Container eingeschlossen

      Steel
      – Informationen zu den Bewertungsregeln

      Hi!

      wenn ich dich richtig verstehe, was anhand der etwas unpräsisen Problembeschreibung nicht verwunderlich wäre, dann suchst du nach "overflow:visible" ... musst im Container angeben.

      Ich denke eher (er spricht von float also gehe ich von einem gefloatetem Element aus) er moechte das sein Element aus dem Elternelement verschwindet. Positionsangaben machen sich da gut.

      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

  2. IE Float wird von Container eingeschlossen

    Dr.Float
    – Informationen zu den Bewertungsregeln

    Verdeutlichen wir das Ganze doch mal etwas mit:

    http://www.bilderhoster.at/files/BCssH87WG5GT.gif

    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. IE Float wird von Container eingeschlossen

      Mr.Float
      – Informationen zu den Bewertungsregeln

      Verdeutlichen wir das Ganze doch mal etwas mit:

      http://www.bilderhoster.at/files/BCssH87WG5GT.gif

      ähmmm... FF gut, IE böse

      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

      1. IE Float wird von Container eingeschlossen

        Axel Richter
        – Informationen zu den Bewertungsregeln

        Hallo,

        Verdeutlichen wir das Ganze doch mal etwas mit:
        http://www.bilderhoster.at/files/BCssH87WG5GT.gif
        ähmmm... FF gut, IE böse

        Ja, aber was hat Dich davon abgehalten das entsprechende HTML/CSS zur Verfügung zu stellen? So kann man nur raten, was Du da in etwa gemacht hast.

        Möglichkeit: Dein "Elternelement // DIV" hat die berühmte MS-Eigenschaft hasLayout dadurch, dass es eine Breitenangabe hat. Elemente mit hasLayout verhalten sich so, dass sie einen eigenen block formatting context erzeugen. Diese Elemente verhalten sich dann mit eingelagerten Floats so, wie Du es für den IE zeigst. Üblicherweise will man das so auch für die standardkonformen Browser und erzeugt deshalb für diese extra block formatting contexts. Siehe http://aktuell.de.selfhtml.org/weblog/css-spaltenlayout#wunderwaffe-overflow.

        Eine Lösung für Dein Problem im IE wäre dann, nicht das "Elternelement // DIV" die Breite vorgeben zu lassen, sondern dessen umgebendes Element (ggf. BODY). Oder eben noch ein solches Element drumherum zu legen.

        viele Grüße

        Axel

        Beitrag melden
        –
        Informationen zu den Bewertungsregeln

        1. IE Float wird von Container eingeschlossen

          Mr.Float
          – Informationen zu den Bewertungsregeln

          Hallo Axel,

          vielen Dank für Deine Antwort.

          Hier mal der Code:

            
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"  
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">  
<html xmlns="http://www.w3.org/1999/xhtml">  
  
<head>  
<title></title>  
<!-- Meta Tags -->  
<meta http-equiv="content-type" content="application/xhtml+xml; charset=utf-8" />  
  
<!-- CSS -->  
<link rel="stylesheet" href="css/standard1.css" media="screen,projection" type="text/css" />  
<link rel="stylesheet" href="" media="print" type="text/css" />  
</head>  
  
<body>  
  
<div id="main">  
 <span class="floatleft"></span>  
 <h1>Herzlich Willkommen!</h1>  
 <p>viel text</p>  
 <span class="floatright"></span>  
 <p>nochmal viel text</p>  
 <p><a href="http://www.internet.de" title="Internetseite">http://www.internet.de</a></p>  
</div>  
  
</body>  
</html>

          und hier das entsprechende CSS File:

            
body,html {  
background:#000;  
margin:0;  
padding:0;  
}  
  
  
html {display:table;  
 width:100%;  
 height:100%;}  
  
body {display:table-cell;  
 vertical-align:middle;  
 color:#fff;  
 font-size:62.5%;}  
  
#main {margin:auto;  
 border:1px solid #fff;  
 max-width:70em;  
 padding:2em;  
 position:relative;  
}  
  
  
h1 {  
font-size:1.6em;  
line-height: 0.2;  
font-weight:400;  
font-family:"Lucida Sans Unicode", Geneva, arial, sans-serif;  
letter-spacing:2px;  
}  
  
  
p {  
font-size:1.4em;  
}  
  
span.floatleft{  
float:left;  
background-image:url(../images/bild1.jpg);  
width:217px;  
height:75px;  
margin-right: 10px;  
}  
  
  
span.floatright{  
float:right;  
background:#000 url(../images/bild2.jpg) 5px 5px no-repeat;  
width:330px;  
height:190px;  
margin-top:0px;  
margin-left:10px;  
margin-right:20px;  
border-top:1px solid #888;  
border-left:1px dashed #999;  
border-right:1px dashed #999;  
border-bottom:1px solid #aaa;  
padding:5px;  
}  
  
p a {  
color:#fff;  
}  
  
  
/*IE-Korrektur*/  
* html body {margin:10em;font-size:72.5%;width:70em;}

          Dank Deinem Tip, mit der Breitenangabe im body-Tag statt im Container, verhält sich das rechts floatende Element nun auch normal.

          Der weisse Rand des #main DIV liegt nun allerdings über dem im rechts floatenden Element enthaltenem Bild.

          Wie erreiche ich, dass das rechts floatende Element wirklich über dem #main DIV liegt?

          Das verändern der Stapelreihenfolge bewirkt hier gar nix.

          Beitrag melden
          –
          Informationen zu den Bewertungsregeln

          1. IE Float wird von Container eingeschlossen

            Mr.Float
            – Informationen zu den Bewertungsregeln

            Es soll also aussehen wie im linken Bild:
            http://www.bilderhoster.at/files/BCssH87WG5GT.gif

            Jetzt geht der Rahmen aber durch den orangenen bereich, obwohl er dahinter liegen müsste.

            Problem tritt natürlich nur im IE auf.

            Beitrag melden
            –
            Informationen zu den Bewertungsregeln

            1. IE Float wird von Container eingeschlossen

              Axel Richter
              – Informationen zu den Bewertungsregeln

              Hallo,

              Es soll also aussehen wie im linken Bild:
              http://www.bilderhoster.at/files/BCssH87WG5GT.gif

              Wenn es wirklich nur um dieses Aussehen geht, machst Du es Dir zu kompliziert. Jedenfalls bekomme ich das einfacher hin und ohne Browserprobleme und ohne CSS-Hacks.

                
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"  
        "http://www.w3.org/TR/html4/strict.dtd">  
<html>  
<head>  
<title>Beschreibung der Seite</title>  
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">  
<style type="text/css">  
p { margin:0; padding:0; padding-bottom:1em; }  
body { width:35em; margin:auto; }  
  
#Elternelement { background-color:#00E3FF; margin:0; margin-top:50px; padding:1em; border:1px solid; }  
#Bild1 { float:left; width:200px; height:100px; }  
#Bild2 { clear:left; float:right; width:250px; height:300px; }  
#Text1 { margin-left:220px; }  
#Text2 { margin-right:270px; }  
</style>  
</head>  
<body>  
  
<div id="Elternelement">  
  
<img id="Bild1" src="Beispiel.jpg" alt="ein Bild">  
<div id="Text1">  
<p>Text Nummer 1, der neben dem Bild Nummer 1 fließt. Text Nummer 1, der neben dem Bild Nummer 1 fließt.</p>  
<p>Text Nummer 1, der neben dem Bild Nummer 1 fließt. Text Nummer 1, der neben dem Bild Nummer 1 fließt.</p>  
</div>  
  
<img id="Bild2" src="Beispiel.jpg" alt="ein Bild">  
<p id="Text2">Text Nummer 2, der neben dem Bild Nummer 2 fließt. Text Nummer 2, der neben dem Bild Nummer 2 fließt. Text Nummer 2, der neben dem Bild Nummer 2 fließt. Text Nummer 2, der neben dem Bild Nummer 2 fließt. Text Nummer 2, der neben dem Bild Nummer 2 fließt.</p>  
  
</div>  
</body>  
</html>

              viele Grüße

              Axel

              Beitrag melden
              –
              Informationen zu den Bewertungsregeln

          2. IE Float wird von Container eingeschlossen

            Axel Richter
            – Informationen zu den Bewertungsregeln

            Hallo,

            und hier das entsprechende CSS File:
            [code lang=css]

            #main {margin:auto;
            border:1px solid #fff;
            max-width:70em;
            padding:2em;
            position:relative;
            }

            Wofür ist hier position:relative nötig? Peekaboo-Bug Bekämpfung?

            span.floatright{
            float:right;
            background:#000 url(../images/bild2.jpg) 5px 5px no-repeat;
            width:330px;
            height:190px;
            margin-top:0px;
            margin-left:10px;
            margin-right:20px;
            border-top:1px solid #888;
            border-left:1px dashed #999;
            border-right:1px dashed #999;
            border-bottom:1px solid #aaa;
            padding:5px;
            }

            Wenn position:relative im DIV#main nötig ist, muss es hier auch stehen, um dieses Element in den selben z-Layer-Kontext zu heben, wie das DIV#main.

            viele Grüße

            Axel

            Beitrag melden
            –
            Informationen zu den Bewertungsregeln