Bereich um einen float left und float right Bereich

andrew22 · 26.02.2007, 14:52

hi,

Warum setzt er im IE den Border und Bereich richtig aber im FIREFOX nicht

.

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <style type="text/css">



    body {width:50em;}

    .complete {
    	position: relative;
    	border: 1px solid black;
    	top: 7px;
    	bottom: 7px;
    	height: 100%;
		clear: both;
    }


    .floatleft {
        float:left;
        width:20em;
        background-color:red;
        display: inline;
    }

    .floatright {
        float:right;
        width:20em;
        background-color:yellow;
        display: inline;
     }

     .clear {
        clear:both;
        background-color:lime;
      }


    </style>
  </head>
  <body>
    


    Das Beispiel ist in seiner Breite durch width:50em; beschränkt.
    Dies hat rein optische Gründe und hat nichts mit dem Thema float zutun.
    Es bewirkt lediglich das dass Beispiel in einem gewissen Rahmen bleibt.
    </p>
   <div class="complete">
    <div class="floatleft">
    Dieser Absatz "fließt" mittels float nach
    links oben. Damit man selbiges sieht, ist die Breite des Absatz geändert.
    </div>

    <div class="floatright">
    Dieser Absatz "fließt" ebenfalls mittels float. Jedoch nach rechts oben.
    Damit man selbiges sieht, ist auch hier die Breite des Absatz geändert.
    </div>
   </div>

   <div class="complete">
   	<div class="clear">
   	Dieser Absatz beendet den Bereich in dem gefloatet wird.
   	Dies geschieht mittels clear.
    </div>
   </div>
  </body>
</html>

Also im IE setzt er den border richtig um den float left und float right bereich aber im Firefox nicht.

nikosch · 26.02.2007, 17:20

.complete ist ohne abolute Höhenangabe 0px hoch.

andrew22 · 26.02.2007, 17:22

Aber ich habe doch eine Höhe gesetzt.

Code:

height: 100%;

Also muss es im Firefox eine feste Höhe gesetzt werden ?

allerdings wäre die variable Höhe besser .

Welche Alternativen gibt es ?

zhx

nikosch · 26.02.2007, 17:29

Zitat:

Zitat von nikosch77

.ohne abolute Höhenangabe

was ist denn an 100% variabel?

Zitat:

Welche Alternativen gibt es ?

Das Div mit ausreichend Inhalt füllen. Dann entsteht im IE der nächste schöne Effekt...

andrew22 · 26.02.2007, 17:30

100 % sollte sich doch eigentlich nachdem Inhalt der Box richten

oder bin ich da falsch informiert ??

andrew22 · 26.02.2007, 17:33

habe eine Möglichkeit gefunden.

ich setzte einfach noch eine bottom class mit clear: both; in das den complete block unter dem float left und float right block dann funktioniert es ..

ist vielleicht nicht die schönste Lösung aber es geht

...

nikosch · 26.02.2007, 17:35

habe den letzten Beitrag editiert... ^^

phpdummi · 27.02.2007, 13:02

und es wart .. KOMPLEXER!
ich verhedder mich auch grad so richtig in css. sobald die dateien größer, also die css angaben mehr werden kommt man schnell mal durcheinnander. deshalb solltest du deine css dateien erstmal mit firefox prüfen und anschließend sachen für den ie fixen.
anstatt deshalb nach lösungen die für beide browser passen zu suchen fügst du ans ende der css datei speziel für den IE gemachte "zusätze" ein.
bsp:

Code:

/*Firefox*/
#kopf {
    min-height : 6em;
}

[..]

/*IE6*/
* html #kopf [
    height : 6em;
}

der für den IE7 gibt es *+ html #kopf

auch ganz hilfreich ist yaml -> http://www.yaml.de/

viel spaß noch

mAy^daY · 27.02.2007, 18:27

Zitat:

Zitat von phpdummi

der für den IE7 gibt es *+ html #kopf

einfach klasse was man hier so beim durchstöbern findet ^^
genau das habe ich gerade gesucht!

Danke, der IE treibt mich manchmal in den Wahnsinn........

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Thema bewerten
Thema bewerten:

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
float right von ie nicht übernommen	möchtegernchegga	HTML, Usability und Barrierefreiheit	3	16.08.2006 16:01
float: right; hängt unten raus		HTML, Usability und Barrierefreiheit	6	31.03.2005 14:17


Mister Ad PHP Code Flüsterer Registriert seit: 21.08.2005 Beiträge: 4682 PHP-Kenntnisse: Fortgeschritten

26.02.2007, 17:20
nikosch moderatives Dielektrikum Registriert seit: 21.05.2008 Beiträge: 35.987 PHP-Kenntnisse: Fortgeschritten	.complete ist ohne abolute Höhenangabe 0px hoch.

26.02.2007, 17:22
andrew22 Erfahrener Benutzer Registriert seit: 20.06.2003 Beiträge: 233	Aber ich habe doch eine Höhe gesetzt. Code: height: 100%; Also muss es im Firefox eine feste Höhe gesetzt werden ? allerdings wäre die variable Höhe besser . Welche Alternativen gibt es ? zhx

26.02.2007, 17:30
andrew22 Erfahrener Benutzer Registriert seit: 20.06.2003 Beiträge: 233	100 % sollte sich doch eigentlich nachdem Inhalt der Box richten oder bin ich da falsch informiert ??

26.02.2007, 17:33
andrew22 Erfahrener Benutzer Registriert seit: 20.06.2003 Beiträge: 233	habe eine Möglichkeit gefunden. ich setzte einfach noch eine bottom class mit clear: both; in das den complete block unter dem float left und float right block dann funktioniert es .. ist vielleicht nicht die schönste Lösung aber es geht ...

26.02.2007, 17:35
nikosch moderatives Dielektrikum Registriert seit: 21.05.2008 Beiträge: 35.987 PHP-Kenntnisse: Fortgeschritten	habe den letzten Beitrag editiert... ^^

27.02.2007, 13:02
phpdummi Erfahrener Benutzer Registriert seit: 06.06.2008 Beiträge: 1.631 PHP-Kenntnisse: Anfänger	und es wart .. KOMPLEXER! ich verhedder mich auch grad so richtig in css. sobald die dateien größer, also die css angaben mehr werden kommt man schnell mal durcheinnander. deshalb solltest du deine css dateien erstmal mit firefox prüfen und anschließend sachen für den ie fixen. anstatt deshalb nach lösungen die für beide browser passen zu suchen fügst du ans ende der css datei speziel für den IE gemachte "zusätze" ein. bsp: Code: /Firefox/ #kopf { min-height : 6em; } [..] /IE6/ * html #kopf [ height : 6em; } der für den IE7 gibt es + html #kopf auch ganz hilfreich ist yaml -> http://www.yaml.de/ viel spaß noch __________________ "Nobody is as smart as everybody" - Kevin Kelly* — The best things in life aren't things