Forums

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
    Posts
  • #195846
    Bert
    Participant

    Hi,

    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. (http://rbk.colddesign.nl)
    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?

    TIA
    Bert

    #195847
    Paulie_D
    Member

    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.

    #195848
    Bert
    Participant

    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

    #195851
    Paulie_D
    Member

    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.

    #195855
    Bert
    Participant

    @Paulie,

    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:
    https://css-tricks.com/fighting-the-space-between-inline-block-elements/
    But that is not the case…

    gr. Bert

    #195856
    Paulie_D
    Member

    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

    #195858
    Bert
    Participant

    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.