Question

I am making a ticker which will eventually look like ESPN’s bottom line.

Internet Explorer (7, 8, and 9) respect the width attribute on my divs, but do not respect the centering of the main div.

While WebKit (Safari 5 and 6, Chrome) and Firefox do not respect the width of the divs, but does center the main div properly. I am racking my head trying to get the CSS to work cross bowser.

HTML

<div id="ticker">
    <div id="homeTeam">Team A</div>
    <div id="homeScore">1</div>
    <div id="awayTeam">Team B</div>        
    <div id="awayScore">2</div>
    <div id="remaining">Final</div>
</div>

CSS

#ticker {
    margin: auto;
    width: 778px;
    background-color: black;
    height: 28px;
    border-top-width: 3px;
    border-top-style: outset;
    border-top-color: #FFFFFF;
}

#homeScore {
    width: 60px;
    margin-left: -4px;
    padding-right: 10px;
    background-color: #79000a;
    font-size: 24px;
    color: white;
    display: inline;
    text-align: right;
}

#awayScore {
    width: 60px;
    margin-left: -4px;
    padding-right: 10px;
    background-color: #79000a;
    font-size: 24px;
    color: white;
    display: inline;
    text-align: right;
}

#homeTeam {
    width: 270px;
    padding-left: 10px;
    background-color: #7c000e;
    font-size: 24px;
    color: white;
    display: inline;
}

#awayTeam {
    margin-left: 25px;
    width: 270px;
    padding-left: 10px;
    background-color: #7c000e;
    font-size: 24px;
    color: white;
    display: inline;
}

#remaining {
    width: 76px;
    background-color: black;
    margin-left: 25px;
    font-size: 20px;
    color: white;
    display: inline;
    text-align: left;
}

Answer 1

The problem is you are setting the display property to inline. IE erroneously respects the width property on inline elements whereas the others follow web standards and do not.

You can:

1) Change inline to inline-block

or

2) Change them to block and use the float property.

Here is an explanation how to get inline-block to work in IE7 http://blog.mozilla.org/webdev/2009/02/20/cross-browser-inline-block/