[CSS] float: right veranderende resultaten in webkit.

[jeantje]

Ik heb wat last van vreemde resultaten in Chrome android/desktop.

Eerste keer pagina laden:


Na reload:


HTML

code:

<header class="header">
    <a href="./"><img class="logo" src="<?php bloginfo('template_url') ?>/images/logo.png"></a>
    <div class="contactinfo">
        <li>De Driesprong 34-35</li>
        <li>5241TJ Rosmalen</li>
        <li><a href="tel:[phone]">073-6897641</a></li>
    </div>
</header>

CSS

code:

/* ##### HEADER ##### */

.logo
{
    margin-left: 9px;
}

.contactinfo
{
    list-style-type: none;
    float: right;
    margin: 30px;
}

[Munki]

Even een clearfix toevoegen aan je <header> of een 'clear: both;' divje onder je "contactinfo" plaatsen. Daarnaast moet je "contactinfo" geen DIV element zijn, maar een UL.

[ Voor 6% gewijzigd door Munki op 27-12-2013 22:46 ]

[jeantje]

Munki schreef op vrijdag 27 december 2013 @ 22:44:
Even een clearfix toevoegen aan je <header> of een 'clear: both;' divje onder je "contactinfo" plaatsen. Daarnaast moet je "contactinfo" geen DIV element zijn, maar een UL.

Oke, ik heb er nu een clear:both div onder geplaatst.

Dit zorgt voor een zeer grote lege ruimte er onder.

[Munki]

Omdat je logo niet gefloat wordt en dus de gehele "rij" inneemt. Je moet dus even een 'float: left;' op je logo gooien en dan werkt het.

[ Voor 29% gewijzigd door Munki op 27-12-2013 23:03 ]

[jeantje]

Thanks! dat werkte.

Inmiddels heb ik nog iets geks ontdekt.

Na een refresh is de padding van LI elementen in het menu groter dan bij de eerste keer laden.

iemand een idee?

[Munki]

Gebruik inspect element. Dan weet je hoe of wat.