Forums

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

Home Forums CSS Help! “display: inline-block;” being mean..

  • This topic is empty.
Viewing 15 posts - 1 through 15 (of 15 total)
  • Author
    Posts
  • #39044
    danielpox
    Member

    http://i.imgur.com/k1yqL.png

    There you have an image of my issue. See that navigation panel hanging below the header? You can clearly see that there’s a space between each link button. I really don’t want that! Please help..

    #106679
    danielpox
    Member

    Here is the code I’m using http://jsfiddle.net/ntQcV/

    #106681
    Senff
    Participant

    Any particular reason for making them inline-block and not just block? Either way, giving them float:left; will probably help.

    #106684
    enjay
    Participant

    I think this wil be helpful https://css-tricks.com/fighting-the-space-between-inline-block-elements/
    Also, I had a similar problem recently and there was a lively discussion of the relative merits of various methods here: https://css-tricks.com/forums/discussion/18595/displayinline-block-on#Item_17

    #106685

    This is one option you have to fix the problem:

    #menu {
    font-size: 0;
    }
    #menu a {
    font-size: 13px;
    }

    As you are using inline-block, the browser treats each inline block element as though it where a character in a sentence, giving it a little bit of space. The above trick removes that space so that inline-block elements sit right up against one another.

    #106710
    TheDoc
    Member

    You’ll want to do something like this: http://jsfiddle.net/ntQcV/5/

    Make sure there are no spaces between your inline-block elements.

    #106711

    @TheDoc Do you find that using that technique is blurring the lines between content and style? For me, I would rather not have to alter my markup so that a CSS technique works. Either way, it is a valid solution, I’m just interested in your thoughts on the matter!

    With that being said, another, perhaps more readable option (valid in HTML5) is this:


    ‚Äč

    P.S. Can we just have a decent layout model that is widely supported already…

    #106712
    wolfcry911
    Participant

    @Senff, if using floats, you don’t need display: block or inline-block – they’re both overridden by the float.

    #106713
    danielpox
    Member

    Thank you! It works just fine now, thanks again! :)

    #106714
    Senff
    Participant

    @wolfcry911 You’re right, of course. For some reason, I’m simply not able to remember that and I keep forgetting..!

    #106728
    TheDoc
    Member

    @joshuanhibbert something about doing font-size: 0; just doesn’t sit right with me. I get that it works, I just don’t think it makes sense when somebody is reading code.

    Either way, I updated a lot of the markup to remove the divs and spans that were in there.

    #106729

    @TheDoc I know what you mean. I’m still torn on the best way to handle the white space, especially as I use ems fairly regularly.

    #106744
    wolfcry911
    Participant

    you could always use floats ;)
    j/k

    #106773
    danielpox
    Member

    Simply just put comments between the closing tag and the next opening tag! It fixed the issue for me! :)

    #106775

    @wolfcry911 I still do at times :)

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