Op deze website gebruiken we cookies om content en advertenties te personaliseren, om functies voor social media te bieden en om ons websiteverkeer te analyseren. Ook delen we informatie over uw gebruik van onze site met onze partners voor social media, adverteren en analyse. Deze partners kunnen deze gegevens combineren met andere informatie die u aan ze heeft verstrekt of die ze hebben verzameld op basis van uw gebruik van hun services. Meer informatie.

Akkoord

Vraag & Antwoord

Webdesign (HTML, CSS, Flash)

Verschil in layout IE en FF/Chrome

Gooly
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 float te clearen?
  • 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>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    </div>
    <h1 align="center">Test</h1>
    <h1 align="center">&nbsp;</h1>
    <h1 align="center">&nbsp;</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">&nbsp;</h1>
    <h1 align="center">&nbsp;</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">&nbsp;</h1>
    <h1 align="center">&nbsp;</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

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