Ahoy! Het is al morgen!
Ik had natuurlijk eerst de raad in mijn eigen handtekening moeten opvolgen: niet gaan klooien, eerst de html-validator en de css-validator hun zegje laten doen...
Maar ik kwam wel op hetzelfde uit als de
css-validator.
Er staat:
Code:
#content{
background: #e5efca;
border-top: #6f2b90 solid 3px;
border-bottom: #6f2b90 solid 3px;
*/border: #6f2b90 solid 3px;*/
float:left;
width:723px;
height:540px;
overflow-y: auto;
overflow-x: hidden;
padding: 10px;
}
Let op de sterretjes! Het eerste sterretje staat per abuis vóór in plaats van na de slash: dan is het geen goede commentaar-regel, maar ook geen valid css.
En foutafhandeling door browsers verschilt (daar zijn ook in lang niet alle gevallen vaste regels voor, als ze zich daar al aan houden).
- Firefox en anderen interpreteren: "zomaar een */ zonder voorafgaande /* ? Die ken ik niet, de hele regel is dus invalid en wordt niet gebruikt".
- IE7 interpreteert kennelijk, zonder op of om te zien (doet IE wel meer): "een */ is altijd het eind van een commentaar, dus daarna mag ik gewoon verder met die regel".
En inderdaad, het
screenshot van IE laat rondom de hele content het paarse randje van 3px zien, in plaats van alleen boven en onder wat de bedoeling was.
Maar dan past de breedte er niet op, want borders worden bij de breedte opgeteld; dus: drop-daar-gaat-IE!
Kortom: hele regeltje wissen of * en / omdraaien: en floep daar springt IE op z'n plekje.
Met vriendelijke groet,
CSShunter
______________
PS;
Er staat ook:
Code:
#html,body{
width:100%;
margin:20px;
... enz.
}
Ik zou dit doen:
Code:
body {
margin: 20px 0;
... enz.
}
Want nu komt er een margin van 20px links en rechts naast de breedte van 100%, waarmee de site op geen enkele resolutie goed gecentreerd staat. En er is altijd een horizontale scrollbar te zien om die 20px aan de rechterkant te kunnen zien, wat helemaal niet nodig is (want dat is alleen maar loze ruimte). Bv. bij 1024*768px past de site met z'n breedte van 950px er altijd op.
Met
#html wordt waarschijnlijk
html bedoeld (want een tag met
id="html" is er niet). Maar dat zou ik niet corrigeren, want dan wordt ook een 20px margin op de html gezet, en wordt het excentrieke gedrag alleen maar erger. Voor een breedte van 100% is het ook niet nodig, dat verzinnen de browsers uit zichzelf.
Of nog beter:
Code:
body {
width: 950px;
margin: 20px auto;
... enz.
}
Dan is de hele #container niet nodig.
