Background Image repeat issues in Opera and Safari

Background Image alignment

[Noah_Rabie]

body
{
background-image: url(images/bg.png);
color: #0066DD;
font: 10pt arial, helvetica, sans-serif;
height: 100%;
margin: 0px 0px 10px 0px;
padding: 0px;

}
#mainheader
{
background:url(images/header.png) no-repeat;
width:800px;
height:140px;
margin-top:5px;
}
.text
{
font-family:Arial, Helvetica, sans-serif;
font-size:10px;
color:#000000;
}
.textalb
{
font-family:Arial, Helvetica, sans-serif;
font-size:10px;
color:#EEEEEE;
}
#mainbody22
{
background:url(images/mainbod2.png);
background-repeat: repeat-y;
width:800px;
vertical-align: middle;

}
#mainbodo
{
background:url(images/mainbod1.png) no-repeat;
width:800px;
vertical-align: middle;

}
#fott66
{
background:url(images/footer.png) no-repeat;
position: relative;
width:800px;
height:30px;
}

The above CSS code works correctly in Firefox and IE7. Safari and Opera on the other hand cause
background:url(images/mainbod2.png);
To overflow past
background:url(images/footer.png) no-repeat;
all the way to the bottom of my copyright disclaimer.

In Header.html mainbody images are called as follows

<TABLE id="mainbody22" cellSpacing="0" cellPadding=0 width=800 border=0>
<TR>
<TD align="center">
<TABLE id="mainbodo" cellPadding="0" cellSpacing="1" border="0" width="90%">

<TBODY>

In footer.html footer image is called as shown below.

</TD></TR>
<TR> <TD height=20>
</TD>
</TR>
</TABLE>

<div id="fott66" style="position:relative;">

<div class="collmenu" style="text-align:right; padding-right:15px; position:relative; margin-left:80 left:0px; top:5px; width:195px"><A href="#"><B>{L_MReport}</B></A></div>

<div class="collmenu" style="text-align:center; position:relative; left:0px; top:5px; width:115px"><A href="#"><B>{L_MFAQ}</B></A></div>

<div class="collmenu" style="text-align:center; position:relative; left:0px; top:5px; width:115px"><A href="#"><B>Link Us</B></A></div>

<div class="collmenu" style="text-align:center; position:relative; left:0px; top:5px; width:115px"><A href="#"><B>Syndicate</B></A></div>

<div class="collmenu" id="addBookmarkContainer" style="text-align:center; position:relative; left:0px; top:5px; width:173px"> </div>

<noscript>
<div class="collmenu" style="text-align:center; position:relative; left:0px; top:5px; width:173px"><a href="#"><B>del.icio.us</B></a></div>
</noscript>

</div>

<DIV class=footer style="PADDING-LEFT: 13px; text-align:center">

<B>Copyright</B> &copy; 2007 <a href="#"><B>{SITENAME}</B></a> All Rights Reserved. &nbsp;&nbsp;<br>
<a href="#">{L_custom1}</a>¦<a href="#">{L_MTOS}</a><br>
<span><a href="#" target="_blank">Dedicated Web Servers</a> By ###</span>
<!-- BEGIN flag_icon
<A href="#"><IMG height=14 alt={flag_icon.code} src="{SKIN_DIR}/flags/{flag_icon.code}.gif" width=21 border=0></A>
END flag_icon -->
<BR>

</DIV>

<!-- crontab runner -->
<!-- IF inline_crontab -->
<img src='{baseWeb}/cronjob.php' width=0 height=0 alt="">
<!-- ENDIF -->
<!-- crontab runner -->

</TD>

</TR></TBODY></TABLE>

<script src="http://www.example.com/urchin.js" type="text/javascript"></script>
<script type="text/javascript">
_uacct = "###";
urchinTracker();
</script>

</BODY></HTML>

[edited by: Noah_Rabie at 3:20 am (utc) on July 24, 2007]

[edited by: SuzyUK at 8:48 am (utc) on July 24, 2007]
[edit reason] examplified [/edit]

[SuzyUK]

Hi Noah_Rabie and Welcome to WebmasterWorld!

first I suggest you add a valid (full) Doctype [webmasterworld.com], if you haven't already as the look of this code is very different with and without one.

Secondly as far as the code goes I would be expecting it to show the mainbod2.png all the way to the bottom of the text because your footer and copyright are nested inside the table which holds it..

#mainbody22
{
background:url(images/mainbod2.png);
background-repeat: repeat-y;

then you've got a height restriction on fott66 of 30px
#fott66
{
...
height:30px;
...

so as far as I can tell the fott66 contents are overflowing and stretching the #mainbody22 table allowing its background to show below the fott66 div and under the copyright statement..

anyway that's just reading the code, I can't understand why it would be OK in FF, It's possibly only looking "OK" in IE because it's in quirks mode and stretching the footer div, however you haven't put in the CSS for the .footer div the one with the copyright in it so I can't really tell how it's meant to look

Suzy