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)

[css] Uitlijning wordt verkloot in firefox

Anoniem
The_Ultimate
12 antwoorden
  • Ik loop tegen een klein probleempje aan wat nogal wat gevolgen heeft voor de uitlijning van mijn website.

    in firefox wordt het lettertype op een of andere manier net wat groter weergegeven dan in andere browsers. Hierdoor vergroot de regelafstand dus ook iets (standaard percentage) en verkloot ie dus ook gelijk de uitlijning van alles wat eromheen staat.

    In de praktijk is er overal 1 mm extra ruimte. Waardoor de site niet netjes uitziet en 2 borders die op elkaar aan moeten sluiten, dus 1px van elkaar verschillen.
    Probleem is er alleen in firefox, IE en chrome hebben dit niet.

    Iemand een idee hoe ik dit kan oplossen? Enkel de regelafstand voor firefox aanpassen heeft nouwelijks nut. Algemeen regelafstand aanpassen lukt wel, maar dan is het dus in andere browsers dat t allemaal te dicht op elkaar staat.

    gebruikt lettertype is calibri
  • Zonder linkje of broncode zul je hier weinig zinnige suggesties krijgen. ;)

    Overigens: je hebt niet toevallig zonder dat je het weet iets ingezoomd in firefox? Probeer voor de zekerheid eens Ctrl+0 (nul) om de zoom weer op 100% te zetten?
  • [quote:d4d433afac="Ger"]Zonder linkje of broncode zul je hier weinig zinnige suggesties krijgen. ;)

    Overigens: je hebt niet toevallig zonder dat je het weet iets ingezoomd in firefox? Probeer voor de zekerheid eens Ctrl+0 (nul) om de zoom weer op 100% te zetten?[/quote:d4d433afac]

    Zou t vreemd vinden als t aan de broncode/css lag als het maar bij 1 browser gebeurt.
    Anderzijds. Dit is de relevante css:
    [code:1:d4d433afac]
    html{
    overflow: -moz-scrollbars-vertical;
    overflow-y: scroll;
    }

    body,html
    {
    font: 15px Calibri;
    background: #0540AD;
    color: #000000;
    min-height: 100%;
    height: 100%;
    margin-top:auto;
    }
    img{-moz-border-radius: 8px;
    border-radius: 8px;}

    #container
    {
    overflow: auto;
    width: 900px;
    background: #EFEFEF;
    margin: 0 auto 0 auto;
    border-left: #000000 1px solid;
    border-right: #000000 1px solid;
    text-align: left;
    bottom: 0;
    min-Height: 100%;
    }

    #header
    {
    background: #FFFFFF;
    height: 134px;
    background-image:url('header.php');
    border-bottom: solid 1px #000;
    text-align: right;
    }


    #menu
    {
    position: absolute;
    color: #000000;
    background: #EFEFEF;
    margin-top: 49px;
    margin-left: 10px;
    margin-bottom: 150px;
    float: left;
    text-align: left;
    width: 145px;
    border: Solid 1px #352171;
    -moz-border-radius: 8px 0px 8px 8px;
    border-radius: 8px 0px 8px 8px;
    }

    #footer
    {
    margin-top: -150px;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    bottom: 0;
    width: 900px;
    height: 150px;
    background-image:url(images/footer.png);
    border-left: 1px solid #000;
    border-right: 1px solid #000;
    }


    #bericht
    {
    float: left;
    margin-left: 156px;
    margin-top: 20px;
    margin-bottom: 10px;
    }

    #bericht_titel
    {
    padding-left: 10px;
    font: 24px calibri;
    color: #352171;
    border-bottom: 1px solid #352171;
    border-left: Solid 1px #352171;
    width: 700px;
    }


    #bericht_tekst
    {
    margin-top: -10px;
    padding-left: 20px;
    font: 15px calibri;
    color: #666;
    }

    #bericht_tekst_left
    {
    float: left;
    width: 700px;
    margin-bottom: 150px;
    }

    [/code:1:d4d433afac]

    relevante html:
    [code:1:d4d433afac]
    <body id="home">
    <div id="container">
    <div id="header"></div>
    <?php
    include ("/includes/menu.php"); ?>
    <div id="bericht">
    <div id="bericht_titel"></div>
    <div id="bericht_tekst">
    <div id="bericht_tekst_left"><p></p></div>

    </div>
    </div>

    </div>
    </div>
    <div id="footer"></div>
    </body>
    [/code:1:d4d433afac]

    zooming laat t probleem niet verdwijnen. Heeft echt met t lettertype te maken.

    Alle teksten (hier weggelaten) komen dus verder uit elkaar te staan en lijken qua lettertype iets groter.
    Hierdoor komt de lijn onder Bericht-titel dus 1pixel lager uit dan hij zou moeten.

    Nog een euvel is dat er onder de pagina ineens een stuk ruimte valt. Terwijl dit niet de bedoeling is.
  • Ik zie toevallig dat je een </div> teveel hebt staan op het einde. (ik bedoel voor #footer)
    En ik zie ook dat je enkel de -moz prefix gebruikt. (en de standaard)
    Je moet de gewone css3 zonder prefix eens in deze site plakken en dan zal je wel zien wat ik bedoel.

    Maar dat zal volgens mij geen invloed hebben op het uiterlijk van je site. Wat je eens moet proberen is een reset stylesheet toevoegen. Degene die ik gebruik kan je vinden op: meyerweb.com.

    Als het hierdoor niet beter wordt, wil je dan eens een live site laten zien, en screenshots over de verschillende browsers?
  • Ik snap de werking van die reset stylesheet niet. Moet ik daarvoor nog dingen aanpassen? moet deze in de bestaande css worden geplaatst of in alle pagina's (over de 200) erbij gaan invoeren?

    Heb nog even wat zaken geprobeert. Blijkt dat in elk geval het menu (zijn list items) simpelweg met het voorzien van:

    [code:1:96c8e6ca19]
    line-height: 120%;
    [/code:1:96c8e6ca19]

    Wel weer netjes komt te staan zoals ook in de andere browsers al was (blijkbaar firefox andere line height als standaard voor list items?)

    Maar mijn uitlijning klopt nog steeds niet, en onderaan blijf ik een marge overhouden die er in andere browsers niet is.
    Ik kan de foute uitlijning weer ok maken door daar ook hetzelfde te doen als in het menu. Echter krijg ik dat in de andere browsers de lijn dan weer een pixel te hoog komt te staan.
  • Je kan hem gewoon bovenaan de css plaatsen. Oh ja, heb je een doctype gebruikt?

    Oh ja, wil je de inhoud van menu.php ook eens posten?
  • [quote:c06266c1a9="mikesmikkel"]Je kan hem gewoon bovenaan de css plaatsen. Oh ja, heb je een doctype gebruikt?[/quote:c06266c1a9]

    logischerwijze wel doctype gebruikt ja, maar die achtte ik niet relevant voor in dit topic ;)

    Heb in elk geval de lege ruimte onderaan weggekregen door een -5px ondermarge te geven aan de body. Alleen wil er nu in chrome nog steeds een pixel onderaan open blijven.

    Heb even een screenshot gemaakt van de verschillen:
    Links chrome, rechts Firefox.
    Chrome geeft door die pixelruimte trouwens een scrollbalk die er niet hoort.
    [img:c06266c1a9]http://pobresh.com/foutje.jpg[/img:c06266c1a9]

    Wanneer ik dus line height van de bericht titel naar 120% zet, gaat de lijn eronder dus bij beide browsers 1 pixel omhoog. Dus dan is het bij FF goed, maar bij chrome niet meer.

    inhoud menu.php:
    let wel ff, hier zit wat php in zodat ik het ook als include kan gebruiken!
    [code:1:c06266c1a9]
    <body>
    <?php $mapnaam = explode("/", $_SERVER['PHP_SELF']);
    ?>

    <div id="menu">

    <ul>
    <li><a id="home" href="../../../../<?php print $mapnaam['1'] ?>/index.php" class="top_parent">Home</a> </li>
    </ul>
    <ul>
    <li><span class="top_parent">Database</span>
    <ul>
    <li><a id="polyp" href= "../../../../<?php print $mapnaam['1'] ?>/polyp.php">Polyp</a></li>
    <li><a id="breakdance" href="../../../../<?php print $mapnaam['1'] ?>/breakdance.php" >Break Dance</a></li>
    <li><a id="shake" href="../../../../<?php print $mapnaam['1'] ?>/shake.php">Shake</a></li>
    <li><a id="varianten" href="../../../../<?php print $mapnaam['1'] ?>/variant.php">Varianten</a></li>
    <li><a id="grootvermaak" href="../../../../<?php print $mapnaam['1'] ?>/grootvermaak.php">Grootvermaak</a></li>
    <li><a id="achtbanen" href= "../../../../<?php print $mapnaam['1'] ?>/achtbaan.php">Achtbanen</a></li>
    </ul>
    </li>
    </ul>
    <ul>
    <li><span class="top_parent">Video's</span>
    <ul>
    <li><a href="#" class="parent">Onride</a></li>
    <li><a href="#" class="parent">Offride</a></li>
    <li><a href="#" class="parent">On/Off mix</a></li>
    </ul>
    </li>
    </ul>
    <ul>
    <li><a href="#" class="top_parent">Contact</a> </li>
    <li><a class="top_parent" id="disclaimer" href= "../../../../<?php print $mapnaam['1'] ?>/disclaimer.php">Disclaimer</a></li>
    </ul>
    <ul>
    <li><a href="#" class="top_parent">Links</a> </li>
    </ul>
    </div>
    </body>
    [/code:1:c06266c1a9]
  • Plak de css reset eens bovenin je stylesheet…
  • Heb je in je menu ook een <body> staan? Dan include je die in de <body> van de gewone pagina?
  • Ik heb wat opgezocht, en er is een verschil tussen de manier waarop firefox en de andere browsers de line-height berekenen. Dit valt op te lossen door of wel de line-height (van in dit geval de bericht_titel) op 1 in te stellen, ofwel een expliciete line-height in pixels op te geven.

    Overigens wil ik even wat zeggen over je menu. Ik vind het redelijk ingewikkeld. Je hebt verschillende ul's na elkaar, in plaats van één basis-ul te gebruiken.

    Je kan het beter zo doen (php gestript):




    [code:1:1c01fc028f] <ul>
    <li><a id="home" href="../../../..//index.php" class="top_parent">Home</a> </li>
    <li><span class="top_parent">Database</span>
    <ul>
    <li><a id="polyp" href= "../../../..//polyp.php">Polyp</a></li>
    <li><a id="breakdance" href="../../../..//breakdance.php" >Break Dance</a></li>
    <li><a id="shake" href="../../../..//shake.php">Shake</a></li>
    <li><a id="varianten" href="../../../..//variant.php">Varianten</a></li>
    <li><a id="grootvermaak" href="../../../..//grootvermaak.php">Grootvermaak</a></li>
    <li><a id="achtbanen" href= "../../../..//achtbaan.php">Achtbanen</a></li>
    </ul>
    </li>
    <li><span class="top_parent">Video's</span>
    <ul>
    <li><a href="#" class="parent">Onride</a></li>
    <li><a href="#" class="parent">Offride</a></li>
    <li><a href="#" class="parent">On/Off mix</a></li>
    </ul>
    </li>
    <li><a href="#" class="top_parent">Contact</a> </li>
    <li><a class="top_parent" id="disclaimer" href= "../../../..//disclaimer.php">Disclaimer</a></li>
    <li><a href="#" class="top_parent">Links</a> </li>
    </ul>[/code:1:1c01fc028f]
  • Het menu is oorspronkelijk een code voor een drop down menu. Vandaar dat het zo ingewikkeld is. Ik heb de code nog niet vereenvoudigd.
    Beetje aanpassen in de CSS en het is een horizontaal drop down menu. ipv een verticaal open menu.
    Plus een deel van de opmaak wordt er ook mee bepaald. Dus ik laat t zo.

    Ik heb ter proef de reset css eens toegevoegd.
    Alles qua uitlijning van de teksten schiet helemaal in de war. En het lost het probleem simpelweg niet eens op. Dat blijft allemaal exact hetzelfde.

    Line height lijkt simpelweg genegeerd te worden door firefox, want ook als ik alleen dat invoer bij de css voor body en html gebeurt er geheel niks.
    Zelfs al vul ik 200 of 200px in gebeurt er niks. Alleen percentages werken, maar dan wisselt het probleem zich dus om van browsers.

    Vreemd hoogteverschil gefixt: -1 top margin van de container en daarmee verdwijnt de schuifbalk. Nu is dat ook gelijk aan elkaar op alle browsers.
  • Over het menu, de code die ik gemaakt had is de code die de meeste mensen gebruiken voor een dropdown menu

    Probeer eens de line height van #bericht_titel op 28px te zetten? Bij mij werkt dat alvast.

Beantwoord deze vraag

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