[css]Layout verschil tussen FireFox en Internet Explorer - Softwareontwikkeling

donderdag 18 mei 2006 14:20

Acties:

dotnetter

Topicstarter

Ik zit een beetje in de knoei met de layout voor mijn startpagina.. Hij wordt bijna helemaal correct weergegeven in FF en IE, maar beide browsers hebben een ander probleem. Ik heb al allerlei sites en tutorials van w3schools enzo bekeken, maar zonder resultaat.

Wat is het probleem?
FF:
Een border die zou moeten doorlopen tot onder en ook langs de hele onderkant wordt niet weergegeven, in IE wel gewoon.

IE:
Er zit een stuk ruimte tussen twee kolommen die ik niet weg krijg. Ik geloof niet dat het aan het boxmodel ligt, want welke waarde ik ook als margin neem, die ruimte blijft er.. Rare is wel dat als ik de margin verhoog, het wel naar rechts verschuift, maar naar links gaat dus niet. (wat juist is wat is wil, zodat het naadloos aansluit).

En dan wilde ik ook graag dat de hoogte als percentage wordt genomen, dus dat het mee veranderd als je het browservenster aanpast in grootte. Hoe dat moest vond ik gelukkig wel hier, maar ook hier zit weer een verschil tussen FF en IE, blijkbaar berekent een van de twee de hoogte anders, waardoor er in IE veel sneller een scrollbar verschijnt. En in FF krijg je onderin een steeds groter stuk lege ruimte..

Ik heb even een testpaginaatje gemaakt waarop het allemaal wat duidelijker is te zien, zonder alle meuk van de echte site

Hier nog even de bijhorende code:

HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<link rel="stylesheet" href="styletest.css" type="text/css">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
</head>

<body>
    
    <div id="bovenGroen">   
    </div>
    <div id="omtrek">
        <div id="linksBlauw">   
        </div>
        <div id="middenRood">   
        </div>
        <div id="onderGeel">    
        </div>
    </div>
    
</body>
</html>

Cascading Stylesheet:

html, body{
    height: 90%;
    margin:10px 10px 10px 10px;
}

#bovenGroen{
    background-color:#00FF00;
    position:relative;
    height:50px;
    border:solid 1px;
    border-right:solid 2px;
    }
    
#omtrek {
    position:relative;
    margin-top:8px;
    height:90%;
    border-style:solid;
    border-width:1px 2px 2px 1px;
}

#linksBlauw{
    background-color:#0000FF;
    position:relative;
    width:150px;
    height:100%;
    float:left;
    border-right:1px solid;
}

#middenRood{
    position:relative;
    background-color:#FF0000;
    margin-left:151px;
    height:100%;
}

#onderGeel{
    background-color:#FFFF00;
    position:relative;
    height:60px;
    border-top: solid 1px;
}

Het zal vast iets simpels zijn waardoor het niet helemaal 100% werkt bij mij, maar ik kom er niet meer uit.

Kater? Eerst water, de rest komt later

donderdag 18 mei 2006 16:26

Acties:

MadMurdock

Volgens mij gaat het meeste mis omdat je de hoogte van linksBlauw en middenRood op 100% hebt ingesteld, deze willen in firefox 100% van de ruimte (dus de volledige div omtrek) innemen, hierna blijft er geen ruimte meer over voor onderGeel. Daardoor wordt deze over je borders heengeschoven. Hetgeen er ook voor zorgt dat de marge aan de onderkant een beetje naar de haaien gaat.

Daar zul je dus een andere methode voor moeten zoeken, afhankelijk van hoe het precies moet worden.

donderdag 18 mei 2006 19:45

Acties:

Haan

dotnetter

Topicstarter

Wat jij zegt klopt inderdaad

Ik heb het nu verdeeld in 90% en 10% en nu is het wel goed. Ook het verschil met scrollbars en marge onderin is weg.
Alleen is het nu jammer dat de onderste gele balk ook z'n hoogte varieert, ik had liever dat ie gewoon een vaste hoogte heeft. Dat kan natuurlijk door hem buiten de omtrek div te halen, want ik zie niet zo snel een manier om het anders te doen, toch?

