Background image overlaping footer image at bottom of div

lw_d · March 18th, 2006, 11:55 AM

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 right_footer class 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 (right class), 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.

lw_d · March 18th, 2006, 02:51 PM

Been trying to get this working all day, still no joy. Here is a screenshot to help people visualise, I will try and upload the to a remote server if it will help, I am working locally at the moment.

The first is the image is from Firefox on the mac, displayed how I would like, the second in IE on the PC.

Thanks.

jimz · March 20th, 2006, 07:08 PM

Quote:

Originally Posted by lw_d

I will try and upload the to a remote server if it will help

If you attach the necessary files I'll have a look...

lw_d · March 20th, 2006, 07:10 PM

I actuallly got it working by adding the following:

* {margin:0;padding:0}

I should have set my margings to zero from the off.

Thanks for your offer to help though.

herkalees · March 20th, 2006, 08:27 PM

Quote:

Originally Posted by lw_d

I actuallly got it working by adding the following:

* {margin:0;padding:0}

I should have set my margings to zero from the off.

Thanks for your offer to help though.

You sure that didn't screw up other things though? Because the asterisk "hack" will make EVERYTHING lose padding and margin, including things that have it by default (such as <p> elements).

I use the following CSS on every site; it declares the asterisk "hack", but then redefines all other property:values as I want them...

Code:

/*====================
Global Styles
======================*/
* {
margin: 0;
padding: 0;
}
body, html {
color: #444;
}
body {
font: 85% Trebuchet MS,Verdana,Arial,sans-serif;
line-height: 1.6em;
background: #fff;
}
/*====================
Link Styles
======================*/
a:link {
color: #00c;
}
a:visited {
color: #90c;
}
a:focus {
color: #06c;
}
a:hover {
color: #9c3;
}
a:active {
color: #f90;
}
/*====================
Heading Styles
======================*/
h1,h2,h3,h4,h5,h6 {
color: #000;
font-family: Verdana,Arial,Helvetica,sans-serif;
}
h1 {
font-size: 1.8em;
margin: 0 0 .9em;
}
h2 {
font-size: 1.6em;
margin: 0 0 .8em;
}
h3 {
font-size: 1.4em;
margin: 0 0 0.7em;
}
h4 {
font-size: 1.2em;
margin: 0 0 .6em;
}
h5 {
font-size: 1em;
margin: 0 0 .5em;
}
/*====================
Image Styles
======================*/
img {
border: 0;
margin: 0;
padding: 0;
}
/*====================
List Styles
======================*/
dl, ol, ul {
margin: 0 0 1em;
}
dt {
font-weight: bold;
}
dd {
margin: 0 0 0 3em;
}
ul {
padding:0 0 0 3em;
}
ol {
padding: 0 0 0 3em;
}
li {
margin: 0 0 0 .5em;
}
/*====================
Quote Styles
======================*/
blockquote {
margin: 1em 0;
padding-left: 20px;
}
/*====================
General Styles
======================*/
code, kbd, pre {
font-family: Courier, "Courier New", Tahoma;
}
ins, del {
font-style: italic;
}
del {
text-decoration: line-through;
}
p {
margin: 1em 0;
}
abbr, acronym, dfn {
cursor: help;
}
fieldset {
border: 0;
margin: 0;
padding: 0;
}
label {
display: block;
}
/*====================
Common Layout Styles
======================*/