CODEWITHSUNDEEP
cssalignment
That Brazilian Guy
That Brazilian Guy

Reputation: 3531

DIV alignment differs on Chrome and Firefox

Why the difference? How do I fix it? I'm using html5boilerplate and it include a CSS reset, so shouldn't it be renderet similarly on both browsers? What is the cause for the difference?

Firefox 22 (on Ubuntu)

enter image description here

Chrome (Chromium 28.0.1500.71-0ubuntu1.12.04.1)

enter image description here

HTML

        <div id="linkbar">
            <a><img src="./img/arrowleft.png"></a>
            <div id="linkbarinternal">
                <ul>
                    <li><a><img src="./img/banner01.jpg"></a></li>
                    <li><a><img src="./img/banner02.jpg"></a></li>
                    <li><a><img src="./img/banner03.jpg"></a></li>
                    <li><a><img src="./img/banner04.jpg"></a></li>
                    <li><a><img src="./img/banner05.jpg"></a></li>
                    <li><a><img src="./img/banner06.jpg"></a></li>
                    <li><a><img src="./img/banner07.jpg"></a></li>
                    <li><a><img src="./img/banner08.jpg"></a></li>
                </ul>
            </div>
            <a><img src="./img/arrowright.png"></a>
        </div>

CSS

#linkbar {
    width:90%;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 15px;
    clear: both;
}

#linkbarinternal {
    width: 700px;
    display: inline-block;
    border-top:2px solid #aa0000;
    border-bottom:2px solid #aa0000;
    padding: 10px 0px 10px 0px;
    overflow: hidden;
    white-space: nowrap;
}

#linkbar ul, #linkbar li {
    display: inline;
    padding: 0px;
}

Upvotes: 1

Views: 3059

Answers (1)

Michael Lawton
Michael Lawton

Reputation: 1520

Try

#linkbarinternal, #linkbar > a {
    vertical-align: middle
}

or

#linkbarinternal, #linkbar > a {
    vertical-align: middle
    display: inline-block;
}

Upvotes: 2

Related Questions