The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS [Solved] CSS challenge

  • This topic is empty.
Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
  • #195846


    There’s a tiny little thing which is bothering me.
    Taken a look at a website i’m building and especially at the little menu on the top right. (
    There you see something like this:
    Contact | Werken bij | [flag] | [flag] | [flag]

    Before ‘Werken bij’ and the first [flag] there’s more space (like 2px) then there is with the other elements. Why? Anyone?



    Looks like it’s a white-space issue because the list items have display:inline applied.

    You could either float them instead (don’t forget to contain the float)…or find a method of removing the white-space.

    One option would be to set the font-size of the parent ul to 0 and then re-enable the font-size on the li.


    THX Paulie for the quick answer!

    All the LI items involved have display:inline applied. It’s strange to me the only two items have issues with white-space. Don’t you agree?

    Gr. Bert


    Not really, the content of the “Text” links is different from the “Flag Links”…which also contain images with additional display properties which might affect it and their neighbours.

    Frankly, 2px isn’t going to break the design but it’s up to you.



    Thank you for your time…

    I agree, it isn’t breaking up the design. It’s just bothering me why this is happening.

    You’re right about the content of the LI’s, but still: why is there a little space in front of the first flag and not in front of the other flags?

    It’s really not a big thing, i’m just curious why. If the white-space would occur with all inline LI’s, i could ‘hack’ it like on:
    But that is not the case…

    gr. Bert


    Without getting into it too much it’s the interaction (it seems) between last text list item and the first flag item.

    Since that only happens once it’s the only place it shows.

    If you do the font-size reset you get this


    Solved. I followed your first solution (UL: fontsize=0 / LI: reset fontsize) and this works!

    It still feels a bit weird that only 2 LI’s were affected by the white-space ‘bug’.

    I’ll add this to my list of CSS secrets… :)

    Thanks for your input, Paulie.

    (edit: crossed your previous answer.. :) )

Viewing 7 posts - 1 through 7 (of 7 total)
  • The forum ‘CSS’ is closed to new topics and replies.