3

I apologize if there is something very obvious I need to correct here, but I am stumped on this one. I'm just try to layout a series of links (styled as block level elements) in a grid layout. I've boiled down what I'm trying to do into it's most simple state here: http://cdpn.io/JLdne

In Safari and Firefox it renders as I would expect, but in Chrome (of all browsers) the 2nd the 3rd link elements are shifted down another 32 pixels.

Part of me is saying I may have found a weird bug in chrome, but I'm thinking the more likely thing is I'm just doing something wrong. Is there a better way to do this? I tried changing the a elements to display as inline-blocks, rather than using floats but it started to cause other issues in my layout. Thoughts would be appreciated.

user192618
  • 99
  • 2
  • 8
  • Firefox and Chrome look identical to me – Explosion Pills Feb 25 '13 at 23:52
  • I can see the difference in alignment, curiously removing and reapplying the float with developer tools fixes the layout. – Dave Anderson Feb 25 '13 at 23:55
  • Same thing for me Dave, I was just going to add that removing and reapplying the float does has that effect for me as well. Very weird... – user192618 Feb 25 '13 at 23:56
  • 1
    Removing the `clear: both` from the containing div fixes this. Why this is the case I'm not sure. – Dave Anderson Feb 25 '13 at 23:57
  • That is weird... Have you tried using a
      instead of a
      ? Just a thought.
     – Matt Whitehead Feb 26 '13 at 00:00
  • See the answer from @Pointy to http://stackoverflow.com/questions/4198269, his comment suggests why margins and floats are problematic. – Dave Anderson Feb 26 '13 at 00:03
  • 2
    A couple of days ago, there was this question: http://stackoverflow.com/questions/15038724/chrome-not-displaying-all-list-items-with-displayinline, which seems to be related in that it's a Chrome rendering bug where a block-level element contains only white space and empty inline elements. In both cases injecting something concrete at the start for Chrome to render, seems to resolve the issue. In this case `div:before {content: '\200b' }`, in the other question `ul` instead of `div`. Clearly, the question and the manifestation of the bug are different, but they may have a common cause. – Alohci Feb 26 '13 at 00:50

2 Answers2

3

remove clear:both on the div class

Mirko Mukaetov
  • 204
  • 3
  • 14
  • Thanks, I guess the clear:both is not needed. For some reason I was thinking I needed it to make sure the divs didn't line up next to each other, but of course they are block level elements. It's still odd that adding clear:both has that effect and only in Chrome, you would think it should just do nothing. – user192618 Feb 26 '13 at 00:10
  • You saved my sanity! I didn't know what to do. Actually I saw this bug a while ago when I tried the pre-release (aka in-development) version of Chrome but I ignored it and switched back to the stable one. I thought it would be something they'd fix as I couldn't be the only one with this problem. But a few days ago it seems that they moved that dev version to release :/ Thanks! – Gonan Feb 26 '13 at 12:11
0

Seems like this only effects Chrome 25... just tested using Chrome 24 on Spoon.net and it renders the same as Firefox

Mr Benn
  • 466
  • 1
  • 6
  • 19