verschillende uitlijning in IE t.o.v. FF en Chrome

dinsdag 11 mei 2010 12:47

*zucht*

Sowieso altijd een goed begin:

1. Zorg voor een goede doctype (strict)
2. Zorg dat je code hieraan valideert (http://validator.w3.org/c...eggenzenoueigenlijk.nl%2F)

Acties:

dinsdag 11 mei 2010 13:01

Bosmonster schreef op dinsdag 11 mei 2010 @ 10:46:
Sowieso altijd een goed begin:

1. Zorg voor een goede doctype (strict)
2. Zorg dat je code hieraan valideert (http://validator.w3.org/c...eggenzenoueigenlijk.nl%2F)

een stricte doctype is zeker niet nodig (xhtml transitional is bijvoorbeeld ook een goede keuze, en biedt iets meer vrijheid), maar een goed geschreven doctype-declaratie bovenin je code is wel essentieel. Browsers die een foutieve doctype tegenkomen, renderen een pagina namelijk in een andere modus (quirks mode), wat voor veel problemen zorgt. Hier voorbeelden van goede doctypes en hier een interessant artikel over wat een doctype precies doet.

En inderdaad valideren met die hap. Niet alle foutjes kunnen aan IE worden toegekent, soms is het de developer die slordig is

[ Voor 7% gewijzigd door geert1 op 11-05-2010 12:48 ]

Acties:

BtM909

Watch out Guys...

geert1 schreef op dinsdag 11 mei 2010 @ 12:47:
[...]

een stricte doctype is zeker niet nodig (xhtml transitional is bijvoorbeeld ook een goede keuze, en biedt iets meer vrijheid)

Welke vrijheid zou je willen wat beyond een strict doctype gaat?

Ace of Base vs Charli XCX - All That She Boom Claps (RMT) | Clean Bandit vs Galantis - I'd Rather Be You (RMT)
You've moved up on my notch-list. You have 1 notch
I have a black belt in Kung Flu.

dinsdag 11 mei 2010 13:06

Acties:

R4gnax

geert1 schreef op dinsdag 11 mei 2010 @ 12:47:
[...]

een stricte doctype is zeker niet nodig (xhtml transitional is bijvoorbeeld ook een goede keuze, en biedt iets meer vrijheid),

Is het wel. Zeker voor IE, waar een document met een transitional doctype in 'almost standards compliant'-modus draait, wat o.a. een verschil in uitlijning inhoudt voor de CSS vertical-align property en inline replaced elementen.

dinsdag 11 mei 2010 13:11

Acties:

dinsdag 11 mei 2010 15:04

*zucht*

geert1 schreef op dinsdag 11 mei 2010 @ 12:47:
[...]

een stricte doctype is zeker niet nodig (xhtml transitional is bijvoorbeeld ook een goede keuze, en biedt iets meer vrijheid),

Een stricte doctype zorgt voor standardsmode in alle browsers, waar een transitional doctype zorgt voor almost-standardsmode in oudere browsers/IE.

Dus ja, als je wilt dat de rendering gelijk is dan is een strict doctype essentieel.

Als je vrijheden wilt met standardsmode, neem dan gewoon een (x)html5 doctype.

Acties:

dinsdag 11 mei 2010 15:19

BtM909 schreef op dinsdag 11 mei 2010 @ 13:01:
[...]

Welke vrijheid zou je willen wat beyond een strict doctype gaat?

Bijvoorbeeld het gebruik van iframes. Toegegeven, Ajax heeft dit minder noodzakelijk gemaakt, maar soms moet je bijvoorbeeld een legacy systeem in een nieuwe site plaatsen of dergelijke situaties. De praktijk is niet altijd elegant en perfect, vandaar dat ik transitional gebruik. De minieme verschillen tussen almost-standards-mode en standards-mode komen in de praktijk zelden of nooit naar voren.

Ik ben het met jullie eens dat een strict doctype in principe het beste is, en in veel situaties is dit prima toepasbaar. Als je echter voor klanten werkt met zeer uiteenlopende eisen en verwachtingen, of met een cms die niet de meest moderne code uitspuugt, dan kan het soms zijn dat je een target="_blank", een iframe of andere "verouderde" techniek niet kunt ontwijken. Vandaar transitional

[ Voor 4% gewijzigd door geert1 op 11-05-2010 15:07 ]

Acties:

woensdag 19 mei 2010 02:10

*zucht*

In HTML5 mag dat ook allemaal weer.

Acties:

woensdag 19 mei 2010 10:34

Topicstarter

Naar aanleiding van jullie hulp heb ik geprobeerd de boel iets te verbeteren. Echter vind ik dit nogal lastig, aangezien Wordpress (waarop de website is gebaseerd) werkt met templates, plugins, etc. en dus is het soms moeilijk een bepaalde regel te lokaliseren. Desondanks in ieder geval doctype veranderd en heb ik de belangrijkste errors eruit gehaald (de html en wat meta fouten). Helaas heeft het nog niet mogen baten.
Wel is me opgevallen dat als ik IE in een normal mode draai (dus niet quirks) hij de website dan inderdaad wel gewoon weergeeft. Dus is er dan een specifieke fout aan te wijzen?

Hoe kan ik al die 'NET-enabling start-tag requires SHORTTAG YES' warnings oplossen? Zou dat enig effect hebben? Kan ik niet iets instellen zodat IE mijn website niet in quirks mode weergeeft? Hopelijk kunnen jullie me nogmaals op de goede weg helpen. Dank

Acties:

woensdag 19 mei 2010 11:07

Zolang je een goede doctype gebruikt, dus die van HTML5 bijvoorbeeld, dan zit IE sowieso in standards modus, en dus niet in quirks. Dat is de manier om de rendering in te stellen.

En die shorttag yes warnings: Heeft vast te maken met je html-structuur. Tags die geen afzonderlijke sluit-tag hebben, zoals img, br en input, die sluit je als volgt: <img src="afbeelding.jpg" alt="omschrijving" />. Dus met aan het eind een spatie, dan een slash, dan vogelbekje sluiten. Dit geeft expliciet aan dat er geen sluit-tag verwacht hoeft te worden (de tag is self-closing), in tegenstelling tot bijvoorbeeld een a-tag: <a href="link.html">tekst</a>. Daar bestaat de tag dus uit 2 delen. Probeer daar dus even naar te kijken.

Acties:

Spinal

geert1 schreef op woensdag 19 mei 2010 @ 10:34:
Zolang je een goede doctype gebruikt, dus die van HTML5 bijvoorbeeld, dan zit IE sowieso in standards modus, en dus niet in quirks. Dat is de manier om de rendering in te stellen.

En die shorttag yes warnings: Heeft vast te maken met je html-structuur. Tags die geen afzonderlijke sluit-tag hebben, zoals img, br en input, die sluit je als volgt: <img src="afbeelding.jpg" alt="omschrijving" />. Dus met aan het eind een spatie, dan een slash, dan vogelbekje sluiten. Dit geeft expliciet aan dat er geen sluit-tag verwacht hoeft te worden (de tag is self-closing), in tegenstelling tot bijvoorbeeld een a-tag: <a href="link.html">tekst</a>. Daar bestaat de tag dus uit 2 delen. Probeer daar dus even naar te kijken.

Nee dus. Dat is alleen zo in XHTML, in "gewoon" HTML moet dat juist niet en dán krijg je die foutmelding (bijv. als je met PHP nl2br doet, die er van maakt ipv )

Full-stack webdeveloper in Groningen

woensdag 19 mei 2010 13:04

Acties:

mcDavid

ZanderZ schreef op woensdag 19 mei 2010 @ 11:07:
[...]

Nee dus. Dat is alleen zo in XHTML, in "gewoon" HTML moet dat juist niet en dán krijg je die foutmelding (bijv. als je met PHP nl2br doet, die er van maakt ipv )

Alleen maakt het HTML5 doctype geen onderscheid tussen XHTML en HTML, dus je mag zelf kiezen wat je gebruikt. Als je maar consequent bent.

woensdag 19 mei 2010 18:35

Acties:

Spinal

Maar hij heeft nu geen HTML5-doctype maar HTML4 (als de link in de openingspost nog klopt) en als je dan gaat valideren geeft hij daarop wel een fout

Full-stack webdeveloper in Groningen

donderdag 20 mei 2010 11:02

Acties:

donderdag 20 mei 2010 21:19

Ah, andersom dus, had even niet gekeken welke DOCTYPE er op dit moment gebruikt werd. Het probleem is in elk geval de self-closing tags. ZanderZ heeft helemaal gelijk dat in HTML4 tags worden gesloten als en in XHTML is het . Daar komen de foutmeldingen vandaan. In HTML5 zou ik overigens het liefst wel afsluiten met />, ik vind het vele malen duidelijker en vollediger. Maar dat terzijde.

[ Voor 9% gewijzigd door geert1 op 20-05-2010 11:03 ]

Acties:

donderdag 20 mei 2010 21:59

Topicstarter

Daar ben ik weer. Ik heb het doctype veranderd naar xhtml (niet html5 omdat ik de website lees dat dat nog niet ondersteund wordt?!). Nu nog slechts 1 error en geen warnings. Gaat er steeds beter uitzien dus. Die error heeft te maken met een link target en dat zet wordpress er standaard in, nogal gedoe om die error eruit te halen. Kan me bovendien niet voorstellen dat hij zo belangrijk kan zijn. Echter is de uitlijning nog steeds niet verholpen. Dus het lijkt niet aan die validation te liggen of wel? Kan het wellicht mijn een stijl-element of het CSS te maken hebben?! Graag jullie hulp..
Hoe krijg ik IE zo ver dat hij niet in quirks mode draait, dat helpt ook al veel denk ik. Hoewel ik het dan natuurlijk niet echt oplos.

Veel dank

Acties:

vrijdag 21 mei 2010 08:51

*zucht*

mcDavid schreef op woensdag 19 mei 2010 @ 13:04:
[...]

Alleen maakt het HTML5 doctype geen onderscheid tussen XHTML en HTML, dus je mag zelf kiezen wat je gebruikt. Als je maar consequent bent.

Das niet helemaal waar. Als je XHTML5 wilt gebruiken zul je dit wel als xml moeten serveren (en de rest van de XML-meuk die we gewend zijn).

[ Voor 6% gewijzigd door Bosmonster op 20-05-2010 22:00 ]

Acties:

mcDavid

Murderer schreef op donderdag 20 mei 2010 @ 21:19:
Daar ben ik weer. Ik heb het doctype veranderd naar xhtml (niet html5 omdat ik de website lees dat dat nog niet ondersteund wordt?!). Nu nog slechts 1 error en geen warnings. Gaat er steeds beter uitzien dus. Die error heeft te maken met een link target en dat zet wordpress er standaard in, nogal gedoe om die error eruit te halen. Kan me bovendien niet voorstellen dat hij zo belangrijk kan zijn. Echter is de uitlijning nog steeds niet verholpen. Dus het lijkt niet aan die validation te liggen of wel? Kan het wellicht mijn een stijl-element of het CSS te maken hebben?! Graag jullie hulp..

HTML5 is backward compatible en het doctype wordt door alle browsers ondersteund, dat zou dus geen probleem geweest zijn. Maar xhtml (strict blijkbaar) is ook een prima keuze.
Die error op dat target attribute zou ik lekker negeren als ik jou was. Die heeft iig niets met de uitlijning te maken. Je moet het inderdaad in je eigen code zoeken, maar nu deze valideert heb je wel een betere uitgangspositie.

Hoe krijg ik IE zo ver dat hij niet in quirks mode draait, dat helpt ook al veel denk ik. Hoewel ik het dan natuurlijk niet echt oplos.
Veel dank

Door een strict doctype te gebruiken. Maar dat doe je dus al.

offtopic:
[quote]Bosmonster schreef op donderdag 20 mei 2010 @ 21:59:
[...]

Das niet helemaal waar. Als je XHTML5 wilt gebruiken zul je dit wel als xml moeten serveren (en de rest van de XML-meuk die we gewend zijn).
[/quote]

...en dat geeft je gelijk de garantie dat de helft van de browsers compleet over de zeik gaan. Dat is ook waarom ik geen voorstander ben van XHTML, want zolang je het verstuurt als text/html, wordt het gewoon gerenderd als (technisch invalid) HTML.

woensdag 26 mei 2010 12:02

Acties:

woensdag 26 mei 2010 12:12

Topicstarter

mcDavid schreef op vrijdag 21 mei 2010 @ 08:51:
[...]

HTML5 is backward compatible en het doctype wordt door alle browsers ondersteund, dat zou dus geen probleem geweest zijn. Maar xhtml (strict blijkbaar) is ook een prima keuze.
Die error op dat target attribute zou ik lekker negeren als ik jou was. Die heeft iig niets met de uitlijning te maken. Je moet het inderdaad in je eigen code zoeken, maar nu deze valideert heb je wel een betere uitgangspositie.
[...]

Door een strict doctype te gebruiken. Maar dat doe je dus al.

offtopic:
[quote]Bosmonster schreef op donderdag 20 mei 2010 @ 21:59:
[...]

Das niet helemaal waar. Als je XHTML5 wilt gebruiken zul je dit wel als xml moeten serveren (en de rest van de XML-meuk die we gewend zijn).
[/quote]

...en dat geeft je gelijk de garantie dat de helft van de browsers compleet over de zeik gaan. Dat is ook waarom ik geen voorstander ben van XHTML, want zolang je het verstuurt als text/html, wordt het gewoon gerenderd als (technisch invalid) HTML.

Ok. Dus doctype en modus lijken nu de juiste. Ik heb een groot gedeelte van het weekend de code een aantal keer doorgenomen en met behulp van developer tools steeds bepaalde elementen uitgeschakeld om te kijken of de uitlijning verspringt, maar helaas. Ik heb ALLE elementen nagelopen. Is er niemand van jullie die ziet waar het in moet zitten?

Een andere oplossing zou zijn dat IE de pagina gewoon in zijn normale modus leest ipv in die quirks mode. Ik heb begrepen dat dat gebeurt dmv een strict modus. Dat heb ik inmiddels, maar het verandert niks. Nogmaals hoop ik dat jullie kunnen helpen. Veel dank.

Acties:

Rub3s

+3 , omdat het kan

als ik met firebug in firefox de 'margin: 0 auto;' uitzet van 'div id= wrapper', dan zie hij er ongeveer net zo uit als in ie. zou het daar niet iets mee te maken hebben?

(of zeg ik nu iets wat al heel lang bekend was?)

[edit]laat maar, de divs worden nu wel gecentreerd

[ Voor 25% gewijzigd door Rub3s op 26-05-2010 12:18 ]

woensdag 26 mei 2010 12:18

Acties:

woensdag 26 mei 2010 12:31

Topicstarter

Rub3s schreef op woensdag 26 mei 2010 @ 12:12:
als ik met firebug in firefox de 'margin: 0 auto;' uitzet van 'div id= wrapper', dan zie hij er ongeveer net zo uit als in ie. zou het daar niet iets mee te maken hebben?

(of zeg ik nu iets wat al heel lang bekend was? )

Dat is niet helemaal waar. Als je goed kijkt, is die in IE nog verder naar links uitgelijnd. Maar wat zou er gebeuren als ik een align: center; aan dat wrapper element toevoeg? Vanavond maar eens proberen.

Acties:

Rub3s

+3 , omdat het kan

excuses voor het slechte lezen van mij, alleen archief pagina deed het dus niet goed.

http://csscreator.com/node/26128

daar hebben ze ook problemen met dat css statement, en die gast lost het op door het commentaar van boven weg te halen (als ik dat wel goed lees zo snel XD ). zou kunnen dat dat bij jou ook het probleem is.

woensdag 26 mei 2010 13:24

Acties:

Spinal

Klopt: de doctype moet helemaal bovenaan, daar mag geen commentaar voor, anders gaat IE alsnog in quirksmode.

-edit-
Zie bijv. Wikipedia:

Quirks mode in any version of IE will also be triggered if anything but whitespace precedes the DOCTYPE. For example, if a hypertext document contains a comment or any tag before the DOCTYPE, IE will use quirks mode:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

[ Voor 68% gewijzigd door Spinal op 26-05-2010 13:27 ]

Full-stack webdeveloper in Groningen

woensdag 26 mei 2010 13:55

Acties:

vrijdag 14 januari 2011 05:11

Topicstarter

ZanderZ schreef op woensdag 26 mei 2010 @ 13:24:
Klopt: de doctype moet helemaal bovenaan, daar mag geen commentaar voor, anders gaat IE alsnog in quirksmode.

-edit-
Zie bijv. Wikipedia:

[...]

Relaxt, ik ga dat zsm proberen. Veel dank.

EDIT: Het is gelukt. Die comment deed het hem! Veel dank!

[ Voor 7% gewijzigd door bart1074 op 26-05-2010 23:09 ]

Acties:

vrijdag 14 januari 2011 08:10

Topicstarter

Daar ben ik weer.
Andere website, zelfde probleem min of meer.

Ik heb weer een website gebouwd en inmiddels zo goed mogelijk gevalideerd. De laatste paar errors en waarschuwingen kan ik niet echt verhelpen om de functionaliteit van mijn website te behouden, volgens mij.

Bovendien zit daar het probleem niet. Om de facebook status te laten heb ik een venster gebouwd met behulp van divs. In zowel FF als Chrome lijnen deze uit zoals ik dat wil. Eigenlijk is de website in deze beide browsers precies zoals ik het voor ogen heb.

In IE komt hij er echter anders uit te zien op twee punten (voornamelijk). Dit komt omdat de pagina laadt in de IE7 mode. In de IE8 mode ziet de pagina er namelijk ook prima uit. Het probleem heeft te maken met padding, volgens mij.

Als je dus kijkt naar het venster waarin de facebook status updates worden opgehaald, dan moet het witte div gedeelte gecentreerd over het blauwe div gedeelte vallen. Op een of andere manier verschuift IE deze een aantal pxs naar rechts. Dit gebeurt ook met mijn menu bar bovenin. Ik heb al goed gekeken, maar kom er niet uit.

Hopelijk ziet een van jullie het probleem. Bij voorbaat dank.

Acties:

Verwijderd

Murderer schreef op vrijdag 14 januari 2011 @ 05:11:
Hopelijk ziet een van jullie het probleem. Bij voorbaat dank.

Als je een link plaatst o.i.d. kan ik misschien iets zien. Sowieso zit er in IE7 een aantal css elementen die niet worden 'herkend'.
http://www.smashingmagazi...ernet-explorer-6-7-and-8/

vrijdag 14 januari 2011 12:03

Acties:

vrijdag 14 januari 2011 12:05

Topicstarter

Verwijderd schreef op vrijdag 14 januari 2011 @ 08:10:
[...]

Als je een link plaatst o.i.d. kan ik misschien iets zien. Sowieso zit er in IE7 een aantal css elementen die niet worden 'herkend'.
http://www.smashingmagazi...ernet-explorer-6-7-and-8/

Excuus, het was al laat: Het gaat om deze pagina.

Acties:

vrijdag 14 januari 2011 12:15

*zucht*

Murderer schreef op vrijdag 14 januari 2011 @ 12:03:
[...]

Excuus, het was al laat: Het gaat om deze pagina.

Ik zou eerst dit topic even doorlezen en de tips uitvoeren die er genoemd worden.

Zoals een strict doctype en je code valideren.

Acties:

vrijdag 14 januari 2011 12:19

Topicstarter

Bosmonster schreef op vrijdag 14 januari 2011 @ 12:05:
[...]

Ik zou eerst dit topic even doorlezen en de tips uitvoeren die er genoemd worden.

Zoals een strict doctype en je code valideren.

Dankje zal ik doen. Welk topic gaat het om?

Acties:

vrijdag 14 januari 2011 12:45

*zucht*

verschillende uitlijning in IE t.o.v. FF en Chrome

Acties:

vrijdag 14 januari 2011 14:40

Topicstarter

Bosmonster schreef op vrijdag 14 januari 2011 @ 12:19:
verschillende uitlijning in IE t.o.v. FF en Chrome

Haha ik dacht dat je 'dit topic' vergeten was door te linken.
Ik zal opnieuw valideren, en had dit topic al grondig doorgelezen. Desondanks zal ik het straks weer doen en dan kom ik terug met m'n bevindingen. Excuses

Acties:

vrijdag 14 januari 2011 14:58

Topicstarter

Nou ik heb hem een aantal maal gevalideerd. Er blijven 4 errors over, maar deze zijn voor belang van het functioneren van mijn website en veroorzaken mijn inziens het probleem niet.

Het probleem heeft te maken de uitlijning van het profielfotootje dat ik oproep. Zoals te zijn was lijnt de witte achtergrond namelijk precies uit met de tekst naast het profielfotootje. Dit had dus blijkbaar te maken met de margins die ik deze afbeelding had meegegeven.

Aangezien het scriptje van facebook de afbeelding per se een ID mee moet geven moet ik dus wel <img id="" /> werken en kan ik helaas niet class gebruiken. Ik had eerst ook een class eigenschap aan de afbeelding toegevoegd, maar toen ik die weghaalde schoof de witte achtergrond naar de juiste plek. Echter is de afbeelding nu verkeerd uitgelijnd. Hoe lijn ik deze afbeelding ik nu goed uit in CSS nu ik te maken heb met een id ipv class. Als ik een margin toevoeg aan deze id gebeurt er namelijk niets. Blijkbaar kan dat niet..

Acties:

moozzuzz

Je kan perfect een class én een id vastleggen bij een element.

HTML:

1	<htmlelement id="foo" class="bar soda" title="some title">

vrijdag 14 januari 2011 15:56

Acties: