Pleading for help with image positioning

**audraoc** · 11:24 PM

I know it's common problem - image displays in the way it should be in FF, but drops down in IE7. Can't find the solution anywhere.
Problem is with div.header
You can see it happening in my test site:
www.test.tarawebdesigns.com
I'll try to post code snipets:
1.index.php file:

Code:

<body>    
<div class="Main">
<div class="Header">
 <div class="headerimg"> </div> 
<div class="logo"></div>
<jdoc:include type="modules" name="user3" />
</div>
/*----the rest of divs---*/
</div>
</body>

2.template.css:

Code:

body
{

    margin: 0 auto;
    padding: 0;
    background-color: #bcbcbc;
    background-image: url('../images/Page-BgTexture.png');
    background-repeat: repeat-x;
    background-attachment: scroll;
    background-position: top left;


}


.Main

{
    position: relative;
    width: 100%;
    left: 0;
    top: 0;
}

div.Header


{

    margin: 0 auto;
    display: block; 
    position: relative;
    top: 0;
    left: 0; 
    width: auto;
    height: 310px;

}

div.headerimg

{
    background: transparent url(../images/header_img.png) no-repeat;
    width: 400px;
    height: 310px;
    display : block;
    position: absolute;
    left: 0px;
    top: 0px;
    z-index: 40;

}

Please help, will be forever greatfull !

**stevej** · 04-30-2009, 10:37 PM

Okay... first off, for .body, you need it to be body, since the period at the beginning means it's a class so your styling won't take effect. I'll let some of the CSS experts tell you more about that.

From there, you want to specify NO MARGIN on the body. Since IE7 defaults with body margin and FireFox doesn't, this will solve your issue.

- Steve

**audraoc** · 04-30-2009, 11:23 PM

Steve, thanks for the reply, I did try your suggestion - removing margin in body - that distorted layout in both browsers...

Is there anything else I could try?
P.S. dot before body was a typo in the post

**stevej** · 12:04 AM

Unusual. In FireBug it worked like a treat... get rid of the other margin declaration, since you're not centering the body (just what's inside it), and then try it.

EDIT: I just looked at your site in IE7, and everything seems to be working now.

- Steve

**audraoc** · 05-01-2009, 06:47 AM

I fixed The layout problem (hopefully) by relocating image divs. When you mentioned centering body, it peeked my interest - how can I do that?

**stevej** · 05-01-2009, 11:37 AM

As far as I know, using the following css, you can't actually center the body.

Code:

margin: 0 auto;

Try removing that code in the body and see what happens.

- Steve

**LadynRed** · 05-01-2009, 11:39 AM

You don't want to center the body, if you want the site centered, you apply the margin: 0 auto; to the "wrapper" div that holds the site content - in your case that would be "contentLayout".

I did notice, though, that contentLayout is NOT 'containing' what's inside it because you have not CLEARED your floats - see our stickies for more info on that. The easy fix is to add overflow: auto to .contentLayout.

**audraoc** · 05-01-2009, 07:59 PM

Just want to tank you, guys for your help - it pushed me in the right direction!