[CSS] Body margins - FF vs IE

[njitter]

Deze CSS:

code:

html, body
{
    margin-left: 30px;
    margin-top:30px;
    margin-right:10px;
    margin-bottom:10px;
}

werkt wel in Firefox maar niet in Internet Explorer. De CSS staat in een externe file en het document wordt in een iframe getoond. Ik heb al lopen zoeken maar IE zou dit volgens mij ook gewoon moeten snappen...

Iemand die een hint kan geven?

[Gonadan]

Hij snapt het waarschijnlijk ook wel maar interpreteerd het anders

Wat bedoel je met "werkt niet"?
Kan je beschrijven of laten zien wat er fout gaat?

[njitter]

In Firefox verschuift de hele boel naar rechts en naar onder (zoals de bedoeling is).
In Internet Explorer verschuift er helemaal niks...

[TeeDee]

Define verschuift. Kan je niet wat sources en/of screenshots plaatsen?

[crisp]

Welke IE?
Quirksmode/standard compliants mode?
Waarom margins op zowel HTML als BODY?

[Gonadan]

Ik denk dat hij met 'verschuift' bedoelt dat de top en left marges groter zijn dan de bottom en right.
margin op html gaat idd nergens over

probeer eens position: relative; of display: inline;
dat zijn wondermiddelen als je loopt te eikelen met positionering

[njitter]

FF 1.5:


IE 6:


(afbeeldingen zijn geresized. Bij de 2de heb ik aangeven wat welke kant op moet schuiven)

[njitter]

Dit is trouwens het stukje wat er staat:

code:

html, body
{
    margin-left: 30px;
    margin-top:30px;
    margin-right:10px;
    margin-bottom:10px;

    padding: 0;
    height:100%;
    cursor: default;
    color:  white; 
    background-color:   #FFFFE2;
    font-family:    Verdana, Arial, sans-serif;
}

Vandaar dus de html, body....

[user109731]

Even die html weghalen, firefox verdubbelt de margins nu (omdat ze zowel op html als op body toegepast zijn). Dus zoiets:

Cascading Stylesheet:

body {
    margin-left: 60px;
    margin-top:60px;
    margin-right:20px;
    margin-bottom:20px;
}

Er is dus geen probleem in IE maar in Firefox. Dat dat toevallig is wat je wil, tja...

[ Voor 28% gewijzigd door user109731 op 16-05-2006 10:42 . Reden: geluisterd naar Gonadan + margins verdubbelt :) ]

[Gonadan]

Volgens mij kan je die height en width wel weglaten.
Als je de marges instelt pakt hij alles wat hij kan. (dat is mijn ervaring althans)

[CaptBiele]

wellicht is dit nog handig:

Cascading Stylesheet:

*{
margin: 0;   (en eventueel width en height definities)
}

IE heeft hier namelijk extra margins volgens mij...

[BtM909]

CaptBiele schreef op dinsdag 16 mei 2006 @ 10:43:
wellicht is dit nog handig:

Cascading Stylesheet:

*{
margin: 0;   (en eventueel width en height definities)
}

IE heeft hier namelijk extra margins volgens mij...

Waarom zou je in hemelsnaam je margin overal op 0 zetten?

[njitter]

CSS aangepast naar dit:

code:

html
{
    padding: 0;
    height:100%;
    cursor: default;
    color:  white; 
    background-color:   #FFFFE2;
    font-family:    Verdana, Arial, sans-serif;

}

 body {
    margin-left: 60px;
    margin-top:60px;
    margin-right:20px;
    margin-bottom:20px;
}

Nu doet hij in ieder geval consquent bij beide niks (geen verschuiving)

[njitter]

Iemand nog een idee?

[Boelie-Boelie]

Heb je niet wat meer code? Het is immers de bedoeling dat je dat blokje verplaatst, niet de body. M.a.w. HTML en CSS van het blokje 'Vakantie fotoboek' en van de fotomapjes.

[Verwijderd]

Njit schreef op dinsdag 16 mei 2006 @ 14:39:
Iemand nog een idee?

Gooi heel die html {} eens weg en kijk of de margins wel goed zijn. Er staat nog vanalles in html wat je prima in body kwijt zou kunnen, maar maak eerst maar eens een zo kaal mogelijke testopstelling, zodat je fatsoenlijk kunt debuggen.

[CaptBiele]

BtM909 schreef op dinsdag 16 mei 2006 @ 10:44:
Waarom zou je in hemelsnaam je margin overal op 0 zetten?

omdat je dan meer controle hebt over je css. Dan heb je minder last van de verschillende interpretaties van de browsers.
IE gooit overal wat extra margins en paddings, dat vind ik superirritant. Ik wil zelf de volledige controle hebben!

[Verwijderd]

CaptBiele schreef op woensdag 17 mei 2006 @ 12:34:
[...]

omdat je dan meer controle hebt over je css. Dan heb je minder last van de verschillende interpretaties van de browsers.
IE gooit overal wat extra margins en paddings, dat vind ik superirritant. Ik wil zelf de volledige controle hebben!

Dat betekent ook dat je voor alles wat standaard een margin heeft (h1 t/m h6, etc) dit expliciet moet definieren. Dan vind ik het persoonlijk netter om niet globaal alle margins op 0 te zetten, maar alleen de margins expliciet te definieren voor de elementen die je daadwerkelijk gebruikt.