Lay-out flipt in Firefox en Internet Explorer

[Svardskampe]

Ik ben vrij nieuw tot webdesign (wat betreft de code zelf) en zit met een probleempje dat waarschijnlijk over zal komen als een beginnersfout:

Ter illustratie hoe het eruit ziet in Chrome (alsmede Safari 4 en Opera 9.6):
Chrome

Maar helaas blijkt de lay-out allesbehalve goed te werken in FireFox, en al helemaal niet in Internet Explorer.
FireFox 3 opgelost
Internet Explorer 8

Mijn vraag is nu, hoe komt dit in principe dat deze webbrowsers zo 'verkeerd' renderen en voornamelijk; wat kan ik eraan doen?

Complete zippack incl. code: Met dank aan Hooglander1 voor de hosting

[ Voor 15% gewijzigd door Svardskampe op 03-06-2009 02:25 ]

[BtM909]

Hoe gaan we dat kunnen beoordelen zonder 1 letter code? Lees 't Webdesign, Markup & Clientside Scripting Beleid nog eens door en voeg relevante code toe (bijvoorbeeld van 1 onderdeel dat je hebt geisoleerd) aan je startpost.

Overigens heb je voor FF en IE ook devtools beschikbaar (respectievelijk FireBug en IE developer bar) waarbij je al snel kan achterhalen waarom een bepaald element marges e.d. heeft

[painkill]

Met mijn beetje kennis hoop ik dat ik het goed heb.

Je moet namelijk ook de border dikte instellen bij Firefox en IE. Dus een extra tekst met width = 0 bij de gebieden.
En die Paarse framen was ook iets makkelijks, maar die ben ik even kwijt

[Verwijderd]

border = none?

[Svardskampe]

code:

<table border="0" frame="void" cellspacing="0" cellpadding="0" frame=box align="center">

Geef maar suggesties wat ik nog meer op 0 kan zetten

Mijn excuses voor het gebrek aan de code, ik zat te bedenken hoe ik het gehele ding het makkelijkst toonbaar te kunnen maken voor iedereen. RS is niet ideaal, het kan maar 10x gedownload worden vanaf die URL...

Bij een width aan te passen bij die gebieden flipt de afbeelding compleet..wat mij ook logisch lijkt

[ Voor 12% gewijzigd door Svardskampe op 02-06-2009 23:47 ]

[crisp]

Het gaat om de ruimte onder de plaatjes? Dat komt omdat plaatjes standaard op de baseline worden uitgelijnt en niet op bottom, dat is op te lossen door die plaatjes (in CSS) een text-align:bottom te geven of desnoods display:block. Aan de andere kant zijn table-based layouts echt niet meer van deze tijd, en het gebruik van non-standaard attributen (frame?) en deprecated/presentationele attributen (align) is ook af te raden.

[mcDavid]

begin eens hier:
http://validator.w3.org/

en kom weer terug als je code minder dan ~5 bugs bevat.

[Svardskampe]

Ik kan meedelen dat ik het paarse frameprobleem heb opgelost d.m.v. border="0" toe te voegen aan elk probleemplaatje afzonderlijk. (Dank aan Painkill voor de info) Ook de 'spatie' gevormd is weggepoetst door align="center" (dank aan Crisp me in de goede denkrichting te zetten) aan de probleemplaatjes mee te geven. De template werkt nagenoeg perfect in FireFox nu

Alleen blijft Internet Explorer hoe dan ook een probleem, en ook w3 geeft er geen antwoord op.
(Na een tijd met die validator aan het klooien geweest te zijn wilde de template al helemaal niet meer werken, zelfs niet meer in Chrome )
Hierover zit ik toch echt met mijn handen in het haar;

Wanneer ik het stukje tussen de header en de menubalk align naar center, werkt deze fatsoenlijk in IE, maar niet meer in alle andere browsers en vice versa.
Ook wil het dropdownboxje onder de tweede knop niet netjes onder de knop zich laten afbeelden, maar verschijnt het pertinent naast de knop.

