- This topic is empty.
-
AuthorPosts
-
March 9, 2014 at 7:38 pm #165224Mark HParticipant
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 LinkIf 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
MarkMarch 10, 2014 at 2:30 am #165240Paulie_DMemberAdd
vertical-align:top;
and remove theoverflow
.It’s a function of the
inline-block
March 10, 2014 at 2:55 am #165242AtelierbramParticipant@Paulie_D
Withinline-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 …March 10, 2014 at 3:01 am #165244Paulie_DMemberWith 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
becausedisplay: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. :)
March 10, 2014 at 9:19 am #165287Mark HParticipantThanks 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.
March 10, 2014 at 10:05 am #165296Paulie_DMember+1 to all that.
Ditto absolute positioning….it has it’s place (no pun intended)…used sparingly. :)
-
AuthorPosts
- The forum ‘CSS’ is closed to new topics and replies.