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.
12-14-2009, 04:44 PM
add float:left in both divs
12-14-2009, 04:51 PM
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 -
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).
12-14-2009, 05:19 PM
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.
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.
12-14-2009, 05:36 PM
Instead of floating a fullwidth #menubar, try this
The red background is just for testing so you can see what that div is doing.
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.