Blijf ik alleen nog zitten met die rare extra marge in internet explorer.. Hier nog even een plaatje voor de duidelijkheid:
Afbeeldingslocatie: http://www.hantheman.tk/test/plaatje.png

Afbeeldingslocatie: http://www.hantheman.tk/test/plaatje.png

Dit is de linkerbovenhoek van de pagina, het stuk wit tussen het rode en blauwe vlak hoort er dus niet te zijn..

Kater? Eerst water, de rest komt later

donderdag 18 mei 2006 20:12

Acties:

Deegroller

Zou het hier wellicht iets mee te maken kunnen hebben?

Geweldige hand-oog-coördinatie dankzij Wacom en Playboy!

donderdag 18 mei 2006 20:12

Acties:

XWB

Devver

Probeer

Cascading Stylesheet:

*
{
   margin: 0;
   padding: 0;
}

eens.

March of the Eagles

donderdag 18 mei 2006 23:21

Acties:

Haan

dotnetter

Topicstarter

Hacku schreef op donderdag 18 mei 2006 @ 20:12:
Probeer
Cascading Stylesheet:
1
2
3
4
5
*
{
   margin: 0;
   padding: 0;
}
eens.

Die had ik al geprobeert, maar dat wou ook niet helpen. En het lijkt me ook niet zo handig omdat je dan ook alle standaard margins van p en headers e.d. kwijt bent.

Kater? Eerst water, de rest komt later

vrijdag 19 mei 2006 00:25

Acties:

Cartman!

als je die margin-left:151px; eens weghaalt en er float:left; voor in de plaats zet, wat dan?

vrijdag 19 mei 2006 11:36

Acties:

Haan

dotnetter

Topicstarter

g00fy schreef op vrijdag 19 mei 2006 @ 00:25:
als je die margin-left:151px; eens weghaalt en er float:left; voor in de plaats zet, wat dan?

Dan verdwijnt het hele middenRood stuk en komt onderGeel bovenaan naast linksBlauw..
Nog geprobeert met z-index iets te doen, maar dat werkt ook niet, maar dat kan ook aan mij liggen omdat ik niet helemaal door heb hoe je daarmee moet werken eigenlijk..

Kater? Eerst water, de rest komt later

vrijdag 19 mei 2006 12:13

Acties:

killercow

eth0

Geef je rood eens een width en een float left geeft moet deze hoe dan ook naast de blowue box komen.

Daarna kun je je groene box een clear:both geven zodat hij onder de blouwe en rode box gaat staan.

Dat moet werken lijkt mij.

openkat.nl al gezien?

vrijdag 19 mei 2006 17:03

Acties:

Haan

dotnetter

Topicstarter

killercow schreef op vrijdag 19 mei 2006 @ 12:13:
Geef je rood eens een width en een float left geeft moet deze hoe dan ook naast de blowue box komen.

Daarna kun je je groene box een clear:both geven zodat hij onder de blouwe en rode box gaat staan.

Dat moet werken lijkt mij.

Dat gaat goed zolang de omtrek div groter is dan de breedte van blauw+rood.. Daarna schiet het rode vlak onder de blauwe .. Zelfde gebeurt min of meer als ik percentages neem voor de breedte, maar dat is hoe dan ook geen optie omdat het blauwe vlak echt dezelfde breedte moet houden.

Geef ik geen width op voor het rode vlak, gaat het in IE wel goed,maar Firefox slikt dat weer niet

Ik zal nog eens kijken zonder die hele omtrek div, maar dat was juist zo handig met die borders..

edit:
met of zonder die omtrek div er omheen maakt geen enkel verschil

[ Voor 5% gewijzigd door Haan op 19-05-2006 17:14 ]

Kater? Eerst water, de rest komt later

vrijdag 19 mei 2006 17:25

Acties:

Justice

Witmarges zoals hier komen meestal door een margin-bottom van een paragraaf tag of header element binnen je balk bovenaan, die dan binnen Internet Explorer door de grens van de balk naar beneden duwen.

Even debuggen met het zetten van achtergrondkleuren op je verschillende GUI elementen dus om te bepalen waar het aan ligt (alhoewel je dan de marge er niet uithaalt, die ligt buiten de achtergrond)

Human Bobby

vrijdag 19 mei 2006 17:35

Acties:

Haan

dotnetter

Topicstarter

Maar in dat geval zou

Cascading Stylesheet:

1
2
3

* { 
margin:0; 
padding:0; }

toch moeten helpen? En daarbij is mijn voorbeeld zelfs helemaal leeg, dus er kan helemaal geen invloed zijn van headers of andere content..

Kater? Eerst water, de rest komt later

maandag 22 mei 2006 21:25

Acties:

Haan

dotnetter

Topicstarter

Ik heb nog het een en ander zitten proberen met allerlei verschillende oplossingen, ook alles absoluut gepositioneerd, maar dat is toch minder vind ik, ook al werkt het wel. Maar ik vind het toch mooier als de boel mee schaalt.

Maar ik ben er nu wel achter wat nu eigenlijk de kern van het probleem is

Dat is namelijk dat ik boven en onder een balk heb met bijv, een breedte van 95%, en daartussen een deel met een vaste breedte van bijv. 150px, en een deel waarvan de breedte dus 95%-150px moet zijn..
Maar ik krijg het dus onmogelijk voor elkaar om dat zo te krijgen, of het is alleen maar in 1 browser (wat in de eerste plaats de reden voor dit topic was).
Hopelijk heeft iemand nog een idee/tip voor me

Kater? Eerst water, de rest komt later

dinsdag 23 mei 2006 10:21

Acties:

Justice

balk 1 = width:95%;
balk 2: 150px;
balk 3: rest;

HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>
    <title></title>
</head>

<body>
<div id="balk 1" style="overlflow:auto; width:95%;background:green">test
<div id="balk 2" style="float:left;width:150px;background:blue">bla </div>
<div id="balk 3" style="background:red">di</div>
</div>
</body>
</html>

Zoiets werkt.

Human Bobby

dinsdag 23 mei 2006 11:35

Acties:

Haan

dotnetter

Topicstarter

@justice: dat werkt zolang het rode deel geen height meekrijgt. Heel interessant, zodra je een height instelt in dat stuk, verschuift het weer een paar pixels in IE, zoals op het plaatje wat ik hierboven had gepost

Ik los het nu gewoon op door er een iframe overheen te knallen, die kan ik wel gewoon een height geven zonder dat de boel verschuift..

Kater? Eerst water, de rest komt later

dinsdag 23 mei 2006 11:39

Acties:

hamsteg

Species 5618

Speel eens met css, table: border-collapse: collapse;

Niet quoten, zorgvuldige reacties volgens de regels worden zo weggewerkt: *knip*, reactie op geknipte reactie.

dinsdag 23 mei 2006 14:23

Acties:

DamadmOO

Haan schreef op maandag 22 mei 2006 @ 21:25:
Maar ik ben er nu wel achter wat nu eigenlijk de kern van het probleem is
Dat is namelijk dat ik boven en onder een balk heb met bijv, een breedte van 95%, en daartussen een deel met een vaste breedte van bijv. 150px, en een deel waarvan de breedte dus 95%-150px moet zijn..
Maar ik krijg het dus onmogelijk voor elkaar om dat zo te krijgen, of het is alleen maar in 1 browser (wat in de eerste plaats de reden voor dit topic was).
Hopelijk heeft iemand nog een idee/tip voor me

Cascading Stylesheet:

1
2
3

div {
  width: expression(document.body.clientWidth * 0.95 - 194 + "px");
}

Zoiets misschien?

dinsdag 23 mei 2006 20:10

Acties:

Verwijderd

-laat maar-

[ Voor 89% gewijzigd door Verwijderd op 23-05-2006 20:10 ]