IE7 image not responding to CSS

HTML & CSS
1

I have an image in a centred div that also needs to be centered. This is not a problem when the div and image is static:

#imgbox
{
width:60%;
margin: 0 auto;
margin-bottom: 2em;
background: red;
padding: 1em;
}
#imgbox img {margin: 0 auto; width: 90%;}

The above works fine.

The second image box is not static. It uses JS to have the images fading in and out and alternating. The above CSS did not work - the image refused to move from top left of the containing div.

I eventually got the image/s centred with the current CSS which is far more extensive:

/ROTATING IMAGES/

/* Image Fade Stuff */

.s1
{
margin: 0 auto;
width: 60%;
overflow: hidden;
height: 400px;
position: relative;
padding: 1em;
background: red;
}

.s1 img
{
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
height: 315px;
width: 280px;
display: block;
}

This centres the image/s and is fine in FX and IE8 but in IE7, the image is in the top left of the containing div. Have tried all sorts of different settings to no avail - it just won’t shift over.

I was wondering if there is a conditional comment I can use for IE7 or perhaps someone can let me know why this is happening. I have added “text-align: center” to the body just in case.

2

Margin :auto doesn’t work on absolute elements in iE6 and 7

It works in good browsers and is a little known fact but you need to also set the left and right positions at the same time and for the element to have a width.

Damn I was just recently trying to automargin some abso-po’d boxes and it wasn’t working so I figured it doesn’t work for them… now I know why it wasn’t.

3

Guess I learn something new everyday :).

4

Thanks again for the reply !

5

I don’t know why any browsers would be centering the absolute image via margin:0 auto, I believe IE was being correct in that instance.

Nothing from the original post wouold lead me to anything, though admittedly there isn’t much code there to go off of.

Glad you got it sorted anyway :slight_smile:

6

Hi, in my IE7, the .s1 img is in the middle of the div, can you screenshot what you are seeing? Try clearing your cache :slight_smile:

7

Do you have a site where this is posted? I’d be able to debug this quite fast if I had a link :slight_smile:

8

Thanks for reply, Ryan but it didn’t work. All browsers show half an image fixed to the left hand side of containing div so I have restored the original CSS which at least works in all but IE7. Will try some other centering options if I can think of any I haven’t already tried.

9

Yes, I had only tried it with a width, but not with coordinates set also. :injured:

10

Same here. : )

11

Thanks Paul - it never gets any easier! I never had a problem with IE7 until after the advent of IE8 !

I shall keep a copy of your reply in case it ever comes up again.

12

Ryan - my colleague seems to have fixed it by adding another div round the fading images div. Seems to be OK now in IE7. Thanks for the help. Did you see anything in the original CSS that was causing the issue?
I think our posts went up at the same time!

13

http://www.tonybarlowformalhire.com.au/testdirectory/suitsaleperth.com.au/index.php

Thanks Ryan

14

Margin :auto doesn’t work on absolute elements in iE6 and 7 :slight_smile:

It works in good browsers and is a little known fact but you need to also set the left and right positions at the same time and for the element to have a width.

e.g.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
div{
    position:absolute;
    left:0;
    right:0;
    width:100px;
    height:100px;
    background:red;
    margin:auto
}
* html div{left:50%;margin-left:-50px}
*+html div{left:50%;margin-left:-50px}

</style>
</head>

<body>
<div>test</div>
</body>
</html>

The trick is the left:0 and right:0 which would normally mean the element is 100% wide but because it has a width already defined then the auto margins can centre it within that original left:0 and right:0 space.

15

Margin:auto does not work in absolute elements. You could center it another way since you have a width/height set :slight_smile:

.s1 img 
{
position: absolute;
top:0;
[color=red]left:50&#37;;
margin-left:-140px;[/color]
height: 315px; 
width: 280px;
display: block;
}