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)

Nogmaals: divs niet weergegeven als gewenst in firefox

jasperlevink
9 antwoorden
  • Hallo mensen.

    Ik heb deze vraag al eerde gesteld. In de hoop dat nu iemand wel antwoord kan geven (m'n vorige vraag was misschien een beetje een zooitje) doe ik het nog een keer.

    Ik heb de volgende (zwaar versimpelde) pagina:

    [code<html>
    <head>
    <style type="text/css">

    <!–
    .header {
    width: 530px;
    background-color:#FFDF9A;
    padding: 2px 4px 2px 4px;
    border-width: 1px 1px 1px 1px;
    border-style: solid;
    border-color: #FFA853;
    }


    .afzender {
    float: left;
    width: 100px;
    text-align:left;
    vertical-align: middle;
    }

    .titel {
    float: right;
    width: 300px;
    text-align:left;
    font-weight: bold;
    vertical-align: middle;
    }
    –>

    </style>
    </head>

    <body>

    <div class="header">
    <span class="afzender" > Afzender </span>
    <span class="titel"> titel </span>
    </div>
    </body>
    </html>

    Het is de bedoeling dat de div "header" zorgt voor een rechthoek om afzender en titel. De rechthoek moet de kleur #FFDF9A krijgen en een border met de kleur #FFA853.

    In IE gaat alles goed. In Firefox echter. Krijg ik net boven afzender en titel een heel dun rechthoekje. (2 keer de padding)
    De spans worden dus geheel buiten de div geplaatst lijkt het.

    Hoe komt het dat het niet weergegeven wordt zoals ik wil? Waarschijnlijk omdat ik iets niet goed doe natuurlijk.. Maar wat dan????? :-?

    Thanks.
    Jasper
  • Als ik de header een 'height' meegeef, werkt 'ie bij mij.
  • Maar die height is variabel. De titel kan namelijk meerdere regels bevatten… Nou kan ik daar mee gaan sjoemelen natuurlijk. Maar dat is niet ideaal..

    Is er geen algemenere oplossing?

    Bedankt voor je reactie!!
  • [code:1:94d5962a3b]
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <title>Test Document</title>
    <style type="text/css">
    <!–
    html,body{
    margin:0;
    padding:0;
    }

    body {
    text-align:center; /* needed for IE5.x */
    }

    .header {
    text-align:left; /* needed for IE5.x */
    margin: 10px auto;
    width: 530px;
    background-color:#FFDF9A;
    padding: 2px 4px 2px 4px;
    border: 1px solid #FFA853;
    }

    .afzender {
    width: 100px;
    border: 1px solid #FFA853;
    vertical-align: middle;
    }

    .titel {
    float: right;
    width: 300px;
    text-align:left;
    font-weight: bold;
    vertical-align: middle;
    border: 1px solid #FFA853;
    }
    –>
    </style>
    </head>
    <body>
    <div class="header">
    <span class="titel"> Titel </span>
    <span class="afzender"> Afzender<br>
    Nog een afzender </span>
    </div>
    </body>
    </html>
    [/code:1:94d5962a3b]

    Zo staat header gecentreerd, margin uit header verwijderen en hij staat links.
    Voor het visuele effect, border aan afzender en titel toegevoegd.
  • Hallo Suay!!

    Bedankt voor je reactie!! Ik ben er even mee aan de slag geweest. En ik dacht dat het goed werkte.. maar helaas… Als ik een tweede regel aan de titel toevoeg, werkt het niet… De tweede regel komt er gewoon onder te staan in Firefox….

    [code:1:9e9def3ccf]<div class="header">
    <span class="titel"> Titel <br>
    Tweede regel titel</span>
    <span class="afzender"> Afzender</span>
    </div> [/code:1:9e9def3ccf]

    Hoe kan dit??? Thanks!
  • Waarom gebruik je de oplossing van boelieboelie niet gewoon? Geef een height mee aan de header. Als je dan meer regels er in zet wordt de hoogte automatisch aangepast. Of begrijp ik niet goed wat je wil?
  • Als ik display:table; in .header zet, dan werkt die bij mij.
  • Bedankt voor je reactie! Het ziet er nu prima uit!

    Ik word helemaal gek! Het werkt nu wel in Firefox, maar niet meer in IE! :-? :cry:

    Het is de bedoeling dat dmv JS een bepaalde header wordt weergegeven of verborgen door middel van oa:

    [code:1:4929f6a55d]document.getElementById('contex'+n).style.display="table";[/code:1:4929f6a55d]


    IE vind dit echter niet leuk! Ik krijg de fout:
    [b:4929f6a55d]Could not get the display property. Invalid argument.[/b:4929f6a55d]

    Het werkt in IE wel als ik van table block maak. Maar ja.. zoals bekend werkt het dan niet meer in Firefox…

    Ik weet t niet meer…………………………….
    Maar gewoon een browsercheckje ertussen gooien? Of is er een andere oplossing?
  • Bij voorkeur geen browsercheck gebruiken. Ik denk dat dat in dit geval ook zeker niet hoeft.
    Je kunt ook gewoon een <br clear="all"> erachter gooien (achter de floaters), dan kun je in Firefox ook display: block; gebruiken.
    Maar volgens mij hoef je helemaal geen floaters te gebruiken.
    Gewoon 1 als een 'normale' div gebruiken met een 300px margin-right en een absoluut gepostioneerde div met right:0;. De container div moet dan position:relative hebben.
    Maar je zou ook gewoon een tabel kunnen gebruiken, misschien zelfs wel aan te raden in dit geval.

Beantwoord deze vraag

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