IE7 vs. FireFox... (Div positie)

Status
Niet open voor verdere reacties.
M

Martijntje

Gebruiker
Lid geworden
3 okt 2004
Berichten
48
Hi all!

http://www.nathalievisagie.nl/test/opleiding_v.php

De bedoeling is in het grote vak: 1 zwart blok boven, 2 eronder (een smalle links en een brede rechts)
In IE(7) doettie het wel, in FireFox niet... But why?

CSS:
Code: 
.opleiding1 {
width: 650px;
height: 25px;
padding: 5px;
background-color: #000000;
font-size: 14px;
letter-spacing: 2px;
text-align: center;
line-height: 25px;
}
.opleiding2 {
float: left;
width: 155px;
height: 435px;
background-color: #000000;
text-align: right;
padding: 5px;
padding-top: 10px;
margin-top: 20px;
margin-right: 20px;
}
.opleiding3 {
width: 465px;
height: 440px;
background-color: #000000;
padding: 5px;
margin-top: 20px;
}
HTML: 
<div class="content">
<div class="header"></div>
<div class="menu"></div>
<div class="main">
<div class="opleiding1"></div>
<div class="opleiding2"></div>
<div class="opleiding3"></div>
</div>
<div class="footer"></div>
</div>


Thanx!
 
snap niet wat het probleem is...

Ziet er bij mij perfect uit in IE, firefox. :thumb: :thumb: :thumb:
 
In IE8 ziet het er hetzelfde uit als in Firefox. MAar bij mij ziet het er inderdaad ook zo uit als je screenshot in Firefox (en IE8 dus).

Het probleem is dat opleiding 2 en 3 over elkaar heen vallen. Dat komt doordat je opleiding 3 geen float:left mee geeft. Wel doen dus :) Wat IE7 doet is erg vreemd.

En niet vergeten een <div style="clear:both"></div> achter de floats te plaatsen.
 
Laatst bewerkt:
IE doed vaak iets fout als het om float vergete gaat.
 
elementen die floaten maken geen deel uit van de normale structuur. Net als relatief of absoluut gepositioneerde elementen (als je tenminste left, top, right of bottom opgeeft) zweven ze boven het document. Block elementen die volgen komen dus onder dat floating element te staan

clear:both|left|right|none geeft aan aan welke kanten van het element géén floating elementen mogen staan. Als er toch een float aan die kant staat wordt het element er onder geplaats. Stel je hebt dit:
[float:left] [clear:left] [block]

Links (in de bron) van het element [clear:left] staat nu een floating element. Dat mag niet vanwege de clear:left, dus wordt het element onder de float geplaats. Dat komt er zo uit te zien:
[float:left]
[clear:left]
[block]

Aangezien een div zonder inhoud geen hoogte heeft ziet dat er hetzelfde uit als dit:
[float:left]
[block]

Maar laat je die [clear:left] weg dan staat [block] onder [float:left].


Klein voorbeeld:
HTML: 
<?xml version="1.0"?>
<!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" xml:lang="en" lang="en">
<head>
<style type="text/css">

div.c1
{
float:left;
width: 10px;
height: 10px;
background-color: red;
}

div.c2
{
width: 20px;
height: 20px;
background-color: green;
}

div.c3
{
float:left;
width: 10px;
height: 10px;
background-color: red;
}

div.c4
{
clear:left;
width: 20px;
height: 20px;
background-color: green;
}

</style>
</head>
<body>

Float gevolgd door block element, geen clear:<br />
<div class="c1"></div>
<div class="c2"></div>
<br />
<br />
Float gevolgd door block element, groen block heeft clear:left:<br />
<div class="c3"></div>
<div class="c4"></div>
</body>
</html>
 
Laatst bewerkt:
Thanx voor de extreem duidelijke uitleg!

Is het voor mij alleen nu niet overbodig om die clear nog ergens toe te voegen, omdat nu alles al goed staat?
 
Dat klopt. Maar als je er nog iets onder wilt zetten zal het nodig zijn. En als de hoogte niet van te voren bekend is ook. De container van de float zal niet uitrekken om een floating element to omvatten behalve als het gevolg wordt door een clear:left (of both).

Stel je hebt dit:
[container][float:left]text[/float][/container]
[container] zal geen hoogte hebben en de float zal er uit steken. Dat komt omdat de [float] niet echt in de container staat, maar er boven zweeft. De container rekt dus niet uit.

Om de container toch mee te laten rekken kun je dit doen:
[container][float:left]text[/float][clear:left][/container]
De [clear:left] zit wel echt in de container en onder de [float:left]. Nu rekt [container] dus wel uit.

Nu is dit niet nodig in gevallen waarbij je de hoogte van elk element weet , want die kun je dan gewoon opgeven en hoeft de container helemaal niet mee te rekken. Dat is geloof ik hier het geval. Maar over het algemeen is het handig om je floats af te sluiten met een <div style="clear:left"></div>. Baat het niet dan schaad het ook niet :)

Weer een voorbeeldje ter illustratie:
HTML: 
<?xml version="1.0"?>
<!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" xml:lang="en" lang="en">
<head>
<style type="text/css">

div.container
{
padding: 2px;
background-color: green;
}

div.child
{
float:left;
background-color: red;
}

div.clear
{
clear:left;
}



</style>
</head>
<body>

Float (rood) in parent (groen) zonder clear:<br />
<div class="container">
  <div class="child">Text</div>
</div>
<br />
<br />
Float (rood) in parent (groen) met clear na de float:<br />
<div class="container">
  <div class="child">Text</div>
  <div class="clear"></div>
</div>
</body>
</html>
 
Laatst bewerkt:
Sorry voor de late reactie, maar...

Thanx all!

Al mijn issues zijn opgelost en ik ben iets wijzer geworden!
 
Ik heb een ongeveer gelijkaardig probleem:

heb de uitleg gelezen en al heel wat geprobeerd maar het lukt me maar niet.
Kan er iemand van jullie eens naar kijken?

www.tornooi.net geeft in firefox mooi wat ik wil
maar in (sommige versies) van explorer 7.0 heb ik het div probleem in vorige posts beschreven.

screens:
zoals ik het wil (firefoxjuist.gif)
de bloken in firefox (groenoverlaptzwart.gif)
en hoe explorer7.gif het toont...

de site staat op www.tornooi.net
 

Bijlagen

  • firefoxjuist.gif
    firefoxjuist.gif
    19,9 KB · Weergaven: 16
  • groenoverlaptzwart.gif
    groenoverlaptzwart.gif
    5,1 KB · Weergaven: 17
  • explorer7.gif
    explorer7.gif
    21,4 KB · Weergaven: 25
Nog een opmerking, ik kan naast de url bij explorer de compatibiliteitsmodus aan en fzetten.
Als die af staat werkt de site juist, als die aan staat wordt ie fout getoond.

Misschien doet dat iemand aan iets denken?
 
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan