...

View Full Version : Footer background image works in FF and Safari but overlaps design in IE...



frogg03
05-05-2009, 09:10 PM
Hi,

I'm building a portfolio website and am still pretty new at websites. I added a footer for the first time and put a background image on it. My intent is to make the site work no matter what size the browser is. When I finished the design, I found out that IE doesn't seem to like background images on the footer. Is there any way to make it work or is it a lost cause?

Let me know if you need any of the files.

Thanks,
Mark

Link:
http://www.markthibault.com/test/index.html



<html>
<head>
<title>Mark Thibault: Animation and Design</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<link rel="stylesheet" href="/Scripts/_common/css/main.css" type="text/css" media="all">

<link href="Scripts/multibox.css" rel="stylesheet" type="text/css" />
<!--[if lte IE 6]><link rel="stylesheet" href="ie6.css" type="text/css" media="all" /><![endif]-->

<script type="text/javascript" src="Scripts/_common/js/mootools.js"></script>
<script type="text/javascript" src="Scripts/overlay.js"></script>
<script type="text/javascript" src="Scripts/multibox.js"></script>
<style type="text/css">
html, body
{
height: 100%;
margin: 0;
padding: 0;
background:none;
text-align:center;

}
div#container
{
height: auto !important;
height: 100%;
min-height: 100%;
}
* html #container {
height: 100%;
}

h1
{
margin: 0 0 0px 0;
padding: 0px;
color: #083709;
}
h2
{
margin: -4px 0px;
padding: 0 0px;
border-bottom: 0px solid #ccc;
}
p
{
margin: 0;
padding: 0px 0px;
}
p#footer
{
margin: -612px 0 0 0;
height: 611px;
padding: 9px;
background-image:url(images/backgroundgradient.jpg);
background-position:center;
background-repeat:no-repeat;
text-align: center;
}
* html #footer
{top::0}
</style>

</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" style="overflow:hidden" link="#CCCCCC">

<div id="container">

<!-- ImageReady Slices (structure final6.psd) -->
<table id="Table_01" width="740" height="224" border="0" cellpadding="0" cellspacing="0" align="center" >
<tr>
<td colspan="13">
</td>
<td>
<img src="images/MarkThibault2_02.png" width="37" height="82" alt=""></td>
<td>
</td>
</tr>
<tr>
<td colspan="5" rowspan="2">
</td>
<td colspan="8">
<img src="images/MarkThibault2_05.png" width="337" height="46" alt=""></td>
<td>
<img src="images/MarkThibault2_06.png" width="37" height="46" alt=""></td>
<td>
<img src="images/MarkThibault2_07.png" width="127" height="46" alt=""></td>
</tr>
<tr>
<td colspan="8">
<img src="images/MarkThibault2_08.png" width="337" height="62" alt=""></td>
<td rowspan="3">
<img src="images/MarkThibault2_09.png" width="37" height="95" alt=""></td>
<td rowspan="3">
</td>
</tr>
<tr>
<td rowspan="2">
<img src="images/MarkThibault2_11.png" width="34" height="33" alt=""></td>
<td>
<img src="images/MarkThibault2_12.png" width="70" height="22" alt=""></td>
<td>
<img src="images/MarkThibault2_13.png" width="19" height="22" alt=""></td>
<td>
<img src="images/MarkThibault2_14.png" width="109" height="22" alt=""></td>
<td colspan="2">
<img src="images/MarkThibault2_15.png" width="18" height="22" alt=""></td>
<td>
<img src="images/MarkThibault2_16.png" width="77" height="22" alt=""></td>
<td>
<img src="images/MarkThibault2_17.png" width="20" height="22" alt=""></td>
<td>
<img src="images/MarkThibault2_18.png" width="46" height="22" alt=""></td>
<td>
<img src="images/MarkThibault2_19.png" width="20" height="22" alt=""></td>
<td>
<img src="images/MarkThibault2_20.png" width="83" height="22" alt=""></td>
<td>
<img src="images/MarkThibault2_21.png" width="19" height="22" alt=""></td>
<td>
<img src="images/MarkThibault2_22.png" width="61" height="22" alt=""></td>
</tr>
<tr>
<td colspan="12">
<img src="images/MarkThibault2_23.png" width="542" height="11" alt=""></td>
</tr>
<tr>
<td>
<img src="images/spacer.gif" width="34" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="70" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="19" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="109" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="7" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="11" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="77" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="20" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="46" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="20" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="83" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="19" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="61" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="37" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="127" height="1" alt=""></td>
</tr>
</table>
</h1>
<!--<h2>

