Grow your CSS skills. Land your dream job.

Display:inline-block on
    • # July 17, 2012 at 7:12 pm

      Having an interesting issue with some

    • elements when using display:inline-block. Problem is only presenting itself sometimes, like it will render fine, but then if I hit reload it breaks. Broken on CodePen to, check it out: CodePen Link

      What am I doing wrong?

    # July 17, 2012 at 7:21 pm

    I think that you will find the problem is with your markup. A valid list must have list items as its direct children, and currently you have anchor tags as the direct child, with the list items nested inside. Try the following instead:

    # July 17, 2012 at 7:26 pm

    That makes sense and it’s how I originally had it, but I had an issue with the :hover part because if I put it on the

  • and not the then the text color can’t change, and if I put it on the it’s only triggered if the mouse hits the actual link text…
  • # July 17, 2012 at 7:54 pm

    @joshuanhibbert Why do you prefer the extra markup version instead of setting the font-size to 0? Is there really a difference?

    # July 17, 2012 at 7:58 pm

    @enjay, set the anchors to display: block. And personally, I’d float the li instead of display: inline-block;

    # July 17, 2012 at 8:02 pm

    @ChristopherBurton, I was wondering the same thing…It is to me a bit cleaner and less ‘hacky’ to just throw in the css fix instead.

    # July 17, 2012 at 8:07 pm

    @kgscott284 The only reason I went with the font-size: 0; trick was because WordPress outputs a lot of space in the markup. Now that I think about it, I think Josh’s solution would work but I would agree, it feels much cleaner.

    # July 17, 2012 at 8:11 pm

    @ChristopherBurton @kgscott284 In this case, I simply used the markup that was provided. The fix that I use depends on the design; if I am working with ems then using font-size: 0; means that any child elements will have a font-size of 0 (I often use ems for responsive designs as it makes it much easier to adjust font sizing across the board for different sized screens). Another fix I often use is margin-right: -.25em;.

    # July 17, 2012 at 8:55 pm

    Hey, OP here. I used that method because it’s what I saw here.

    @wolfcry911 thanks for the tip on the anchors, and I’m going to try the float method as well.

    # July 17, 2012 at 9:04 pm

    @enjay My personal preference would be to use inline-block over floats, and I wrote up why here: http://joshnh.com/2012/02/why-you-should-use-inline-block-when-positioning-elements/

    That doesn’t mean that I am right, but I’m sure you can make an educated decision once you know all the facts!

    # July 17, 2012 at 9:47 pm

    @joshuanhibbert fair enough, i didn’t even see the source, i thought you gave a good explanation on how to fix it… :)

    and @enjay: the article provided above is a great read…I am almost a 100% convert after I read it…

    # July 17, 2012 at 9:52 pm

    joshua, with all due respect, your ‘facts’ are somewhat twisted to bolster the use of inline-block. I have nothing against using it, but I also have nothing against floats either (which you seem to have). The right tool for the job… In this simple case of left aligned navigation there is absolutely zero benefit to using inline-block over float. In fact, you need more (albeit little) css to use inline-block than floats.

    # July 17, 2012 at 10:02 pm

    @Wolfcry911 Please let me know of any facts that I have twisted, as this was not my intention. If you are able to list them for me, I will amend them in the article. The piece is obviously biased, but I certainly am not trying to mislead anybody. I was very careful to make sure that I never stated that using floats is wrong.

    In my opinion, display-inline is a more powerful tool when aligning elements for layout purposes. That of course, is just my opinion, and as I have already stated above, it does not mean that I am right!

    My intention wasn’t to start a flame war, but simply to provide @enjay with a little more information so that they can make their own decision. I offered my opinion (as you did also), and then included some additional material I had written to offer some insight as to why.

    # July 17, 2012 at 10:32 pm

    @joshuanhibbert that was a well thought out piece. Thanks! It’s funny that I had never thought to use floats for this, and others seem to never have thought to do otherwise.

    # July 17, 2012 at 10:46 pm

    @enjay No worries at all.

    Viewing 15 posts - 1 through 15 (of 17 total)

    You must be logged in to reply to this topic.

    *May or may not contain any actual "CSS" or "Tricks".