[css] ie toont padding/margin die er niet is

[Verwijderd]

Ik ben bezig aan een nieuwe site:
http://www.astle.org
in ff en opera laat hij hem zien zoals ik wil. Maar in ie is er een margin en/of padding naast de content balk en naast de eerste paragraaf. Maar die zou er helemaal niet mogen zijn, ik vermoed dat die van dat menu komt dat er naast staat. Maar vanwaar exact, geen idee. Dus ook geen idee hoe ik het moet oplossen.

[André]

Wat heb je al geprobeerd, aan welk stukje code ligt het denk je? Heb je al wat gespeeld met de padding en margins? En weet je wel dat XHTML 1.1 helemaal niet voor websites bedoeld is?

[Verwijderd]

Er staat nu ook een blokje rechts bij... en rechts heb ik nu hetzelfde probleem, dus lijkt het me dat de schuldige zijn: menu en statistics.

met als css code:

Cascading Stylesheet:

div#menu{
    width: 120px;
    margin: 10px 0px 10px 5px;
    padding: 0px 0px 0px 0px;
    border: solid 1px #000000;
    text-align: left;
    float: left;
}

div#siteStats{
    width: 100px;
    margin: 10px 5px 10px 0px;
    padding: 0px 0px 0px 0px;
    border: solid 1px #000000;
    text-align: left;
    float: right;
}
div#content{
    border: solid 1px #000000;
    margin: 10px 115px 10px 135px;
    text-align: left;
}

En neen, dat wist ik niet, en zal ik bij deze eens nader bekijken

[Fles]

Ik denk dat je een float wilt op het hoofdvenster van je content (#content). Dan hoef je de margin niet op 135 in te stellen en is je probleem opgelost. Nu heb je een float op alleen je header.

Ik weet niet of het kan hoe je het doet, maar het is iig een beetje een rare situatie.

[ Voor 20% gewijzigd door Fles op 17-03-2006 12:18 ]

[Verwijderd]

Die content is het venster waar het probleem in zit, en die float elements floaten in een container (div). Zo hoort het toch?

[Fles]

code:

div#content{
    border: solid 1px #000000;
    margin: 10px 115px 10px 10px;
    text-align: left;
    float: left;
}

Ga hier eens mee verder, dan komt het wel goed

/edit: oh je rechter padding moet ook nog even op 10px ipv 115px

[ Voor 17% gewijzigd door Fles op 17-03-2006 12:26 ]

[Verwijderd]

dan springt mijn content venster uit men container.
http://www.astle.org/test
Dan kan je zien wat ik bedoel.

Ook met de rechter padding op 10 springt ie er nog steeds uit. (in opera)
In ie is nu het content probleem wel opgelost, maar staat men footer fout, maar dat kanik wel oplossen denk ik.
Maar hoe ik het nu in opera moet fixen... iemand?

[ Voor 55% gewijzigd door Verwijderd op 17-03-2006 12:33 ]

[Verwijderd]

het lijkt op de 3pixel jog. als je bij je div#content
_height: 1%; toevoegt (en de css-validatie badge van je site weghaalt) gaat het wel goed in IE.

offtopic:
ik zou de div.blockHeader vervangen door h2, en de p.footer door #footer p.

[Fles]

Je moet dan alleen "clear: both" in je footer zetten, anders komt hij er naast te staan.

[Verwijderd]

Nu is het oorspronkelijke ie probleem er terug, nl dat balkje dat margin meekrijgt... ik ga dadelijk eens kijken naar dat 3 pixel probleem, maar ik wil men css validation niet verliezen eigenlijk.

[ Voor 179% gewijzigd door Verwijderd op 17-03-2006 12:44 ]

[Verwijderd]

als je per se wilt valideren kun je volgens mij de * html hack gebruiken, je moet er alleen wel rekening mee houden dat die in IE7 niet meer werkt, maar dat kun je dmv conditional comments oplossen.

[JHS]

Verwijderd schreef op vrijdag 17 maart 2006 @ 13:12:
als je per se wilt valideren kun je volgens mij de * html hack gebruiken, je moet er alleen wel rekening mee houden dat die in IE7 niet meer werkt, maar dat kun je dmv conditional comments oplossen.

Waarom zou je nog een hack gebruiken als je conditional comments gebruikt .
Je kan lijkt me gewoon height: 1%; toe in een iefix.css bestand dat je met een conditional comment include . Hacks zijn volgens mij over het algemeen bah en onnodig .

[Verwijderd]

Probleem opgelost, height: 1% bij content bijgezet. CSS valideert nog steeds, en het werkt in ff/opera/ie.

In ie zijn de marges nog net iets te groot, maar pixelperfect is niet mijn streefdoel.

Geen hack nog conditional include nodig... Dank allen voor oplossingen aan te reiken. En de "offtopic" tips

[ Voor 23% gewijzigd door Verwijderd op 17-03-2006 16:25 ]