...

View Full Version : Banner in ie 7 not in same place



sackstein
12-14-2009, 04:34 PM
I am having a problem with this banner: site link (http://www.colorectal-cancer.ca/psa/main.php)

in internet explorer 7 only the banner is pushed right to the top meaning it gets covered by the top left logo.

The weird thing is that this is how I expected it to act in all browsers however there is a good space between the logo and the banner in all other browsers.

I want it to have the space though. So any ideas on what is causing this to happen only in ie7 would be helpful. Thanks.

vineet
12-14-2009, 04:44 PM
add float:left in both divs



#menubar {
background:url(images/menubar_bg.png) repeat-x;
height:40px;
width:100%;
float:left;
}

.textcontent {
text-align:left;
color:#000;
padding-left:25px;
padding-right:25px;
float:left;
}

Excavator
12-14-2009, 04:51 PM
Hello sackstein,
I'm not sure floating a full width div is the right approach. We float things to put other things beside them and if it's full width ...

Try adding some padding in that container div, like this -

.textcontent {
text-align:left;
color:#000;
padding: 100px 25px 0;
}

You have another problem there.
Your #content is 950px wide.
50px of padding makes .textcontent only 900px wide.
Your banner_psa.png is 913px wide.
Have a look at how the box model works (http://www.w3.org/TR/CSS2/box.html).

..

sackstein
12-14-2009, 05:19 PM
Thanks,

Adding float left to the #menubar seemed to do the trick along with adding a top padding to just the image. seems to work in all browsers.

Excavator
12-14-2009, 05:33 PM
It should probably be margin on the image itself. I didn't do that because I hate inline styles so showed you padding on the containing div instead.

Did you look at the other issues I mentioned?

You have some errors found by the validator (http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fwww.colorectal-cancer.ca%2Fpsa%2Fmain.php)to fix as well.

Excavator
12-14-2009, 05:36 PM
Instead of floating a fullwidth #menubar, try this

#menubar {
background:url(images/menubar_bg.png) repeat-x;
width:100%;
background: #f00;
}
The red background is just for testing so you can see what that div is doing.

sackstein
12-14-2009, 06:24 PM
I don't have time right now to test this out since it appears to be working (even though I don't understand it fully right now)...

I will fix this fully later tonight using your advice. Thank you so much.

Rob



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum