Vraag & Antwoord

Webdesign (HTML, CSS, Flash)

Website in IE is anders dan in FireFox

17 antwoorden
  • Hallo allemaal, Mijn website laat iets heel anders in Internet Explorer zien dan in FireFox. Nou heb ik al wat gelezen op het forum dat als je website in Internet Explorer goed word weergegeven en in FireFox niet je het bijna altijd fout doet... Nou is mijn vraag: Wat doe ik fout? :) Website: www.albeda2c.tk index.php: [code:1:b9d92ea006]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <link rel="stylesheet" type="text/css" href="opmaak.css" /> <SCRIPT LANGUAGE="JavaScript"> <!-- Begin loadImage1 = new Image(); loadImage1.src = "images/homebutton2.jpg"; staticImage1 = new Image(); staticImage1.src = "images/homebutton1.jpg"; loadImage2 = new Image(); loadImage2.src = "images/agendabutton2.jpg"; staticImage2 = new Image(); staticImage2.src = "images/agendabutton1.jpg"; // End --> </script> </head> <body> <div class= "container"> <div class= "header"> <img src= "images/index.jpg"> <!-- De banner --> </div> <div class= "content"> <!-- Alles komt in de content te staan --> <div class= "homebutton"> <!-- De home button --> <a href ="index.php" onmouseover ="image1.src=loadImage1.src;" onmouseout ="image1.src=staticImage1.src;"> <img name ="image1" src ="images/homebutton1.jpg" border =0> </a> <div class= "agendabutton"> <!-- De agenda button --> <a href ="agenda.php" onmouseover ="image2.src=loadImage2.src;" onmouseout ="image2.src=staticImage2.src;"> <img name ="image2" src ="images/agendabutton1.jpg" border =0> </a> <div class= "tekst"> <!-- Hier komt de tekst in te staan --> <h2>Home</h2> Welkom op de website voor klas 2C. <br> Deze website is nog ver van af maar jullie kunnen alvast gebruik maken van de online agenda. </div> </div> </div> </div> </div> </body> </html>[/code:1:b9d92ea006] agenda.php: [code:1:b9d92ea006] <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <link rel="stylesheet" type="text/css" href="opmaak.css" /> <SCRIPT LANGUAGE="JavaScript"> <!-- Begin loadImage1 = new Image(); loadImage1.src = "images/homebutton2.jpg"; staticImage1 = new Image(); staticImage1.src = "images/homebutton1.jpg"; loadImage2 = new Image(); loadImage2.src = "images/agendabutton2.jpg"; staticImage2 = new Image(); staticImage2.src = "images/agendabutton1.jpg"; // End --> </script> </head> <body> <div class= "container"> <div class= "header"> <img src= "images/index.jpg"> <!-- De banner --> </div> <div class= "content"> <div class= "homebutton"> <!-- De home button --> <a href ="index.php" onmouseover ="image1.src=loadImage1.src;" onmouseout ="image1.src=staticImage1.src;"> <img name ="image1" src ="images/homebutton1.jpg" border =0> </a> <div class= "agendabutton"> <!-- De agenda button --> <a href ="agenda.php" onmouseover ="image2.src=loadImage2.src;" onmouseout ="image2.src=staticImage2.src;"> <img name ="image2" src ="images/agendabutton1.jpg" border =0> </a> <div class="iframe"> <!-- Hier staat de agenda in een frame --> <iframe src ="test/cal/index.php" frameborder ="0" scrolling ="no"> </iframe> </div> </div> </div> </div> </div> </body> </html>[/code:1:b9d92ea006] opmaak.css: [code:1:b9d92ea006]body { background: white; <!-- Achtergrond kleur --> } div.container { width: 800px; margin-left: auto; margin-right: auto; position: relative; } div.content { position: absolute; top: 191px; height: 700px; width: 800px; border: 1px solid black; <!-- Geeft een streep om de template --> } div.header { top: -10px; position: absolute; width: 800px; height: 200px; border: 1px solid black; <!-- Geeft een streep om de banner --> } div.homebutton { position: absolute; top: 0px; margin-left: 0px; width: 100px; height: 50px; border-right: 1px solid black; } div.agendabutton { position: absolute; top: 0px; margin-left: -4px; width: 100px; height: 50px; border-right: 1px solid black; } div.tekst { position: absolute; top: 100px; margin-left: -160px; width: 500px; height: 200px; } div.iframe { top: 100px; position: absolute; margin-left: -204px; } iframe { width: 799px; height: 600px; }[/code:1:b9d92ea006]
  • Nou ze zien er bij mij hetzelfde uit (FF 3.1 Beta 2 / IE 8 Beta 2) maar in beide browsers valt zowel de tekst als de menuknop buiten het inhoud blok. Ik heb op dit moment geent tijd om uit te zoeken waar het probleem ligt.. maar dit lijkt me een goede plek om te beginnen: [url=http://validator.w3.org/check?uri=www.albeda2c.tk&charset=%28detect+automatically%29&doctype=Inline&group=0]W3 Validator[/url]
  • Beetje gokje is het wel, want die frames maken het niet overzichtelijker ;-) maar wat gebeuirt er als je position: absolute; weg haalt bij div.content ?
  • dan staat echt alles door elkaar :P, ik gebruik IE 7 trouwens.... daar laad ie em perfect in maar in Firefox niet bah ^^ is er niet een mogelijkheid 2 css styles te maken zoals 1 voor IE en 1 voor Firefox
  • Ja dat is mogelijk met niet aan te bevelen hacks. Zou ik niet doen. Ik snap het niet helemaal; het is een zeer eenvoudige site en je zet 'm echt ontzettend moeilijk in elkaar. Je gaat toch niet voor elke knop een nieuwe klasse aanmaken?!? Dat hele position relative en position absolute gedoe is niet nodig, en geeft inderdaad vaak problemen als het om 'cross-browser' gaat. Je hebt meer verstand nodig van zogenaamde document-flow, en als je dat beheerst, zou je eens met flows kunnen werken. Let ook eens op de layout van je code. Je hebt dat tamelijk creatief aangepakt, waarvoor mijn waardering ;), maar misschien is het handiger om bij geneste tags (en dat zijn er nogal wat bij jou) een stukje in te springen met bij voorkeur een tab. Het is niet verplicht, je site zal er niet anders uit gaan zien, maar het maakt het voor jou (en voor de anderen die je nu vraagt om jouw probleem op te lossen :)) een stuk leesbaarder. In principe zou je xhtml er bijvoorbeeld zou uit kunnen zien. Meer is echt niet nodig:[code:1:36f24959b9]<div id="wrapper"> <div id="header"></div> <div id="nav"> <ul> <li><a href="#"><img src="home.jpg" /></a></li> <li><a href="#"><img src="agenda.jpg" /></a></li> </ul> </div> <div id="content"> <h1>Home</h1> <p>Welkom op de website voor klas 2C.</p> <p>Deze website is nog ver van af maar jullie kunnen alvast gebruik maken van de online agenda</p> </div> </div>[/code:1:36f24959b9]Het CSS moet je even zelf verzinnen, en daar zijn GEEN position styles voor nodig!!! Een hint alvast: Zet de header image in de achtergrond van de header-div. Veul succes er weer mee!
  • heel erg bedankt, ik zal voortaan die classes wel id van maken en zoeken hoe dat met flow gaat... want class is alleen als je ze meerdere keren wilt gebruiken toch?
  • Eh ja zo zou je het kunnen zien, maar wat ik eigenlijk probeerde te vertellen is dat het niet nodig is om voor elk dingetje dat je op de site zet weer een hele nieuwe div met een eigen klasse aan te maken. Het ging er me niet zo zeer om of je nou 'class' of 'id' gebruikte, maar eerder dat je het ingewikkelder maakte dan nodig was. Bij het nalezen van mijn eigen tekst kwam ik er achter dat ik wel erg anti position absolute en position relative ben, maar dat komt voornamelijk doordat ik er zelf (wellicht door mijn eigen onkunde) vaak problemen mee heb. Ik probeer die daarom altijd zoveel mogelijk te vermijden. Die twee style eigenschappen zijn natuurlijk niet voor niets in het leven geroepen, dus ze zullen heus wel eens handig zijn, maar het NIET gebruiken er van heeft mij in elk geval een hoop ellende bespaart! ;) Zie het maar als een persoonlijk voorkeur, dus als jij het anders wil dan is dat niet fout of zo...
  • [quote:e2c7f23d46="Buur"]Bij het nalezen van mijn eigen tekst kwam ik er achter dat ik wel erg anti position absolute en position relative ben, maar dat komt voornamelijk doordat ik er zelf (wellicht door mijn eigen onkunde) vaak problemen mee heb. Ik probeer die daarom altijd zoveel mogelijk te vermijden. Die twee style eigenschappen zijn natuurlijk niet voor niets in het leven geroepen, dus ze zullen heus wel eens handig zijn, maar het NIET gebruiken er van heeft mij in elk geval een hoop ellende bespaart! ;) Zie het maar als een persoonlijk voorkeur, dus als jij het anders wil dan is dat niet fout of zo...[/quote:e2c7f23d46]Als het niet hoeft is het veel handiger om elementen in je site gewoon hun natuurlijke flow te laten houden, dat werkt eigenlijk een stuk inzichtelijker en voorkomt veel problemen met interoperabiliteit. Dus idd is het voorkomen van absolute position aan te bevelen. Daarnaast; misschien denk je dat die spaties/tabs handig zijn om dingen overzichtelijk te maken en dat kan je best doen als je je site aan het schrijven bent (ook al vind ik het er persoonlijk niet perse duidelijker op worden :)). Maar elke extra spatie en tab is een teken meer en maakt je bestanden groter. Aangezien het hebben van kleine bestanden een doel op zich zou moeten zijn (kleinere bestanden => kortere laad tijden => beter :P) is het vermijden van onnodige spaties (/onnodig lange id en class namen/lange plaatjes bestand namen enz) aan te bevelen.
  • <lol>In mijn geval is de tijdswinst die je hebt met inladen echt absoluut te verwaarlozen tegenover de tijd die ik win met debuggen als ik wel 'ruim' programmeer (dwz met veel whitespace).</lol> :lol: hahaha Deze bovenstaande opmerking is maar een grapje (met een kern van waarheid), want uiteraard heb je gelijk Drewster. Echter, er bestaan wel scriptjes waar je je code even doorheen kunt halen, die dan automatisch alle overbodig bytes (met als gevolg een absoluut onleesbare code, voor mensen althans). In dat geval zou ik dus kiezen voor mijn eigen programmeerstijl, deze bronbestanden dan altijd bewaren en vlak voor publicatie door dat script gooien. Mocht er naderhand wat moeten worden aangepast, dan is het overzichtelijke origineel nog altijd beschikbaar. [size=9:a7a222c4fd]Maar dat vind ik te veel gedoe.[/size:a7a222c4fd]
  • [quote:a209ef0365="Drewster"]Daarnaast; misschien denk je dat die spaties/tabs handig zijn om dingen overzichtelijk te maken en dat kan je best doen als je je site aan het schrijven bent (ook al vind ik het er persoonlijk niet perse duidelijker op worden :)). Maar elke extra spatie en tab is een teken meer en maakt je bestanden groter. Aangezien het hebben van kleine bestanden een doel op zich zou moeten zijn (kleinere bestanden => kortere laad tijden => beter :P) is het vermijden van onnodige spaties (/onnodig lange id en class namen/lange plaatjes bestand namen enz) aan te bevelen.[/quote:a209ef0365]Dat is natuurlijk heel relatief. Als je Google bent dan is elke extra spatie er één te veel en kost dat enorme hoeveelheden bandbreedte. Dat is ook exact de reden waarom die simpele pagina niet valideert, dat kost Google gewoon te veel. Het verschil in schijfruimte, Google of niet, mag nooit de doorslag geven. Een gigabyte kost niets meer tegenwoordig dus die enkele kilobytes aan spaties zijn volledig te verwaarlozen. Maar misschien wel het belangrijkste is dat je het voor de "programmeur" altijd overzichtelijk moet houden, dus een aantal spaties om aan te geven op welk niveau je zit (mbt "nesting") is zeker aan te raden. Mocht je toch geen overbodige spaties willen, laat ze dan automatisch verwijderen (op wat voor manier dan ook) voordat je ze uploadt, en bewaar de originele bestanden voor later. Om nog een laatste misvatting uit de wereld te helpen: enkele (kilo)bytes meer of minder hebben totaal geen invloed op de gebruikservaring van de bezoeker. Waarom niet? Omdat de tijd die het kost om zo'n klein bestand te downloaden relatief heel klein is ten opzichte van de tijd die het kost om contact te leggen (en te "onderhandelen") met de server. Het is dus doorgaans zo dat je juist beter zoveel mogelijk in één bestand kunt stoppen dan in meerdere losse bestanden. Hier zijn weer enkele uitzonderingen op te bedenken, waaronder bestanden die je graag aan de clientkant gecached wil hebben, maar doorvoersnelheid is allang geen bottleneck meer in het downloaden en renderen van websites. - Bas
  • Oke, ik heb een beetje op internet gezocht en heb de website maar opnieuw opgebouwd zonder position absolute wat door jullie werd voorgesteld... www.albeda2c.tk Is er nog iets wat ik anders zou kunnen doen? index.php: [code:1:0b366fb305]<html> <head> <link rel="stylesheet" type="text/css" href="opmaak.css" /> </head> <body> <div id="container"> <div id="header"><img src="images/index.jpg"></div> <div id="menu"> <a href="index.php"><img border="0" src="images/homebutton1.jpg"></a><a href="agenda.php"><img border="0" src="images/agendabutton1.jpg"></a></div> <div id="content">Test</div> </div> </body> </html>[/code:1:0b366fb305] agenda.php: [code:1:0b366fb305]<html> <head> <link rel="stylesheet" type="text/css" href="opmaak.css" /> </head> <body> <div id="container"> <div id="header"><img src="images/index.jpg"></div> <div id="menu"> <a href="index.php"><img border="0" src="images/homebutton1.jpg"></a><a href="agenda.php"><img border="0" src="images/agendabutton1.jpg"></a></div> <div id="content"><iframe src="http://www.albeda2c.onszonnestelsel.nl/agenda/index.php" frameborder="0" scrolling="no"></iframe></div> </div> </body> </html>[/code:1:0b366fb305] opmaak.css: [code:1:0b366fb305]body { margin: 0; text-align: center; } div#container { margin-left: auto; margin-right: auto; width: 802px; text-align: left; } div#header { border: 1px solid black; } div#menu { border-left: 1px solid black; border-right: 1px solid black; } div#content { border: 1px solid black; height: 590px; } iframe { width: 800px; height: 590px; }[/code:1:0b366fb305] Bedankt voor jullie reacties...
  • Nou, zet er een [url=http://frontaal.net/200612/doctype-welke-moet-ik-kiezen/]doctype[/url] boven, geef images een [url=http://www.webrichtlijnen.nl/handleiding/ontwikkeling/productie/afbeeldingen-alternatieve-tekst/alt-attribuut/]alt-attribuut[/url] mee, gebruik voor een [i:bae6bebf31]lijst[/i:bae6bebf31] van links (hoe verrassend) een [url=http://modernmarkup.nl/html-css/lijsten/]list-element[/url], [url=http://www.webrichtlijnen.nl/handleiding/ontwikkeling/productie/frames/nadelen/]gebruik geen (i)frames[/url], gebruik niet voor alles een [url=http://csscreator.com/?q=divitis]div[/url]....
  • [quote:d108ae2284="boelieboelie"]Nou, zet er een [url=http://frontaal.net/200612/doctype-welke-moet-ik-kiezen/]doctype[/url] boven, geef images een [url=http://www.webrichtlijnen.nl/handleiding/ontwikkeling/productie/afbeeldingen-alternatieve-tekst/alt-attribuut/]alt-attribuut[/url] mee, gebruik voor een [i:d108ae2284]lijst[/i:d108ae2284] van links (hoe verrassend) een [url=http://modernmarkup.nl/html-css/lijsten/]list-element[/url], [url=http://www.webrichtlijnen.nl/handleiding/ontwikkeling/productie/frames/nadelen/]gebruik geen (i)frames[/url], gebruik niet voor alles een [url=http://csscreator.com/?q=divitis]div[/url]....[/quote:d108ae2284] Bedankt voor je reactie, welk doctype moet ik gebruiken dan? ik heb wat gezocht maar zou niet weten wat voor mij de juiste is... Dus als ik het goed bekijk kan ik in een list-element m'n header en menu zetten in plaats van een div? Sorry voor de vele vragen, ik werkte vroeger altijd met tabellen en dat was gewoon een ramp ;) ik dwing mezelf het nu eens goed te doen xD
  • [quote:3099c60587="Mr.nuub"]welk doctype moet ik gebruiken dan? ik heb wat gezocht maar zou niet weten wat voor mij de juiste is...[/quote:3099c60587][url=http://www.alistapart.com/articles/doctype/]Kies er maar eentje.[/url] ;) - Bas
  • Ik zou een een "transistional doctype" gebruiken, daarnaast gebruik je xhtml (/>) en html door elkaar, ik zou voor html gaan, xhtml levert nu weinig voordeel op. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  • Hm, gebruik ik xhtml? waarin zie je dat dan... weet niet eens wat de verschillen zijn :) heb het altijd zo gedaan xD Edit: Bedoel je misschien bij de css link /> want anders snap ik niet wat je bedoelt...
  • Drewster kan dat zien aan een aantal tags die je hebt gebruikt. In xhtml moeten alle tags worden afgesloten. Ook tags die in html normaal gesproken alleen voorkomen (denk aan <br>, <link>, <img>, enz). Omdat je ze in xhtml MOET afsluiten, zou je dan zoiets krijgen: <br></br>, <link type="blablabla"></link>, <img src="blablabla"></img>; dit is goed, maar dit schrijven we vaker in het kort: <br />, <link type="blablabla" /> en <img src="blablabla" />. Bovenin heb je staan:[code:1:e3e0946335]<link rel="stylesheet" type="text/css" href="opmaak.css" />[/code:1:e3e0946335]en een stukje verderop staat:[code:1:e3e0946335]<img border="0" src="images/homebutton1.jpg">[/code:1:e3e0946335]Dat spreekt elkaar tegen. Die eerste is xhtml, maar zou in html[code:1:e3e0946335]<link rel="stylesheet" type="text/css" href="opmaak.css">[/code:1:e3e0946335]moeten zijn, en het plaatje zou in xhtml[code:1:e3e0946335]<img border="0" src="images/homebutton1.jpg" />[/code:1:e3e0946335]moeten zijn 8) Wat doctypes precies zijn en wat het nut er van is, daar heb ik even geen zin in om het uit te leggen, sorry. Eerst even boterhammen eten...

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.