Vraag & Antwoord

Webdesign (HTML, CSS, Flash)

Verschil in layout IE en FF/Chrome

6 antwoorden
  • Hallo iedereen De layout van mijn site ziet er prima uit in IE maar in FF en Chrome ziet hij er anders uit. :cry: Boven mijn navigatiebalk en topbalk heb ik witruimte terwijl die normaal mooi zouden moeten aansluiten (Zie foto's). Iemand een idee hoe dit komt? Ik heb echt al vanalles geprobeerd. explorer: http://www.uploader.be/foto/explorer-26504.html firefox: http://www.uploader.be/foto/firefox-26505.html Bedankt voor jullie hulp! Jori
  • Over het algemeen geldt: Goed in Firefox - Fout in IE => Je hebt een hack of workaround nodig Fout in Firefox - Goed in IE => Je hebt een fout in je code In jou geval is sprake van de tweede optie en dus ligt het waarschijnlijk aan je code. Misschien helpt het als we de code kunnen zien.
  • Probeer eens de [url=http://www.quirksmode.org/css/clearing.html]float te clearen[/url]?
  • Hieronder de code: <!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> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Testsite</title> <style type="text/css"> <!-- body,td,th { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; color: #CCCCCC; text-indent: 10px; margin: 0px; padding: 0px; } body { background-image: url(TEST%20SITES/grafoweb/afbeeldingen/achtergronden/achtergrond%20hout.jpg); background-repeat: repeat; margin-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; } #container { background-color: #FFFFFF; padding: 0px; width: 980px; margin-top: 30px; margin-right: auto; margin-bottom: 50px; margin-left: auto; border: thick solid #FFFFFF; } #HEADER { height: 100px; background-color: #1F1F1F; } #navigation { background-color: #339900; height: 30px; } #navigation { background-color: #808500; height: 50px; background-image: url("TEST SITES/grafoweb/afbeeldingen/page layout/groene balk.jpg"); padding-left: 14px; margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; } #container #onderkant { text-align: left; text-indent: 0px; margin: 0px; padding: 0px; line-height: 200%; } #container #navigation a { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 14px; color: #CCCCCC; text-decoration: none; display: inline-block; padding-top: 15px; padding-right: 18px; padding-bottom: 8px; padding-left: 8px; } #container #HEADER #TITEL p { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; color: #CCCCCC; margin-left: 30px; text-indent: 0px; margin-top: 35px; } #container #navigation #devide { background-image: url("TEST SITES/grafoweb/afbeeldingen/page layout/border1.gif"); height: 14px; } #container #onderkant #kader { width: 22%; height: auto; float: right; } #apDiv2 { position:absolute; left:284px; top:204px; width:103px; height:45px; z-index:1; } #container #onderkant #kader { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; background-color: #808500; text-align: center; margin-left: 35px; margin-top: 30px; padding-top: 15px; padding-bottom: 20px; padding-left: 10px; padding-right: 10px; margin-right: 15px; line-height: 130%; } #container #onderkant h1 { font-family: Verdana, Arial, Helvetica, sans-serif; margin-top: 50px; margin-left: 40px; font-size: 18px; color: #666666; font-weight: 600; } .style16 {font-size: 34px} #endbar { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px; color: #666666; } #container #endbar a { color: #808500; } #apDiv3 { position:absolute; left:50%; top:15%; width:156px; height:156px; z-index:1; background-image: url(TEST%20SITES/grafoweb/afbeeldingen/domeinregistratie.jpg); } --> </style> </head> <body> <div id="container"> <div id="HEADER"> <div id="TITEL"> <p><span class="style16"> Testsite</span></p> </div> </div> <div id="navigation"> <p><a href="#">test</a> <a href="#">test1</a> <a href="#">test2</a> <a href="#">test3</a></p> </div> <div id="onderkant"> <div id="kader"> <p>test</p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> </div> <h1 align="center">Test</h1> <h1 align="center"> </h1> <h1 align="center"> </h1> <h1 align="center"><br /> <span class="style11"><br /> </span></h1> </div> <div id="endbar"> <div align="center"><a href="#">test</a> - <a href="#">test1</a>- <a href="#">test2</a> - <a href="#">test3</a></div> </div> </div> </body> </html>
  • [code:1:e9b47b9214] #container #HEADER #TITEL p { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; color: #CCCCCC; margin-left: 30px; text-indent: 0px; margin-top: 35px; } [/code:1:e9b47b9214] Hier geef je de container, header en title elk een topmargin van elk 35 pixels mee. Waarom IE dat niet doet is me een raadsel, maar het verklaart wel de witruimte in Firefox. Maar ik vind je CSS nogal rommelig eerlijk gezegd. Er zitten ook nogal wat inconsequenties in. Een voorbeeldje: [code:1:e9b47b9214] #container { background-color: #FFFFFF; padding: 0px; width: 980px; margin-top: 30px; margin-right: auto; margin-bottom: 50px; margin-left: auto; border: thick solid #FFFFFF; } [/code:1:e9b47b9214] Hier krijgt de container een topmargin van 30 pixels. Even later krijgt hij nogmaals een topmargin van 35 pixels (zie de eerste code, bovenaan) En vervolgens [code:1:e9b47b9214] #container #onderkant #kader { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; background-color: #808500; text-align: center; margin-left: 35px; margin-top: 30px; padding-top: 15px; padding-bottom: 20px; padding-left: 10px; padding-right: 10px; margin-right: 15px; line-height: 130%; } [/code:1:e9b47b9214] Krijgt de container toch weer een topmargin van 30 pixels mee Verder vind ik dit een beetje vreemd: [code:1:e9b47b9214] <h1 align="center"> </h1> <h1 align="center"> </h1> [/code:1:e9b47b9214] Strict (nou ja, transitioneel) genomen zit er geen enkele fout in je code. maar zoals gezegd, het is een beetje een rommeltje en dat leidt tot onvoorspelbaar gedrag van je site.
  • Bij je eerste opmerking snap ik iets niet. Daar krijgt toch die ene paragraaf die in de DIV 'titel' zit de margin? Die laatste zit in de DIV 'header' en die in de DIV 'container'. Dus: drie hokjes in elkaar, daarin tekst en die tekst heeft als margin 35px toch? Of ben ik verkeerd? Ik heb die margin weggedaan, en het resultaat is dat die tekst omhoog gaat in de div, maar de witruimte blijft??? [quote:27c5ca9b52="Gooly"][code:1:27c5ca9b52] #container #HEADER #TITEL p { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; color: #CCCCCC; margin-left: 30px; text-indent: 0px; margin-top: 35px; } [/code:1:27c5ca9b52] Hier geef je de container, header en title elk een topmargin van elk 35 pixels mee. Waarom IE dat niet doet is me een raadsel, maar het verklaart wel de witruimte in Firefox. Maar ik vind je CSS nogal rommelig eerlijk gezegd. Er zitten ook nogal wat inconsequenties in. Een voorbeeldje: [code:1:27c5ca9b52] #container { background-color: #FFFFFF; padding: 0px; width: 980px; margin-top: 30px; margin-right: auto; margin-bottom: 50px; margin-left: auto; border: thick solid #FFFFFF; } [/code:1:27c5ca9b52] Hier krijgt de container een topmargin van 30 pixels. Even later krijgt hij nogmaals een topmargin van 35 pixels (zie de eerste code, bovenaan) En vervolgens [code:1:27c5ca9b52] #container #onderkant #kader { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; background-color: #808500; text-align: center; margin-left: 35px; margin-top: 30px; padding-top: 15px; padding-bottom: 20px; padding-left: 10px; padding-right: 10px; margin-right: 15px; line-height: 130%; } [/code:1:27c5ca9b52] Krijgt de container toch weer een topmargin van 30 pixels mee Verder vind ik dit een beetje vreemd: [code:1:27c5ca9b52] <h1 align="center"> </h1> <h1 align="center"> </h1> [/code:1:27c5ca9b52] Strict (nou ja, transitioneel) genomen zit er geen enkele fout in je code. maar zoals gezegd, het is een beetje een rommeltje en dat leidt tot onvoorspelbaar gedrag van je site.[/quote:27c5ca9b52]

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.