Reply
Pleading for help with image positioning
Old 04-30-2009, 08:52 PM Pleading for help with image positioning
audraoc's Avatar
Skilled Talker

Posts: 58
Location: chicago
Trades: 0
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 !
__________________
Templates for Joomla CMS
www.tarawebdesigns.com

Last edited by audraoc; 04-30-2009 at 11:24 PM..
audraoc is offline
Reply With Quote
View Public Profile Visit audraoc's homepage!
 
 
When You Register, These Ads Go Away!
Old 04-30-2009, 10:37 PM Re: Pleading for help with image positioning
stevej's Avatar
Professional Multitasker

Posts: 993
Location: In a flying house
Trades: 0
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
__________________
if($stevej == "helpful") { $talkupation += $user_power; }
stevej is offline
Reply With Quote
View Public Profile
 
Old 04-30-2009, 11:23 PM Re: Pleading for help with image positioning
audraoc's Avatar
Skilled Talker

Posts: 58
Location: chicago
Trades: 0
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
__________________
Templates for Joomla CMS
www.tarawebdesigns.com
audraoc is offline
Reply With Quote
View Public Profile Visit audraoc's homepage!
 
Old 05-01-2009, 12:01 AM Re: Pleading for help with image positioning
stevej's Avatar
Professional Multitasker

Posts: 993
Location: In a flying house
Trades: 0
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
__________________
if($stevej == "helpful") { $talkupation += $user_power; }

Last edited by stevej; 05-01-2009 at 12:04 AM..
stevej is offline
Reply With Quote
View Public Profile
 
Old 05-01-2009, 06:47 AM Re: Pleading for help with image positioning
audraoc's Avatar
Skilled Talker

Posts: 58
Location: chicago
Trades: 0
I fixed The layout problem (hopefully) by relocating image divs. When you mentioned centering body, it peeked my interest - how can I do that?
__________________
Templates for Joomla CMS
www.tarawebdesigns.com
audraoc is offline
Reply With Quote
View Public Profile Visit audraoc's homepage!
 
Old 05-01-2009, 11:37 AM Re: Pleading for help with image positioning
stevej's Avatar
Professional Multitasker

Posts: 993
Location: In a flying house
Trades: 0
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
__________________
if($stevej == "helpful") { $talkupation += $user_power; }
stevej is offline
Reply With Quote
View Public Profile
 
Old 05-01-2009, 11:39 AM Re: Pleading for help with image positioning
LadynRed's Avatar
Super Moderator

Posts: 9,036
Location: Tennessee
Trades: 0
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.
__________________
Web Goddess & Web Standards Evangelist :) - Tables Be Gone !!
"Using or working with IE is like having to wear a 1970's polyester suit with pantyhose and a girdle, to work everyday"
Carolina Corvette Club
LadynRed is offline
Reply With Quote
View Public Profile
 
Old 05-01-2009, 07:59 PM Re: Pleading for help with image positioning
audraoc's Avatar
Skilled Talker

Posts: 58
Location: chicago
Trades: 0
Just want to tank you, guys for your help - it pushed me in the right direction!
__________________
Templates for Joomla CMS
www.tarawebdesigns.com
audraoc is offline
Reply With Quote
View Public Profile Visit audraoc's homepage!
 
Reply     « Reply to Pleading for help with image positioning
 

Thread Tools Search this Thread
Search this Thread:

Advanced Search

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are Off
Pingbacks are Off
Refbacks are Off





   
RSS Feed  Feeds: RSS   JS   XML
RSS Feed  Feeds for this forum: RSS   JS   XML

 


Page generated in 0.10393 seconds with 13 queries