Float:right fehler im IE6

gertnaster · #1 (**permalink**) 04.01.2011, 13:12

hey ho, ich möchte folgendes darstellen:

BILD

im firefox bekomme ichs hin. der selbe code sollte auch im ie8 laufen. im ie6 allerdings passts nicht und ich weis nicht wie.
im grunde soll später im blauen bereich text so sein, dass er um den roten rumläuft. und da wo schwarz ist soll der text auch nicht hinkommen.

mein code sieht so aus.

Code:

<html>
     <head>
      <title>Example</title>
      <style type="text/css">
           div.wrapper{
               border:solid 1px #000000;
               height:50%;
               width:50%;
           }
           
           div.slide{
               float:right;
               border:solid 1px #FF0000;
               height:50%;
               width:50%;
           }
           
           div.platzhalter1{
               border:solid 1px #0000FF;
               height:30%;
           }
           
           div.platzhalter2{
               border:solid 1px #0000FF;
               height:70%;
               width:20%;
               float:left;
           }
           
           div.text{
               border:solid 1px #00FF00;
               width:80%;
           }
      </style>
     </head>
     <body>
      <div  class="wrapper">
            <div class="slide">   f
            </div>
            <div class="platzhalter1">
            </div>
            <div class="platzhalter2">
            </div>
            <div class="text">text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text
            </div>
        </div>
     </body>
   </html>

kann mir jemand mit dem i6-problem helfen? danke für die mühe

lg vom gerti

siliciumcarbid · #2 (**permalink**) 04.01.2011, 14:44

Mit einem Link in einigen Minuten

Könnte den code schon kopieren und dann speichern und so. aber dafür reicht die Zeit nicht bei der Arbeit

nevermind · #3 (**permalink**) 04.01.2011, 15:00

Doctype nicht vergessen...

cebito · #4 (**permalink**) 04.01.2011, 15:02

Gib dem Ding mal ein doctype und du wirst sehen, das auch der FF das nicht so darstellt wie du es willst. Mit floaten wird das ganze nix, einfach zu umständlich. Hier mal ne Lösung, wie es gehen kann, getestet in FF, Safari, Chrome und IE5.5-9 (ohne 7er):

HTML-Code:

<!doctype html>
<html>

<head>
	<title>Boxing</title>

	<meta charset="UTF-8" />
	<meta name="description" content="" />
	<meta name="author" content="" />
	<meta name="keywords" content="" />
<style type="text/css">
html,body{height:100%;}
html,body,div{margin:0;padding:0;}
#wrapper{position:relative;width:50%;height:50%;margin:20px auto;background:#000;}
#rot{position:absolute;top:0;right:0;width:66%;height:66%;background:#f00;}
#blau{position:absolute;bottom:0;left:0;width:66%;height:66%;background:#0085C9;}
#fake{float:right;height:48%;width:48%;margin:0 0 0.5em 1em;}
#blau p{padding:0.5em 1em;}
</style>
</head>

<body>
<div id="wrapper">
	<div id="blau"><div id="fake"></div><p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p></div>
	<div id="rot"></div>
</div>
</body>
</html>

gertnaster · #5 (**permalink**) 04.01.2011, 16:34

danke dir erstmal für die hilfe

dein beispiel hatte bei mir im internet explorer auch nicht funktioniert. der abstand zwischen text und oberer kante war nicht da.

das kann doch mit float nicht so schwer sein, ich habs nochmal anders gemacht. einfacher, funktionert im firefox. aber im ie das selbe problem. er setzt den gefloateten container nicht auf gleicher höhe an wie den wo der text laufen soll. er macht den gefloateten. und den nächsten haut er unten drunter.. hier mein neuer code.

HTML-Code:

<!doctype html>
<html>

<head>
	<title>Boxing</title>

	<meta charset="UTF-8" />
	<meta name="description" content="" />
	<meta name="author" content="" />
	<meta name="keywords" content="" />
<style type="text/css">
html,body{height:100%;}
html,body,div{margin:0;padding:0;}
#wrapper{
    width:600px;
    height:450px;
    background:#000;
    background-color:#000000;
    margin:auto;
}

div.slide{
    float:right;
    background-color:#FF0000;
    height:50%;
    width:50%;
    margin-left:5%;
    margin-bottom:5%;
}

div.text{
    background-color:#00FF00;
    height:80%;
    width:80%;
    padding-top:20%;
    padding-right:20%;
    text-align: justify;
}
</style>
</head>

<body>
<div id="wrapper">
    <div class="slide">
    </div>
    <div class="text">
            Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc,         </div>
    </div>
</div>
</body>
</html>

cebito · #6 (**permalink**) 04.01.2011, 16:47

Wo, wie ist kein Abstand? Screenshot? Der Abstand ist nur ein bissl kleiner beim 5er und 6er. Lässt sich ja aber auch ändern

fricca · #7 (**permalink**) 04.01.2011, 16:47

Damit das Float von .slide in .text hineinwirken kann, darf .text kein hasLayout haben. Also width + height weg -- width ist eh überflüssig und du willst doch nicht wirklich die Textbox bei einer Höhe von 80% abschneiden, oder?

gertnaster · #8 (**permalink**) 04.01.2011, 17:32

@cebito: bei mir war wirklich garkein abstand. siehe hier
Bild

@fricca: vielen dank, daran lags. haslayout sagt mir grad nichts, werds gleich nachlesen, danke!!! (nee die 80% war willkührilich gewählt, nur zum testen)

nur noch ein kleines problem bei der geschichte. die abstände (padding-top & padding-right) werden im ie fast doppelt so groß angezeigt wie im firefix. weis jemand warum?

lg vom gerti

fricca · #9 (**permalink**) 04.01.2011, 17:37

Zitat:

nur noch ein kleines problem bei der geschichte. die abstände (padding-top & padding-right) werden im ie fast doppelt so groß angezeigt wie im firefix.

Bei mir nicht. Welcher IE?
Poste jetzt bitte einen Link auf deinen Code, siehe auch die Hinweise für Fragende.

BTW: Es wäre angenehm, wenn du deine Shift-Taste reparieren könntest. Deine Beiträge sind so mühsam zu lesen.

gertnaster · #10 (**permalink**) 04.01.2011, 21:59

Problem erledigt. Sowohl das Abstand-Problem, als auch das Leertastenproblem

Ich hab mal Cash im IE geleert, danach gings. Nochmals vielen Dank!!

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Redesign für Steiner Cycling Team	pkipper	Site- und Layoutcheck	11	09.02.2011 12:25
Float:right.......Ääähhh - Wie war das nochmal beim IE6?	Stadtmensch	CSS	7	27.11.2008 14:17
IE6 fehler	dominik26	CSS	1	13.08.2008 02:24
Fehler im IE6	Fuzzel	CSS	13	01.10.2007 16:42
Immer noch ein Fehler im IE6 bei 3 faux col design	Krischu	CSS	3	24.05.2007 11:07