<table id="Table_02" width="741" height="103" border="0" cellpadding="0" cellspacing="0" align="center">
<tr>
<td rowspan="7">
<img src="images/content_01.png" width="34" height="103" alt=""></td>
<td colspan="13">
<img src="images/content_02.png" width="374" height="7" alt=""></td>
<td rowspan="7">
<img src="images/content_03.png" width="168" height="103" alt=""></td>
<td rowspan="2">
<img src="images/content_04.png" width="37" height="16" alt=""></td>
<td rowspan="7">
<img src="images/content_05.png" width="127" height="103" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="7" alt=""></td>
</tr>
<tr>
<td rowspan="2">
<img src="images/content_06.png" width="12" height="51" alt=""></td>
<td rowspan="2">
<img src="images/content_07.png" width="51" height="51" alt=""></td>
<td rowspan="2">
<img src="images/content_08.png" width="11" height="51" alt=""></td>
<td rowspan="2">
<img src="images/content_09.png" width="51" height="51" alt=""></td>
<td rowspan="2">
<img src="images/content_10.png" width="11" height="51" alt=""></td>
<td rowspan="2">
<img src="images/content_11.png" width="50" height="51" alt=""></td>
<td rowspan="2">
<img src="images/content_12.png" width="10" height="51" alt=""></td>
<td rowspan="2">
<img src="images/content_13.png" width="51" height="51" alt=""></td>
<td rowspan="2">
<img src="images/content_14.png" width="11" height="51" alt=""></td>
<td rowspan="2">
<img src="images/content_15.png" width="50" height="51" alt=""></td>
<td rowspan="2">
<img src="images/content_16.png" width="11" height="51" alt=""></td>
<td rowspan="2">
<img src="images/content_17.png" width="50" height="51" alt=""></td>
<td rowspan="2">
<img src="images/content_18.png" width="5" height="51" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="9" alt=""></td>
</tr>
<tr>
<td rowspan="5">
<img src="images/content_19.png" width="37" height="87" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="42" alt=""></td>
</tr>
<tr>
<td colspan="13">
<img src="images/content_20.png" width="374" height="4" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="4" alt=""></td>
</tr>
<tr>
<td colspan="6">
<img src="images/content_21.png" width="186" height="16" alt=""></td>
<td colspan="7">
<img src="images/content_22.png" width="188" height="16" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="16" alt=""></td>
</tr>
<tr>
<td colspan="13">
<img src="images/content_23.png" width="374" height="14" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="14" alt=""></td>
</tr>
<tr>
<td colspan="13">
<img src="images/content_24.png" width="374" height="11" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="11" alt=""></td>
</tr>
</table>

</h2>!-->
<p> </p>
</div></div>
<!-- End ImageReady Slices -->
<p id="footer" style="color:#CCCCCC">
<br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br>Contact:<br>(503) 278-0749 |
<a href="mailto:mthibault03@gmail.com" style="text-decoration:none">mthibault03@gmail.com</a>
</p>
<script type="text/javascript">
var box = {};
window.addEvent('domready', function(){
box = new MultiBox('mb', {descClassName: 'multiBoxDesc', useOverlay: true});
});
</script>
</body>
</html>

_Aerospace_Eng_
05-05-2009, 09:13 PM
You need to have a full complete doctype. Add this to the top of your code.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

frogg03
05-05-2009, 09:23 PM
Wow.. How simple. Thanks.

But now I have spacing issues, which I'm guessing is because I'm using a table?

I reuploaded the site to show you what I mean.

_Aerospace_Eng_
05-05-2009, 09:35 PM
Yep. You should read the link in my sig titled "Why Tables for Layout is Stupid?". If you don't care then read this: http://somethingstrange.com/2009/03/images-tables-and-mysterious-gaps/

frogg03
05-05-2009, 09:46 PM
Ya, I had just read "Why Tables for Layout is Stupid?"... that link worked though with the "line-height:0" in the container.

Thanks so much for the help.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum