[css] margin probleem IE - Softwareontwikkeling

donderdag 29 april 2004 09:56

Acties:

Topicstarter

Ik heb bij mijn nieuwe site een probleempje met margin-left in IE6. De leader div staat meer naar links dan de rest. Terwijl ze dezelfde margin hebben. Dit speelt alleen in IE6 en niet in mozilla.
De css:

code:

.leader {
    margin-left: 8%;
    width: 700px;
    min-height: 100px;
    border: 1px solid;
}

.menu {
    margin-left: 8%;
    margin-top: 5px;
    width: 120px;
    border: 1px solid;
    min-height: 300px;
    float: left;
    background-color: #EEEECC; 
}

.content {
    float: left;
    margin-left: 5px;
    border: 1px solid;
    margin-top: 5px;
    width: 573px;
    color: #E3E3E3;
    background-color: #005596;
    min-height: 500px;
}

En de html:

code:

<body>
<div class='leader'></div>
<div class='menu'>menu</div>
<div class='content'>content</div>
</body>

De niet ondersteuning voor min-height los ik met wat js op maar dat speelt hierin niet mee, want ik heb het ook al zonder getest. Verder staat er een xhtml1.0 doctype boven. Met en zonder geeft hetzelfde resultaat.
Een screenshot hoe het er uit ziet:
Afbeeldingslocatie: http://members.lycos.nl/jfoto/ie.PNG

Afbeeldingslocatie: http://members.lycos.nl/jfoto/ie.PNG

Hopelijk weet iemand waar het aan ligt

. Als het nodig is wil ik ook nog wel ergens een live demo maken.
Live demo is gemaakt. klik

[ Voor 29% gewijzigd door gomaster op 29-04-2004 10:03 ]

donderdag 29 april 2004 09:57

Acties:

pasta

Ondertitel

Ik f5 deze pagina en deze post is nutteloos geworden...

[ Voor 75% gewijzigd door pasta op 29-04-2004 09:58 ]

Signature

donderdag 29 april 2004 09:58

Acties:

Verwijderd

Dat lijkt me de bug de IE waarbij margin-left een dubbele waarde krijgt, maar ik zal zo even kijken of dat het is. Weet eigenlijk niet of dat ook bij percentages voorkomt.

donderdag 29 april 2004 09:58

Acties:

Verwijderd

Maak is zo'n demo. AFAIK bestaat 'margin-width' trouwens niet...

donderdag 29 april 2004 09:59

Acties:

gomaster

Topicstarter

Verwijderd schreef op 29 april 2004 @ 09:58:
Maak is zo'n demo. AFAIK bestaat 'margin-width' trouwens niet...

Oh shit. Ik bedoel margin-left

donderdag 29 april 2004 10:00

Acties:

Markieman

code:

.leader {
    margin-left: 8%;
    width: 700px;
    min-height: 100px;
    border: 1px solid;
}

.menu {
    margin-left: 8%;
    margin-top: 5px;
    width: 120px;
    border: 1px solid;
    min-height: 300px;
    float: left;
    background-color: #EEEECC; 
}

Margin-left is bij beide 8%

Is dat bij .leader dan niet 8% van 700px
en bij .menu 8% van 120px

(en bij dat laatste dus veel meer)

_{of zeg ik nou iets doms}

You do not fear them? - The Wraith? Naah. Now *clowns*, that's another story.

donderdag 29 april 2004 10:02

Acties:

Verwijderd

Ja, het wordt berekend ten opstaande van het 'containing block' zie CSS 2.1, daarom is een voorbeeld ook handig

donderdag 29 april 2004 10:02

Acties:

Verwijderd

Cascading Stylesheet:

.menu {
    margin-left: 8%;
    margin-top: 5px;
    width: 120px;
    border: 1px solid;
    min-height: 300px;
    float: left;
    background-color: #EEEECC; 
    display: inline; /* <---- */
}

donderdag 29 april 2004 10:02

Acties:

supakeen

Markieman schreef op 29 april 2004 @ 10:00:
code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
.leader {
    margin-left: 8%;
    width: 700px;
    min-height: 100px;
    border: 1px solid;
}

.menu {
    margin-left: 8%;
    margin-top: 5px;
    width: 120px;
    border: 1px solid;
    min-height: 300px;
    float: left;
    background-color: #EEEECC; 
}
Margin-left is bij beide 8%

Is dat bij .leader dan niet 8% van 700px
en bij .menu 8% van 120px

(en bij dat laatste dus veel meer)

_{of zeg ik nou iets doms}

Dat is 8% van parent

donderdag 29 april 2004 10:04

Acties:

gomaster

Topicstarter

Verwijderd schreef op 29 april 2004 @ 10:02:
Ja, het wordt berekend ten opstaande van het 'containing block' zie CSS 2.1, daarom is een voorbeeld ook handig

voorbeeld online. Zie startpost

donderdag 29 april 2004 10:06

Acties:

gomaster

Topicstarter

Verwijderd schreef op 29 april 2004 @ 10:02:

Cascading Stylesheet:

.menu {
    margin-left: 8%;
    margin-top: 5px;
    width: 120px;
    border: 1px solid;
    min-height: 300px;
    float: left;
    background-color: #EEEECC; 
    display: inline; /* <---- */
}

Dat was hem

. Waarom is dat eigenlijk? Omdat mozilla het wel meteen goed doet en ie niet.

donderdag 29 april 2004 10:06

Acties:

Verwijderd

Haal die float:left op #menu anders is weg (deze layout is trouwens ook makkelijk te doen met position:absolute). Houd er ook rekening mee dat zowel Mozilla als IE in quirks mode staan.

donderdag 29 april 2004 10:06

Acties:

supakeen

Doe eens gewoon: "clear:both" gebruiken? Misschien dat dat nog iets wil uitmaken

En lees hierover ook op: http://css.maxdesign.com.au/floatutorial/index.htm en dan Tutorial 8. Liquid two column layout

[ Voor 47% gewijzigd door supakeen op 29-04-2004 10:08 ]

Pagina: 1

Reageer