Forums

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

Home Forums CSS Text align issue in Safari with inline-block divs

  • This topic is empty.
Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #165224
    Mark H
    Participant

    Hi all I’m having an issue with Safari basically the divs wrapped around the text are aligning based on the text length and where it sits on the bottom line rather than all aligning correctly as in chrome.

    If you could check this CodePen out it makes more sense:
    CodePen Link

    If you try it in Safari then in Chrome you should see the difference, any idea what is causing this?

    EDIT: I have to use Overflow hidden on Chrome to get it to work??

    Thanks
    Mark

    #165240
    Paulie_D
    Member

    Add vertical-align:top; and remove the overflow.

    It’s a function of the inline-block

    #165242
    Atelierbram
    Participant

    @Paulie_D
    With inline-block there is this whitespace thing that you have to deal with in the HTML, no?


    @MarkH

    With floats and a grid you get something like this, which is a bit more sturdy I think, …. but maybe you have reasons for not wanting floats, or extra HTML-markup …

    #165244
    Paulie_D
    Member

    @Atelierbram

    With inline-block there is this whitespace thing that you have to deal with in the HTML, no?

    Yes there is, but there are a couple of fixes (font-size:0 for one) and I’ve always considered using in on a par with floats (which you have to clear).

    I just mentioned the vertical-align because display:inline-block was already being used in the Codepen.

    Both have their upsides and downsides and both require some finagling. There are situations where I will use one over the other (centered menus really scream inline-block to me) but I have no particular preference.

    Fortunately, flexbox is on the rise…I just have to learn it properly. :)

    #165287
    Mark H
    Participant

    @Paulie_D & @Atelierbram

    Thanks the Vertical-align: top has solved it for me. I wanted to use inline-block over floats as I’ve been reading a lot lately how floats are pretty bad practice. I was looking at using Flexbox but as it’s not fully baked in the browsers (Firefox) yet I thought I’d hold off. I do like how I can center divs very easily with inline-block too.

    #165296
    Paulie_D
    Member

    +1 to all that.

    Ditto absolute positioning….it has it’s place (no pun intended)…used sparingly. :)

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