CSS breaks in IE 7 - Div line break not inline

HTML & CSS
1

The following code displays incorrectly in IE 7, but correctly in IE 8+, FF, Safari & Chrome:

<div style=“margin:0 auto; width: 950px;”>
<div style=“float:left; text-align:center; position:relative; margin:0 0 -70px 0; width: 950px; top:610px”>
<div style=“background-image:url(/images/circle_buttons.png); background-position:14px 0; width:14px; height:14px; display:inline-block; cursor: pointer”></div>
<div style=“background-image:url(/images/circle_buttons.png); background-position:0; width:14px; height:14px; display:inline-block; cursor: pointer”></div>
</div>
</div>

I need the images to display horizontally, not vertically and centered in the page. Does anyone have a workaround or fix?

2

Hi renovation. Welcome to SitePoint. :slight_smile:

display: inline-block doesn’t work on IE7 and under, so instead you can use display: inline just for those browsers.

You could also try floating those divs instead.

3

tried using display:inline - doesn’t work.
floating the div works, but breaks the centering.

4

For the centering, you could give the divs more width, to fill the space, and move the bg position. But I guess the real question is what you are trying to do here. Is this just a test? It looks like you ulitmately want form elements in there, or is this for something else?

Personally, I don’t worry much about IE7 and under. As long as they get a usable layout, I don’t waste my time on them.

5

I created a UI for a splash screen rotator. The buttons are dynamically created and indicate which ad you are on. About 7% of visitors to the site use IE7. The page gets messed up when the buttons lay out vertically…

There has to be a workaround!?

6

The easy way would be to float them and have some padding either side of the container to create the centering. That’s safe enough with fixed-width elements like this.