Footer Image

Background image overlaping footer image at bottom of div

[lw_d]

Newbie here,

I have created a 3 colums CSS based template, both columns collapse if there is no content. Now, there is IE issue with the image that I am trying to place at the bottom of the column.

Here is that portion of the index file:

<?php if (mosCountModules('left') > 0) {?>
<div class="left"><?php mosLoadModules('left', -3);?></div><?php }?>

<?php if (mosCountModules('right') > 0)?>
<div class="right"><?php mosLoadModules('right', -3);?><div class="right_footer"></div></div><?php }?>

The code highlighted in red is what is causing the problem in IE, in FF I have a nice rounded cornered image to the footer of the column, in IE, the image that I am using for the background (green colour code above), seems to extend beyond the footer image I have created.

Here is the CSS from the template, you will notice that I have used the IE hack to position the images better in IE but I can't get the above problem solved:

.right
{
float:right;
padding: 5px 0 0 20px;
background: url(../images/rightbg.gif) repeat-y;
width: 200px;
}
html>body .right
{
/*margin-top: -56px;*/
float:right;
padding: 5px 0 0 20px;
background: url(../images/rightbg.gif) repeat-y;
width: 200px;
}

.right_footer {
float: right;
margin-left: -30px;
width: 220px;
height: 14px;
background: url(../images/rightbg_footer.gif) no-repeat;
}

html>body .right_footer {
float: right;
width: 220px;
height: 14px;
background: url(../images/rightbg_footer.gif) no-repeat;
}

Thanks for any help.

[doodlebee]

Well, forst of all, there's no color coding in your question above, so I can't tell which one is making the issue for you in IE.

It'd also be nice to see more code :)

However, I'm getting that you want rounded corners on your footer. That's fairly easy to accomplish in a variety of ways. One example (starting with HTML):

<div id="wrapper">
<div id="header">
</div>
<div id="sidebar">
</div>
</div id="content">
</div
<hr />
</div> <-- closing #wrapper div
<div id="footer">
<div>

I don't know if your basic structure is like that or not. (I'm just offering up a suggestion, and if not, maybe you'll get some ideas.)

So, the CSS:

#wrapper {
width:760px;
margin:0 auto;
}
#header {
width:760px;
height:200px;
}
#sidebar {
width:200px;
float:left;
}
#content {
width:560px;
float:right;
}
hr {
visibility:hidden;
clear:both;
display:block;
}
#footer {
position:relative;
width:760px;
margin:0 auto;
}

in this case, you can set the background of the footer to have your rounded corners, as the site is fixed width. If your site is 100% width, then you'll have to have a div class left and right (as you do above). The left would be floated left and the right would be floated right, and if there's text in between then you'll have to mess with some margins and padding issues.

For IE - get rid of the hack and use conditional comments. They're much more reliable. Also, IE tends to place a 3 pixel margin around hr tags, so you'll have to strip the 3 pixel margin for IE only to get rid of the "blank space" that will appear between the bottom of the #wrapper and the footer.

HTH!

[lw_d]

I figured it out, I just needed to set all my margins to 0, ie:

* {margin:0;padding:0}

Thanks.