[IE] Gevalideerde website wordt verkeerd weergegeven*

[bekok]

Hallo allemaal,

Ik ben momenteel bezig om een website te maken en het gaat op zich goed, op het feit na dat IE de code niet goed weergeeft. De code is gevalideerd door w3c als strict (zie hier) eveneens als de css. Nu is het natuurlijk een vaker voorkomend probleem dat IE websites niet goed weergeeft, maar ik heb geen idee hoe ik het op moet lossen aangezien de code verder gewoon klopt.
De site is hier te bezichtigen: http://www.bekok.eu/huizenruil
De fout die bij mij in IE (via parallels op Macbook @ 1280x800) wordt weergegeven is dat de navigatiebalk verkeerd naar rechts is verschoven en mijn inputvelden al helemaal krom naar rechts staan.
Hier kan je zien hoe het er uit hoort te zien.

[BastiaanN]

Voeg aan je klasse ul.navigation nog even de volgende attributen toe:

left:5px;
top:10px;

en zet in div.navigation nog even de volgende regel:
position:relative;

Omdat je die nu niet instelt pakt de ene browser de huidige positie terwijl de andere browser ze bijv. standaard op 0 instelt.

edit: natuurlijk gaat tie nu weer in firefox stuk, omdat die er standaard een margin van 10 pixels opgooit... dat probleem kan je dan weer oplossen door in de klasse ul.navigation ook nog toe te voegen;

margin-top:0px;

[ Voor 41% gewijzigd door BastiaanN op 28-05-2009 19:39 ]

[RobIII]

Dat een site valideert heeft geen drol te maken met hoe 'ie weergegeven wordt En wat je met "fraudeert" bedoelt ontgaat me compleet

[ Voor 26% gewijzigd door RobIII op 28-05-2009 19:34 ]

[YellowOnline]

Ik zie noch in IE78 noch in FF3 problemen.

Full size vergelijking hier.

In IE7 is het probleem er inderdaad.

En wat je met 'fraudeert' bedoelt ontgaat mij eveneens

@Bastiaan: Oeps, gecorrigeerd. Je weet meteen hoe vaak ik IE gebruik

[ Voor 87% gewijzigd door YellowOnline op 28-05-2009 19:55 ]

[Cadezo]

Even alles op een rijtje:

IE7: de menutekst verschuift naar rechts eveneens het zoekveld en inlogvelden.
Chrome 2, Firefox 3, Opera 9: ziet er niet helemaal uit zoals je wilt, want de menutekst is helemaal verschoven naar de bottom van het veld.

Je hebt nog wel meer dingen om naar te kijken dus...

[BastiaanN]

YellowOnline schreef op donderdag 28 mei 2009 @ 19:34:
Ik zie noch in IE7 noch in FF3 problemen om eerlijk te zijn.

Full size vergelijking hier.

En wat je met 'fraudeert' bedoelt ontgaat mij eveneens

no offense, maar dat is IE8 die doet het inderdaad prima, klik maar eens op het compatibilteitsknopje zodat hij wel naar IE7 mode springt...

[Noork]

Met Opera 9 zijn er ook nog wat foutjes met het menu. De items worden niet juist verticaal gecentreerd zoals bedoeld is.

[bekok]

Ik heb nu met dank aan BastiaanN de navigatiebalk goed weten te krijgen.
Nu alleen nog de input velden. Ik ben nu niet thuis dus ik kan er op het moment niet echt naar kijken, maar het leek me nog even handig om te melden dat het voorheen wel werkte. Echter toen kreeg ik de w3c validation niet goed. Ik moest namelijk nog een <fieldset> en een <legend> toevoegen. Nadat ik dit had gedaan en ze via css 'onzichtbaar' had gemaakt onstond het probleem van de verschoven velden. Grote kans dus dat het daar aan ligt. Even voor het gemak de code van mij css omtrent fieldset en legend:

fieldset {
border: none;
margin: 0px;
padding:0;
}

fieldset legend {
display: none;
}

Ik heb deze trouwens letterlijk van GoT geleend, maar er blijkt dus ergens iets te zitten wat er voor zorgt dat het foutief over komt in IE.

[BastiaanN]

Verander in je CSS stijlen FORM#inloggen en FORM#search de position naar "absolute" en voeg width: 190px toe, dat zou het truukje moeten doen.

[ Voor 7% gewijzigd door BastiaanN op 28-05-2009 23:25 ]

[bekok]

BastiaanN schreef op donderdag 28 mei 2009 @ 23:23:
Verander in je CSS stijlen FORM#inloggen en FORM#search de position naar "absolute" en voeg width: 190px toe, dat zou het truukje moeten doen.

Helemaal goed Hartstikke bedankt voor het helpen!