SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Zealot iStudent's Avatar
    Join Date
    Mar 2004
    Location
    So Cal
    Posts
    126
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    site appearing slightly lower only in IE 7

    I've been checking my redesign site (located here) in a variety of browsers and for some reason only in IE 7 is it appearing just a few pixels lower.

    Does anyone know the reason for this and how to resolve it?

    Thanks!

  2. #2
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Hi,
    Try removing the default margin/padding from the body or setting it manually.

    You should be aware that IE6/7 will not honor the bottom margin of the last element that touches the body. That would be the #container in your case, so if you set margin:10px auto; it will give a 10px bottom margin in all but IE6/7.

    Code:
    body {
        background: #B9D7E6 url(images/body-bg.gif) repeat-x;
        margin:0;
        padding:0;
    }
    
    #container {
        margin: 10px auto;
         width: 960px;
         text-align: left;
        border: 1px solid #000000;
        background-color: #FFFFFF;
    }
    However if you specifically set your body margin then IE6/7 should comply.
    Code:
    body {
        background: #B9D7E6 url(images/body-bg.gif) repeat-x;
        margin:10px 0;
        padding:0;
    }
    
    #container {
        margin: 0 auto;
         width: 960px;
         text-align: left;
        border: 1px solid #000000;
        background-color: #FFFFFF;
    }

  3. #3
    SitePoint Zealot iStudent's Avatar
    Join Date
    Mar 2004
    Location
    So Cal
    Posts
    126
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks again Rayzur! I set the style sheet to:

    Code:
    
    body {
    	background: #B9D7E6 url(images/body-bg.gif) repeat-x;
            margin: 10px 0;
            padding: 0;
    }
    
    #container {
    	margin: 0 auto;
     	width: 960px;
     	text-align: left;
    	border: 1px solid #000000;
    	background-color: #FFFFFF;
    }
    and it's now working perfectly in IE 7. Thanks again for all of your help. I deeply appreciated it!


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
  •