5

Following yesterday's issue ( DOM Equidistant divs with inline-blocks and text justify won't work when inserting through JS ) which @Snuffleupagus was kind enough to help me understand, I stumbled into another weird browser behaviour.

Updated fiddle in here: http://jsfiddle.net/xmajox/NUJnZ/

When any kind of content is added (block or inline) to the divs they shift down. When all divs have content, they magically move back into their correct places.

I tried starting them all with some dummy content div and then just changing that children's text but it reacts the same way.

Any ideas?

Community
  • 1
  • 1
Rodrigo Neves
  • 220
  • 2
  • 12

2 Answers2

10

Add vertical-align: top to these div's:

.rowSample > div {
    background: none repeat scroll 0 0 black;
    border: 1px solid yellow;
    color: white;
    display: inline-block;
    height: 50px;
    vertical-align: top;
    width: 50px;
}

Because these are elements with display:inline-block they are aligned as inline elements but have explicit dimensions. For example, <img> tags by default have inline-block display mode, so to align them inside text you have to specify a desired vertical-align property.

Please take a look at the example fiddle: http://jsfiddle.net/a6Hu2/

keaukraine
  • 5,315
  • 29
  • 54
  • OMG!! you're a genius.....thanks so much ....I was beating my head on why it wasn't sitting RIGHT next to the other div....thank you, thank you, thank you!!! – carinlynchin Jun 05 '15 at 17:01
3

I agree with @Keaukraine, you need to add a

vertical-align:top;

However, you are also going to need some specific code to get this working on Internet Explorer 7 (which in 2012 is still a major browser).

/* For IE 7 */
zoom: 1;
*display: inline;

See this article for details: http://robertnyman.com/2010/02/24/css-display-inline-block-why-it-rocks-and-why-it-sucks/

Jamie G
  • 1,653
  • 3
  • 20
  • 43
  • Yes I also always do this to support IE7 :) – keaukraine Oct 11 '12 at 07:53
  • Thanks for the tip. Since it's so simple to add the support I will so for this case. I am no longer supporting by default IE < 8 though, fed up with it. :p – Rodrigo Neves Oct 11 '12 at 08:06
  • Just depends on the website's audience - people in China still mostly use IE 6! Also, many businesses still run outdated versions of IE so for a b2b site, sadly it's still essential in my opinion. I wish less of my clients were b2b, then I might be able to at least ignore IE 6! – Jamie G Oct 11 '12 at 11:16