[CSS] Spookpixels in IE bij margin-left

[Zoefff]

Momenteel ben ik bezig met een imho vrij eenvoudige layout, een header, daaronder 2 kolommen, en daaronder een footer. Dit alles met DIVjes en CSS.

In FireFox gaat alles ook goed, maar in IE loop ik tegen een merkwaardig probleem aan.

Tussen de kolommen sidebar en content komen een stuk of 3 pixels te zitten. De kolom sidebar is 150px breed, dus ik geef content "margin-left:150px;" mee. In FF gaat dat uitstekend, maar IE prakt er dus een paar pixels tussen.

Het merkwaardige is nou dat als ik sidebar bijvoorbeeld 300px breed maak, IE er óók een paar pixels tussen zet. Hij zet ze er dus altijd tussen

Ik heb al geprobeerd om content iets minder margin te geven, of een negatieve, maar dat mag niet baten.

De desbetreffende pagina vind je op http://zoefff.gotdns.com/koorschool/sketch.php. Iemand die me hier mee verder kan helpen?

Op verzoek van Remy nog een screenshot



Het moge duidelijk zijn dat de bovenste dus FF is, en IE daaronder

[ Voor 10% gewijzigd door Zoefff op 19-01-2005 20:58 ]

[Verwijderd]

Niet dat dit het is, maar moet je niet iets met position doen. Zie hier voor meer:

http://www.w3schools.com/css/pr_class_position.asp

shit niet goed gelezen, ik dacht dat het 2 aparte div-jes waren

[ Voor 22% gewijzigd door Verwijderd op 19-01-2005 21:03 ]

[Zoefff]

Nope, dat maakt niets uit.

Verwijderd schreef op woensdag 19 januari 2005 @ 21:00:
Niet dat dit het is, maar moet je niet iets met position doen. Zie hier voor meer:

http://www.w3schools.com/css/pr_class_position.asp

shit niet goed gelezen, ik dacht dat het 2 aparte div-jes waren

Dat zijn het ook hoor? Maar doordat de ene float:left bij zich heeft, zou de ander er gewoon naast moeten komen staan. Dat gebeurt ook wel, maar niet helemaal goed dus

[ Voor 91% gewijzigd door Zoefff op 19-01-2005 21:05 ]

[iH8]

http://www.simplebits.com/notebook/2004/07/30/3pixels.html

met dank aan een andere tweakert....

[Rickets]

Niet getest, maar bij '3px' en IE denk ik aan deze bug.
http://www.positionisever...explorer/threepxtest.html

[Verwijderd]

Nou lekker bug is dat dan, mogen ze wel eens iets aan gaan doen

[crisp]

Je float een display:inline geven lost ook nog wel eens wat problemen op. Werkt ook tegen de 'dubbele margin' bug.

[ Voor 79% gewijzigd door crisp op 19-01-2005 21:25 ]

[Zoefff]

Whoehoe!

Na die hack tegen de 3px bug toegevoegd te hebben werkt het naar behoren

Cascading Stylesheet:

/* Hide from IE5-mac. Only IE-win sees this. \*/
* html #sidebar_left {
    margin-right: -3px;
}
* html #content {
    margin-left: 0px;
}
/* End hide from IE5/mac */

[Zoefff]

crisp schreef op woensdag 19 januari 2005 @ 21:23:
Je float een display:inline geven lost ook nog wel eens wat problemen op. Werkt ook tegen de 'dubbele margin' bug.

Ik ken de truc voor de dubbele margin bug inderdaad, maar in dit geval werkt het niet, heb het nog even gecheckt.

Bovenstaande hack werkt iig wel

[Zoefff]

Ik loop nu trouwens wel weer tegen een ander bizar probleem op, dit keer in FireFox.

Zodra ik de content div niet met gewoon tekst begin, maar met een element (<h3> of <p> bijvoorbeeld) begint de tekst niet bovenaan, maar een stukje naar beneden.



Om het nog even merkwaardiger te maken, als ik de padding op 0 zet ipv 5, dan lijkt het zelfs alsof de hele div een stuk naar beneden schuift?



Op het moment dat ik niet met een tag, maar gewoon met tekst begin, gaat het wel goed, en komt de tekst gewoon bovenaan te staan.



Is dit een bugje van FireFox, of zie ik iets heel fundamenteels over het hoofd? Ik heb vrijwel alle combinaties van padding en marge al uitgeprobeerd...

Een workaround door met <span> te beginnen werkt wel, maar ik begin natuurlijk liever met <hx> omdat dat semantisch correcter is.

[ Voor 9% gewijzigd door Zoefff op 19-01-2005 22:37 ]

[crisp]

margin

[Zoefff]

Margin waarvan dan? Als ik de margin-top van content op 0 zet heb ik hetzelfde probleem. Zet ik de padding ook nog eens op 0, dan krijg ik een effect als op het 2e plaatje.

[crisp]

de margin van je header-element

[Woudloper]

Margin van de heading?

Hoe ziet dat stukje HTML er dan uit in combinatie met de CSS? Overigens plaats je de tekst 'BLAAT' als het volgt erin:

HTML:

<div id="content">
 BLAAT
 <h1>heading</h1>
</div>

[Zoefff]

Dat was het inderdaad... Maar ik snap toch nog niet helemaal waarom dat moet. Nu moet ik dus iedere header die bovenaan een pagina staat een marge van 0 meegeven? Waarom is dat niet standaard al 0

FF en CSS hebben blijkbaar nog voldoende geheimen voor me.

[ Voor 50% gewijzigd door Zoefff op 19-01-2005 22:57 ]

[crisp]

Zoefff schreef op woensdag 19 januari 2005 @ 22:56:


Dat was het inderdaad... FF en CSS hebben blijkbaar nog voldoende geheimen voor me.

De default stylesheet van FF wijkt op sommige punten wel wat af van die van IE. Dat betreft vnl margins op verschillende elementen

[Spruit_elf]

Zoefff schreef op woensdag 19 januari 2005 @ 22:56:


Dat was het inderdaad... Maar ik snap toch nog niet helemaal waarom dat moet. Nu moet ik dus iedere header die bovenaan een pagina staat een marge van 0 meegeven? Waarom is dat niet standaard al 0

FF en CSS hebben blijkbaar nog voldoende geheimen voor me.

of je zet de topmargins voor alle headers op 0 en vervangt die door padding top