SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Enthusiast
    Join Date
    Jul 2012
    Location
    Tucson, AZ
    Posts
    25
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Weird Margin Issue in All Versions of IE (Including 9) - Negative Margins?

    http://www.goo.gl/tpL04

    You can see the difference here:
    http://img534.imageshack.us/img534/8...20813at557.png

    Any ideas? A negative margin is being used to pull the image "up" - I'm thinking that may have something to do with it? The problem only occurs in IE (of course).

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,097
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    I would recommend putting that image in there as a background image, which is much more reliable.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  3. #3
    SitePoint Enthusiast
    Join Date
    Jul 2012
    Location
    Tucson, AZ
    Posts
    25
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Unfortunately, I didn't build this website. It's currently set up in Joomla with the header as a module so it can easily be changed on each page. Setting it as a background image would lose some of that flexibility. Also, if the negative margin was causing the issue, wouldn't there still be a problem?

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,097
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Hm, rather than pull the slider section up, it would have been better to position the form div absolutely over it. That would work better. Yes, I didn't look closely enough at where the negative margin was. It doesn't matter whether you use the image in the HTML or as a bg image. (Sorry for that red herring.)
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  5. #5
    SitePoint Enthusiast
    Join Date
    Jul 2012
    Location
    Tucson, AZ
    Posts
    25
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    Hm, rather than pull the slider section up, it would have been better to position the form div absolutely over it. That would work better. Yes, I didn't look closely enough at where the negative margin was. It doesn't matter whether you use the image in the HTML or as a bg image. (Sorry for that red herring.)
    http://174.132.149.157/~hslprope/index.php/apartments

    Nice! But for some reason it's still off a bit in IE. Not enough of the header image is showing.

  6. #6
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,097
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    I can't test it in IE right now, but probably a better approach here is to place the form div inside the slider section. Then you can accurately place it in relation to the slicer section.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  7. #7
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,274
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by JeremyEnglert View Post
    http://174.132.149.157/~hslprope/index.php/apartments

    Nice! But for some reason it's still off a bit in IE. Not enough of the header image is showing.
    You have a .push style given to IE9 only which doesn't seem to be necessary.

    Code:
    .push{top:-310px;padding-top:150px; margin-bottom:-310px;}
    Remove it and ie9 should work.

    BTW IE9 will very rarely need margin changes (apart from the odd pixel) so don't hack it into submission as the cause is usually somewhere else.


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
  •