www.webdeveloper.com
Results 1 to 1 of 1

Thread: Background question with a fixed width layout - doesn't look right in IE - help!

  1. #1
    Join Date
    May 2006
    Posts
    9

    Background question with a fixed width layout - doesn't look right in IE - help!

    Hello,

    I am building a site in the 960 grid system CSS framework. Please view the first image to see my basic layout mockup (screen shot 003) - this is the mockup that represents the 960 px width. I actually would like the top header background and the mid region background to extend the entire width of the page and not be constrained within the 960 px - SO...

    This is essentially what I've tried:

    Code:
    *This is a graphic that represents the exact colors and pixel dimensions 
    as the top of the webpage - this image is set to repeat horizontally.
    
    body {
        background-image:url(../images/pagebg.jpeg);
        background-repeat: repeat-x;
    }
    
    *This is the container for the header. It has a solid background.
    
    #containerone {
        background-color: #c7ffff;
    }
    
    *This is the container and image for the midregion - it is mostly solid, but has a 2px contrasting border at the top and bottom of it, so it is set to repeat horizontally.
    
    #containertwo {
        background-image: url(../images/midbg.jpeg);
        background-repeat: repeat;
    }
    Screen shot 004 is what the CODED site looks like in Firefox - perfect!

    Screen shot 005 is what the coded site looks like in IE - as you can see it does not line up.... very very slightly.

    Anyone know what might be happening? I have checked over the dimensions of everything a hundred times. I also have included a CSS reset to override any default IE styling.

    Should I just do this another way? Any ideas are greatly appreciated.
    Attached Images Attached Images

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles