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)

Padding in IE+FF (Heeft eerst wel gewerkt)

BasHamar
3 antwoorden
  • Beste mensen,

    ik was bezig met een website voor een vriend, alles leek continu goed te gaan na elke check (ik check FF + IE continu na elke verandering)

    En opeens na een volgende check, is de padding van mijn topbar tot me header veranderd. In firefox geeft hij 7px's teveel weer, in IE geeft hij het goed weer.

    Nu kan ik deze 7px's padding weghalen in me topbar, maar dan staat de tekst niet meer gecentreerd, maar is het probleem in FF wel weg, maar dus niet de bedoeling, omdat het eerst wel gewoon heeft gewerkt.

    Hieronder een jpg waarin het hopelijk duidelijk wordt:

    [img:ff8bc70b80]http://img209.imageshack.us/img209/2577/foutuw8.jpg[/img:ff8bc70b80]

    dit is de CSS source:

    [code:1:ff8bc70b80]/* No body margins */

    *{
    padding:0;
    margin:0;
    }

    /* Link Markup */

    A { text-decoration:none }
    A { color: #FFFFFF; }
    A:hover { color: #ccdfff; }


    /* 100% height command for html, body */

    html, body {
    height: 100%;
    font-family: verdana;
    font-size: 10px;
    background-image: url(images/bckptrn.jpg);
    background-repeat: repeat;
    }


    /*The full website container */

    #container {
    width: 900px;
    height: auto;
    height: 100%;
    position: relative;
    min-height: 100%;
    float: center;
    margin-top: 0;
    margin-right: auto;
    margin-bottom: 0;
    margin-left: auto;
    border-left: 1px solid #424446;
    border-right: 1px solid #424446;
    background-color: #fafafa;
    }

    /*Topbar markup */

    #topbar{
    width: 900px;
    height: 28px;
    text-align: left;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 10px;
    color: #FFFFFF;
    background-image: url(images/topbar.jpg);
    background-repeat: no-repeat;
    padding-left: 8px;
    padding-top: 7px;
    }


    /*The header CSS Code */

    #header{
    width: 900px;
    height: 137px;
    }


    /*Content space one */

    #content {
    width: 900px;
    height: 200px;
    text-align: left;
    background-color: #e2e5e7;
    border-bottom: 1px dashed #a9b5bd;
    }
    [/code:1:ff8bc70b80]


    als volgt geplaatst als in deze source:

    [code:1:ff8bc70b80]<div id="container">

    <div class="txtTopbar" id="topbar">&raquo; <a href="index.html">home</a> &raquo; <a href="contact.html">contact</a> &raquo; routeplanner</div>

    <div id="header"><embed src="images/header.swf" width="900" height="137" quality="high"></embed></div>

    <div id="content"></div>
    [/code:1:ff8bc70b80]


    Ik hoop dat iemand me hiermee kan helpen, het vreemde is dus dat het gewoon heeft gewerkt (in beide browsers), maar opeens (na het toevoegen van de content div niet meer)

    Alvast bedankt
  • update:

    ik zou het kunnen oplossen door:

    height: 28px; (voor IE)
    * height 21px; (voor Firefox)

    maar het lijkt me niet de beste oplossing, lijkt me dat hier ook wel nadelen aanzitten m.b.t. nieuwere versies etc etc..


    Overigens heb ik bij alles wat ik een padding wil meegeven, dat hij het in firefox vergroot, en in IE gewoon juist weergeeft..

    Ik heb overigens (zoals te zien is) wel al

    *{
    padding:0;
    margin:0;
    }

    aangegeven in mijn css


    Nu las ik net dat het wel een bekend probleem is dat firefox met paddings dingen vergroot, en niet gewoon netjes doet..

    Dus als iemand daar een oplossing voor heeft (ik zelf nog niet gevonden)
  • Hm nee, juist IE doet het niet netjes. Paddings worden normaliter gewoon opgeteld bij de afmetingen van een element, zoals in het boxmodel wordt beschreven, zie bijv. een Google search naar box model "internet explorer".

    Wat voor doctype gebruik je? De rendering hangt daar vanaf, of het quirks of standards mode wordt (en dus hoe met o.a. paddings wordt omgegaan).

    Het kan zijn dat je in content bijv. een heading met een top-padding staat, waardoor je #content naar beneden wordt geduwd (dat kan verklaren waardoor het eerst wel goed ging en nu niet meer). Handigst is een online voorbeeld…

    Met hacks zou ik niet werken (zoals met *). Probeer het in FF goed te krijgen en zet regels om het voor IE goed te krijgen in conditional comments, dat voorkomt problemen.
    Ook van álles de margin en padding op 0 zetten, is overdreven. Evt. kun je werken met een alternatief.

Beantwoord deze vraag

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