[ Voor 18% gewijzigd door Svardskampe op 03-06-2009 02:20 ]

[Noork]

Misschien is het handig om een werkend voorbeeld online te zetten? Verder zou ik om te testen ook al het javascript gedoe er uit gooien. Wat heb je trouwens allemaal aangepast? Doctype toegevoegd bijvoorbeeld?

[mcDavid]

Sedative schreef op woensdag 03 juni 2009 @ 02:08:

Alleen blijft Internet Explorer hoe dan ook een probleem, en ook w3 geeft er geen antwoord op.

Zolang je in quirksmode werkt ga je dat sowieso niet voor elkaar krijgen met één CSS.

[ Voor 59% gewijzigd door mcDavid op 03-06-2009 08:41 ]

[crisp]

Sedative schreef op woensdag 03 juni 2009 @ 02:08:
Ik kan meedelen dat ik het paarse frameprobleem heb opgelost d.m.v. border="0" toe te voegen aan elk probleemplaatje afzonderlijk.

Waarom los je dat nou weer op met presentationele attributen in html? Ik gok dat dit gewoon de link border is wat simpel met een stukje CSS is op te lossen:

Cascading Stylesheet:

a img { border: none;

Ook de 'spatie' gevormd is weggepoetst door align="center" (dank aan Crisp me in de goede denkrichting te zetten) aan de probleemplaatjes mee te geven.

Je denkrichting is ook hier nog steeds fout Los dit nou ook gewoon netjes met CSS op, lukraak align gaan toevoegen zonder dat je weet wat dit nou eigenlijk inhoud is gewoon symptoombestrijding maar lost het feitelijke probleem niet op.

Alleen blijft Internet Explorer hoe dan ook een probleem, en ook w3 geeft er geen antwoord op. (Na een tijd met die validator aan het klooien geweest te zijn wilde de template al helemaal niet meer werken, zelfs niet meer in Chrome )
Hierover zit ik toch echt met mijn handen in het haar;

Wat voor doctype gebruik je (if any)? En wat zegt de validator over je markup?

Wanneer ik het stukje tussen de header en de menubalk align naar center, werkt deze fatsoenlijk in IE, maar niet meer in alle andere browsers en vice versa.
Ook wil het dropdownboxje onder de tweede knop niet netjes onder de knop zich laten afbeelden, maar verschijnt het pertinent naast de knop.

Mijn tip: lees je eerst eens in in het gebruik van CSS voor zaken als styling en positionering (en misbruik daar geen tables voor).

[Svardskampe]

Dank je wel in ieder geval voor de informatie. Om deze template nog drastisch te gaan aanpassen is onnodige moeite en uren die ik erin steek, maar ik zal zeker de wijse antitable en pro-css raad onthouden voor volgende zaken

En ik had een doctype tag (html 4.01 Strict) erin gegooid na die validator bekenen te hebben, maar de uitkomst zorgde er voor dat alle andere webbrowser net zo omgaan met mijn template als IE doet Wat mij niet de bedoeling lijkt. Waarschijnlijk is het beste advies dat jullie mij zouden kunnen geven om de complete site overnieuw te doen, maar dan flink wat csswerk te gaan doen.

[Bosmonster]

Sedative schreef op woensdag 03 juni 2009 @ 14:10:
Dank je wel in ieder geval voor de informatie. Om deze template nog drastisch te gaan aanpassen is onnodige moeite en uren die ik erin steek, maar ik zal zeker de wijse antitable en pro-css raad onthouden voor volgende zaken

En ik had een doctype tag (html 4.01 Strict) erin gegooid na die validator bekenen te hebben, maar de uitkomst zorgde er voor dat alle andere webbrowser net zo omgaan met mijn template als IE doet Wat mij niet de bedoeling lijkt. Waarschijnlijk is het beste advies dat jullie mij zouden kunnen geven om de complete site overnieuw te doen, maar dan flink wat csswerk te gaan doen.

Door een goede doctype gebruiken zorg je juist dat alle browsers in basis hetzelfde renderen. Dat de browsers daar nog onderling in verschillen is een andere zorg. Je zorgt met de doctype in ieder geval dat de basis gelijk is, zoals het gebruikte boxmodel. Anders loop je uiteindelijk al die boxmodel verschillen met talloze hacks alsnog weer goed te prutsen, wat natuurlijk al helemaal niet opschiet

[ Voor 6% gewijzigd door Bosmonster op 03-06-2009 14:22 ]

[mcDavid]

Sedative schreef op woensdag 03 juni 2009 @ 14:10:
Dank je wel in ieder geval voor de informatie. Om deze template nog drastisch te gaan aanpassen is onnodige moeite en uren die ik erin steek, maar ik zal zeker de wijse antitable en pro-css raad onthouden voor volgende zaken

En ik had een doctype tag (html 4.01 Strict) erin gegooid na die validator bekenen te hebben, maar de uitkomst zorgde er voor dat alle andere webbrowser net zo omgaan met mijn template als IE doet Wat mij niet de bedoeling lijkt.

Sorry, dat was toch júíst wat je wou? dat het er in alle browsers ongeveer het zelfde uit ziet? Je hebt nu ontworpen naar de quirksmode van Webkit (chrome en safari). Die lijkt wat op de quirksmode van Opera en Firefox, maar IE maakt er echt een eigen feestje van als je in quirksmode werkt. In strict mode renderen alle browsers 99,9% het zelfde. Met uitzondering van IE (6 en) 7, maar ook die komen zo iig al een heel stuk dichter in de buurt bij wat je zou verwachten.

Waarschijnlijk is het beste advies dat jullie mij zouden kunnen geven om de complete site overnieuw te doen, maar dan flink wat csswerk te gaan doen.

Och, dat blijf je houden. Als je nog 10 websites gebouwd bent zul je nog wel eens terugkijken en lachen om het "prutswerk" waar je eerder zo trots op was De eerste serieuze website die ik maakte heb ik 5x van de grond af opnieuw gemaakt voor 'ie online ging...

[Svardskampe]

Nee, wat ik wilde is dat het in alle browsers zou werken. Niet dat geen enkele browser werkte

Maar goed, ik weet dat dit prutswerk is, en ik ben er ook nooit trots op geweest. Zelfs niet toen ik mijn beginpost opstelde. (Ik heb al genoeg ervaring opgedaan dat je nooit iets perfect doet vanaf de eerste keer).
Ik denk dat ik het voornamelijk op het louter design houd hierna

Wanneer alles compleet is, zal ik nog eens een linkje plaatsen.

[imp4ct]

offtopic:
't is Waarschijnlijk niet echt on-topic. Maar het niveau gaat toch zienderogen achteruit op GoT. Vroeger werden zulke topics gewoon direct gesloten. 'k Merk meer en meer dat mensen hier een post plaatsen en "hopen" dat het probleem voor hen wordt opgelost, zonder dat ze zelf echt iets moeten doen.

De website die ik op de foto kan zien is zeer makkelijk browsercompatibel te maken. Je moet gewoon gebruik maken van de juiste elementen. 't Valt op dat je weinig of geen gebruik maakt van CSS, zolang je dat niet fatsoenlijk gaat doen zullen de problemen blijven komen.

Hier misschien eens een kijkje nemen : http://www.handleidinghtml.nl/

'k Heb vlug even de tijd genomen je website snel even om te zetten.
Link: http://www.devtrix.be/grammatica/

't Is dus echt niet moeilijk, maar je moet je wel eens wat meer gaan verdiepen in CSS en HTML denk ik

[ Voor 50% gewijzigd door imp4ct op 05-06-2009 14:53 . Reden: toch maar beetje helpen ]

[Verwijderd]

om je even te helpen, ik vermoed dat je img borders niet op 0 staan. <img border="0"… />

kan je ook met css fixen.