Grow your CSS skills. Land your dream job.

Top Margin issue in IE7

  • # July 17, 2009 at 11:17 am

    I’m somewhat new to CSS, so forgive me if my code is hideous (tips always welcome!).

    Can anyone tell my why I can’t seem to get IE7 to display the logo in the correct place? Here’s the URL: http://www.stylishspacesredecorating.com.

    It seems to be correct in Firefox and IE8, but only when I set the top margin to -45px. So, that would make sense as to why in IE7, it pushes it up so far on the page.

    I used to design a lot with tables, so broswer hacks weren’t necessary very much. So, I’m a little stumped as to what to do now.

    Any help would be greatly appreciated!!

    # July 17, 2009 at 11:24 am

    Here’s a screenshot of it in IE7 if you don’t have it. The logo is a transparent gif, so I erased some of it to get the rounded circle at the top – in case you’re wondering why the image looks goofy.

    # July 17, 2009 at 11:47 am

    How about this?

    Place the logo inside div.innerwhite:

    Code:

     

    Then make div.innerwhite position:relative:

    Code:
    .innerwhite {
    position: relative;
    }

    and position the logo thus:

    Code:
    #logo {
    height:159px;
    left:196px;
    position:absolute;
    top:-51px;
    width:353px;
    z-index:1;
    }
    # July 20, 2009 at 4:13 pm

    This put the logo in a much better spot, but now I’m trying to make minor adjustments to get the lines to line up on the outerwrapper. Here’s a new screenshot.

    If you look closely, the top margin value I have to use to make the white outer border line up is -52px. This value puts it in a different spot in IE7 (up just a pixel or two too far). So, no matter what I do, one browser will always be off. Also, if you notice the top margin of the inner white wrapper is not showing 5 pixels of space on the top as it is on the side margins. These details are super picky, but critical.

    So, it looks like I’ll have to have some separate code for IE7. How do I do this?

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".