SitePoint Sponsor

User Tag List

Results 1 to 15 of 15
  1. #1
    SitePoint Zealot
    Join Date
    Aug 2008
    Location
    Western Australia
    Posts
    128
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    IE7 image not responding to CSS

    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. #2
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Margin:auto does not work in absolute elements. You could center it another way since you have a width/height set
    Code:
    .s1 img 
    {
    position: absolute;
    top:0;
    left:50%;
    margin-left:-140px;
    height: 315px; 
    width: 280px;
    display: block;
    }
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  3. #3
    SitePoint Zealot
    Join Date
    Aug 2008
    Location
    Western Australia
    Posts
    128
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  4. #4
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Do you have a site where this is posted? I'd be able to debug this quite fast if I had a link
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  5. #5
    SitePoint Zealot
    Join Date
    Aug 2008
    Location
    Western Australia
    Posts
    128
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

  6. #6
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    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
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  7. #7
    SitePoint Zealot
    Join Date
    Aug 2008
    Location
    Western Australia
    Posts
    128
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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!

  8. #8
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    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
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  9. #9
    SitePoint Zealot
    Join Date
    Aug 2008
    Location
    Western Australia
    Posts
    128
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks again for the reply !

  10. #10
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,269
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by RyanReese View Post
    Margin:auto does not work in absolute elements.
    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.

    e.g.
    Code:
    <!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.

  11. #11
    SitePoint Zealot
    Join Date
    Aug 2008
    Location
    Western Australia
    Posts
    128
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #12
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Guess I learn something new everyday .
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  13. #13
    om nom nom nom Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,266
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    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.

  14. #14
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Stomme poes View Post
    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.
    Yes, I had only tried it with a width, but not with coordinates set also.
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  15. #15
    om nom nom nom Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,266
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    Same here. : )


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •