3 berichten aan het bekijken - 1 tot 3 (van in totaal 3)
  • Q:

    Bijdrager
    computer space

    CSS list inline-block: Crome/Safari rendert niet goed

    Wanneer je een horizontale slider maakt met een list en daarbij als inline-block laat rederen (zodat je een horizontale swipebare slider van foto’s kunt maken), zit je te koekeloeren met de tussenruimte. Die is namelijk niet 0, maar heeft de breedte van 1 spatie bij de dan geldende lettergrootte. Door wordspacing:0 toe te voegen wordt de tussenruimte 0, althans in een normale browser als Firefox.

     
    li
    {
    	vertical-align:top;
    	display:inline-block;
    	height:435px;
    	width:240px;
    	position:relative;
    	word-spacing:0;
    	margin-right:5px;
    }
     

    Webkit maakt er uiteraard weer een potje van:
    Op Safari wordt de tussenruimte 5px+de groote van een spatie, dus ongeveer 10 a 11 pixels.
    Bij Chrome wordt de tussenruimte juist 0. De margin-right valt door de word-spacing 0 helemaal weg.

    Hoe krijg ik dit een beetje eender (allemaal 5px tussenruimte)?


    Bijdrager
    computer space

    Opgelost met een dirty-hack, probleem zit blijkbaar in new lines na LI tags:

    In de php nu dit:

     
    echo("--><li>");
     

    en dan

     
    echo("<li><!--\n");
     

    Je kunt natuurlijk als je uitontwikkeld bent de uncomment tags en \n weggooien, maar dan wordt het een grote klit in de bronweergave.


    Bijdrager
    Shmoo

    Het is op een paar nette manieren op te lossen..

    1)
    Dit is denk ik de meest gebruikte manier omdat het logisch klinkt – voor mij standaard manier geworden aangezien we zo’n beetje alles floaten op vandaag.
    Float de list element naar links.

    
    li {
         float: left;
         display: inline-block;
         width: xxx;
         height: zzz;
         margin-right: 5px;
    }
    

    Je hebt geen word-spacing nodig tenzij je echt iets met text binnen die list -item wilt gaan doen. Gewoon een float left toevoegen die duwt als het ware het volgende (inline) -block element in de rij zo ver mogelijk naar links oftewel koud tegen het andere element aan maar omdat jij dan een margin-right 5px hebt staan zal er overal 5px ruimte tussen zitten.

    2)
    Zoals je al aangeeft is de extra ruimte die opduikt het formaat van een spatie/ -je font-size, dan zet deze op nul voor het list element, aangezien je vaste eenheden gebruikt (pixels) voor alles kan dit geen kwaad.

    
    li {
         font-size: 0;
    }
    

    Daarna moet je wel weer een font-size neerzetten wanneer je tekst gaat gebruiken binnen die list element bijv. een linkje.

    
    li a {
        font-size: 16px;
    }
    

    3)
    Flexbox methode maar dit is vanaf IE10 en geen idee of dit nog ooit echt populair gaat worden in de toekomst.

3 berichten aan het bekijken - 1 tot 3 (van in totaal 3)

Je moet ingelogd zijn om een reactie op dit onderwerp te kunnen geven.