Vraag & Antwoord

Webdesign (HTML, CSS, Flash)

IE en firefox geven allebei anders weer

8 antwoorden
  • De website wordt anders weergegeven in IE dan in Firefox. Zowel tekst als plaatjes. Wat moet je aanpassen om de website zowel in IE als in Firefox hetzelfde eruit te laten zien ? Bestaat er ook een oplossing voor de verschillende beeldscherm formaten ? mvg, Robbert
  • Je beiden vragen hebben ongeveer hetzelfde antwoord, nl goede code schrijven. Wat je zult moeten aanpassen om de site overal goed te laten werken is niet te zeggen zonder dat we de code onder ogen hebben gehad. Nu is het een beetje koffie dik kijken. Er zijn zoveel dingen die je fout kan doen, geen/afwijkende DOCTYPE, leipe geneste tabel constructies met frames ed, propriëtaire IE code gemaakt met een lekkere oude versie van front(stront)page...enz. Dus, plak er ff een zooi code bij, of doe een link posten van je site. Nog beter natuurlijk zou zijn dat je zelf gaat zoeken en kijken hoe het bij andere sites is gedaan. Heel makkelijk, met de rechter muis button binnen een site klikken (maar meestal niet boven een plaatje) en dan "view source" (of het nl equivalent), presto. Maar zo te horen aan de basale aard van je vragen kan je beter bij het begin beginnen :[url=http://forum.computertotaal.nl/phpBB2/viewtopic.php?t=186553]link[/url]... Volg de linkjes naar de tutorial sites. Het leren van een site maken met behulp van html en css is niet moeilijk, maar zeker ook niet makkelijk.
  • Op http://uitest.com/en/check/ kun je je website invoeren om deze te laten checken op allerlei standaarden. Als je website voldoet aan de standaarden zou elke browser hem fatsoenlijk weer moeten geven. Op de testsite die ik hierboven noemde zijn een aantal tests te vinden die ook aangeven wat er mis in de "broncode" van je site.
  • Men kan wel aangeven dat je een correct doctype moet gebruiken om browserverschillen te verminderen (niet zomaar een doctype, maar een correct doctype), maar dan nog zullen er verschillen blijven. Daar heb je kennis voor nodig. Men kan wel aangeven dat je naast het beeldschermformaat ook nog moet weten dat de tekstgroottes per browser verschillen, en ook per gebruiker kunnen verschillen door eigen instellingen, waardoor je tegenwoordig een site moet bouwen die op vanalles is voorbereid, maar ook daar is kennis voor nodig. Verder moet je weten dat zoekmachines jouw code lezen. Sites met nette code en een heldere tekststructuur, zonder frames en/of tabellen voor layoutdoeleinden, vinden zoekmachines veel handiger; die sites scoren dus beter. M.a.w. het zijn niet wat 'trucjes' die je moet weten. Wel kun je uitgaan van het volgende: gebruik een valide doctype. Gebruik geen frames, of tabellen voor opmaak. Maak structuur in je pagina door de paginakop in een h1 te zetten, een paragraafkop in een h2, opsommingen in ul of ol, etc.. En als je site er niet uitziet in Fx maar wel in IE, dan wil dat bijna altijd zeggen dat je je site verkeerd hebt gebouwd. Ga er daarom vanuit dat Fx het juist weergeeft (of Opera, of Safari, maar [i:4677de5c02]niet[/i:4677de5c02] IE). En zulke info vind je allemaal via het topic dat Drewster aangaf.
  • Dit is de link naar het menu. http://www.freewebs.com/kenjirobbert/index3.html Deze wordt in IE anders weergegeven dan in Firefox. In Firefox is het submenu goed, maar in IE verschijnt hij boven in het beeld. Ook de menu randjes (los van het menu) staan op een andere plaats. Weet iemand waar de fout zit ? mvg, Robbert
  • Tja, waar te beginnen... Ten eerste gebruik je [b:8fa14b2747]veel[/b:8fa14b2747] te [b:8fa14b2747]veel[/b:8fa14b2747] divs die helemaal nergens toe dienen. Je kunt ook css toepassen op andere elementen dan divs, namelijk op alle elementen. Maar laat ik meer basaal beginnen. Zo ongeveer elk element in html heeft een intrinsieke betekenis. Van veel elementen is deze behoorlijk voor de hand liggend zoals van een link element, of paragraaf element. Als je iets in je pagina zet kan je dat bijna altijd zetten in een element met een betekenis, tekst in een paragraaf, kopjes in een koptekst element, enz. De div en span elementen hebben niet echt een intrinsieke betekenis anders dan dat het respectievelijk, ongedefinieerde block-level en inline elementen zijn. Het zijn hulpmiddelen om delen van je site te "partitioneren" en stijl te geven. Je moet ze gebruiken als je ontwerp ze vereisen en anders eigenlijk niet. Jouw ontwerp vereist ongeveer 5 divs (3 wil ook), je gebruikt er meer dan 30. Next: Het gebruik van plaatjes. Als ik naar je pagina kijk dan heb je eigenlijk precies 0 plaatjes nodig om het effect te krijgen dat je nu hebt. Het kan allemaal via achtergrond kleuren en borders in de css. Het gebruik van plaatjes voor het krijgen van borders is echt een first voor mij :). Een achtergrond kleur mee geven is ook te prefereren boven een achtergrond plaatje als dat kan, een plaatje moet worden gedownload, dus meer plaatjes = langere laad-tijd en die wil je zo kort mogelijk. Next: positionering. Het gebruik van absolute positionering in je ontwerp is nergens voor nodig en veroorzaakt vaak, en hier dus ook, problemen met cross-browser comptabiliteit. Ga [url=http://www.sceneone.nl/positionering/positie.php]dit[/url] maar eens goed doorlezen. Heel die site is denk ik wel bruikbaar voor je... Nu denk je misschien [i:8fa14b2747]"dat is allemaal leuk en wel, maar dat vroeg ik niet"[/i:8fa14b2747]. En misschien lijkt dat zo, maar dit is wel het antwoord op je vraag. De reden dat de site er niet op alle browsers gelijk uit ziet wordt veroorzaakt doordat je code gewoon alles behalve optimaal is. Het is niet echt te doen om te zeggen [i:8fa14b2747]"verander dit en dit en dan is het goed"[/i:8fa14b2747], want dan kan ik de hele pagina net zo goed helemaal opnieuw schrijven. Dit is waarschijnlijk niet het antwoord waar je naar opzoek was maar het is niet anders, sorry :wink: PS: Is de site gemaakt met de WYSIWYG functie van Dreamweaver? Zo ja, dan zou ik nog ff een zooi tutorials volgen. Die kan je wel op de zelfde plek vinden als waar je DW vandaan hebt, zoek maar eens op Lynda.com icm dreamweaver (:oops:)
  • Ik heb gedaan zoals je adviseerde en volgens mij moet het nu kloppen, toch geeft ie hem niet perfect weer(zie screenshots hieronder) wat doe ik precies fout ?: http://www.freewebs.com/kenjirobbert/test/index2.html Dit probleem doet en deed zich steeds voor: http://www.freewebs.com/kenjirobbert/Firefox.jpg http://www.freewebs.com/kenjirobbert/IE.jpg Dit gebeurt nu: Zo ziet het er nu uit in internet explorer (zowel op PC als wanneer je hem bekijkt op de server): http://www.freewebs.com/kenjirobbert/test/IE%20op%20server.PNG Zo ziet het eruit in Firefox (eerste is op pc en de tweede link is op de server) http://www.freewebs.com/kenjirobbert/test/Firefox%20op%20pc.PNG http://www.freewebs.com/kenjirobbert/test/Firefox%20op%20server.PNG
  • Dat ziet er al een heel stuk beter uit! Hierover: [quote:e854412a85="KenjiRobbert"]Dit gebeurt nu: Zo ziet het er nu uit in internet explorer (zowel op PC als wanneer je hem bekijkt op de server): http://www.freewebs.com/kenjirobbert/test/IE%20op%20server.PNG Zo ziet het eruit in Firefox (eerste is op pc en de tweede link is op de server) http://www.freewebs.com/kenjirobbert/test/Firefox%20op%20pc.PNG http://www.freewebs.com/kenjirobbert/test/Firefox%20op%20server.PNG[/quote:e854412a85]Ik bekijk je site, neem ik aan, op de server en zie geen verschil met het plaatje van je PC... http://www.freewebs.com/kenjirobbert/test/index2.html vs. http://www.freewebs.com/kenjirobbert/test/Firefox%20op%20server.PNG Over dat menu, om erachter te komen hoe dat zit zou ik je css en misschien ook de js moeten doornemen, dat kan tijd rovend worden en daar heb ik niet heel erg veel zin in. Is er een reden dat je dit menu persee gebruik. De code ziet er niet heel erg gebruikers vriendelijk uit. Ik zou je eigenlijk willen adviseren om een CSS-only menu te gebruiken bv deze van CSSPlay (zelf te modificeren natuurlijk): http://www.cssplay.co.uk/menus/flyoutt.html

Beantwoord deze vraag

Weet jij het antwoord op deze vraag? Registreer of meld je aan met je account

Dit is een gearchiveerde pagina. Antwoorden is niet meer mogelijk.