Question

I’m having a weird display inconsistency with chrome and perhaps someone with cross-browser experience can shed light on it.

Fiddle: http://jsfiddle.net/Bio2hazard/DqCMY/

I’ve simplified the code as much as possible to dig down to the problem(s).

HTML ( Just a few images, really )

<div id="1" class="list_box">
    <img class="game_image" src="http://lorempixel.com/output/animals-q-c-184-69-9.jpg"
    width="184" height="69"/>
</div>
<div id="2" class="list_box">
    <img class="game_image" src="http://lorempixel.com/output/animals-q-c-184-69-9.jpg"
    width="184" height="69"/>
</div>
<div id="3" class="list_box">
    <img class="game_image" src="http://lorempixel.com/output/animals-q-c-184-69-9.jpg"
    width="184" height="69"/>
</div>
<div id="4" class="list_box">
    <img class="game_image" src="http://lorempixel.com/output/animals-q-c-184-69-9.jpg"
    width="184" height="69"/>
</div>
<div id="5" class="list_box">
    <img class="game_image" src="http://lorempixel.com/output/animals-q-c-184-69-9.jpg"
    width="184" height="69"/>
</div>
<div id="6" class="list_box">
    <img class="game_image" src="http://lorempixel.com/output/animals-q-c-184-69-9.jpg"
    width="184" height="69"/>
</div>

CSS

body {
    background-color: #2d2d2b;
    color: #939393;
}

.list_box {
    margin-bottom: 2em;
    display:inline-block;
    width: 184px;
    height: 69px;
    overflow: hidden;
}

.testleft {
    float: left;   
}

.testright {
    float: right;   
}

JS ( The interesting part, probably )

$.fn.infoCardDisable = function () {
    $('.active').stop().animate({
        height: '69px',
        marginBottom: '2em'
    }, 400, function() { 
        $(this).removeClass('active');
        $(this).children('.testleft').remove();
        $(this).children('.testright').remove();
    });
}

$('.list_box > .game_image').click(function (e) {    
    if ($(this).parent().hasClass('active')) {
        $(this).infoCardDisable();
    } else {        
        $(this).infoCardDisable();

        $(this).parent().append('<span class="testleft">L.Test</span><span class="testright">R.Test</span>');

        $(this).parent().addClass('active').stop().animate({
            height: '103px',
            marginBottom: '-2px'
        }, 400);
    }
    return false;
});

The basic goal is to expand the list_box element downwards to reveal additional content when a image is clicked on. This action should not affect the positioning or flow of the content.

It works fine in both Firefox and IE, however chrome has all sorts of problems with it.

1) The float: left; and float:right; on the text causes the box to be awkwardly stuck higher up than any other element. Can be fixed by removing the floats, but I need them to position the elements.

2) The whole thing makes all elements around it jump around. This can be fixed by removing the display: inline-block from list_element but unfortunately that is not a option.

My tests were done on Firefox(18.0.1), Chrome(24.0.1312.52) and Internet Explorer(9.0.8).

Sooo… any ideas?

Answer 1

Chrome’s default vertical-align behaves weirdly sometimes, you can solve it by explicitly setting it:

.list_box {
    [...]
    vertical-align: top;
}

Fiddle