Dan Davis
02-05-2010, 06:34 PM
I am stretching a background image and then floating the page content over it using a fairly standard CSS solution; a solution that I have seen working on several tutorial websites like this one: http://www.htmlite.com/faq022.php.
This problem is pervasive throughout the site but I will provide a representative page which exhibits the problem: disclaimer.html (http://davisironworks.ddcsltd.net/main/disclaimer.html)
If you view the page in FireFox it displays as desired; If you look at it using ANY version of IE it appears retarded. I had considered the size of the background image (http://davisironworks.ddcsltd.net/logo/backgroundML3.jpg) to be an issue and so resized it to a much smaller image (http://davisironworks.ddcsltd.net/logo/backgroundML4.jpg) but this made no difference; it STILL works fine in FireFox and not in IE.
I am completely at a loss here and any help would be appreciated. Partial source code for the page is here (the entire code is too big for the post) with the pertinent <head> and <body> implementations:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>
Disclaimer, Liability and Frequently Asked Questions
</title>
<meta name="keywords" content="gift, custom, knives, sword, dagger, rapier, battle axe, spear, halberd, katana, wakazashi, tanto, tsuba, fuchi, kashira, menuki, seppa, armor">
<meta name="description" content=
"Dan Davis Custom Metalwork produces and makes available the best custom knives, armor and weapons. We also carry limited edition products of our own design and antiques we have acquired.">
<meta name="author" content="Dan Davis">
<link rev="made" href="davisknives@gmail.com">
<meta name="copyright" content="2009 Dan Davis Custom Metalwork; All rights reserved">
<meta name="revisit-after" content="30 days">
<meta name="distribution" content="Global">
<meta name="robots" content="Follow">
<meta name="rating" content="General">
<meta content="TEXT/HTML; CHARSET=ISO-8859-1">
<meta content="En">
<meta content="no-cache"><!--Dan Davis Custom Metalwork Disclaimer Page-->
<!--Dan Davis Custom Metalwork produces and makes available the best custom knives, armor and weapons. We also carry limited edition products of our own design and antiques we have acquired. -->
<link rel="stylesheet" href="../css/image_style.css" type="text/css">
<!--[if IE 6]>
<style>
html { overflow-y: hidden; }
body { overflow-y: auto; }
#bg { position:absolute; z-index:-1; }
#content { position: static; }
</style>
<![endif]-->
</head>
<body>
<div id="bg">
<img src="../logo/backgroundML3.jpg" width="100%" height="100%">
</div>
<div id="content"> <!--OPEN of the primary "div" that allows for the background to be "stretched" -->
<a href="../index.html"><img class="norm" src="../logo/home.png" alt="Home" onmouseover=
"this.style.opacity=1;this.filters.alpha.opacity=100" onmouseout="this.style.opacity=0.8;this.filters.alpha.opacity=80"></a><br>
<a href="../index.html"><font color="white" face="Arial" size="-2">HOME</font></a>
<h1 align="center">
<font color="white" face="Arial"><u>Disclaimer and Denial of
...SNIP (the page is too big to fit it all in the post) ........
</li>
</ol>
</dd>
</dl>
</td>
</tr>
</table>
</div> <!--CLOSE of the primary "div" that allows for the background to be "stretched" -->
</body>
</html>
The code for the stylesheet is
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#bg {
position:fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
#content {
position: relative;
z-index: 1;
}
p.margin {
margin-left: 4cm;
}
a {
text-decoration: none;
border: none;
}
a:link {
text-decoration: none;
border: none;
}
a:visited {
text-decoration: none;
border: none;
}
a:active {
text-decoration: none;
border: none;
}
a:hover {
text-decoration: none;
border: none;
}
img.back
{
position: absolute;
display: block;
margin-left: auto;
margin-right: auto;
z-index: -1;
vertical-align: bottom;
opacity: 0.4;
filter: alpha(opacity=40);
}
img.norm
{
opacity: 0.6;
filter: alpha(opacity=60);
border: none;
}
table
{
background-color: transparent;
}
This problem is pervasive throughout the site but I will provide a representative page which exhibits the problem: disclaimer.html (http://davisironworks.ddcsltd.net/main/disclaimer.html)
If you view the page in FireFox it displays as desired; If you look at it using ANY version of IE it appears retarded. I had considered the size of the background image (http://davisironworks.ddcsltd.net/logo/backgroundML3.jpg) to be an issue and so resized it to a much smaller image (http://davisironworks.ddcsltd.net/logo/backgroundML4.jpg) but this made no difference; it STILL works fine in FireFox and not in IE.
I am completely at a loss here and any help would be appreciated. Partial source code for the page is here (the entire code is too big for the post) with the pertinent <head> and <body> implementations:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>
Disclaimer, Liability and Frequently Asked Questions
</title>
<meta name="keywords" content="gift, custom, knives, sword, dagger, rapier, battle axe, spear, halberd, katana, wakazashi, tanto, tsuba, fuchi, kashira, menuki, seppa, armor">
<meta name="description" content=
"Dan Davis Custom Metalwork produces and makes available the best custom knives, armor and weapons. We also carry limited edition products of our own design and antiques we have acquired.">
<meta name="author" content="Dan Davis">
<link rev="made" href="davisknives@gmail.com">
<meta name="copyright" content="2009 Dan Davis Custom Metalwork; All rights reserved">
<meta name="revisit-after" content="30 days">
<meta name="distribution" content="Global">
<meta name="robots" content="Follow">
<meta name="rating" content="General">
<meta content="TEXT/HTML; CHARSET=ISO-8859-1">
<meta content="En">
<meta content="no-cache"><!--Dan Davis Custom Metalwork Disclaimer Page-->
<!--Dan Davis Custom Metalwork produces and makes available the best custom knives, armor and weapons. We also carry limited edition products of our own design and antiques we have acquired. -->
<link rel="stylesheet" href="../css/image_style.css" type="text/css">
<!--[if IE 6]>
<style>
html { overflow-y: hidden; }
body { overflow-y: auto; }
#bg { position:absolute; z-index:-1; }
#content { position: static; }
</style>
<![endif]-->
</head>
<body>
<div id="bg">
<img src="../logo/backgroundML3.jpg" width="100%" height="100%">
</div>
<div id="content"> <!--OPEN of the primary "div" that allows for the background to be "stretched" -->
<a href="../index.html"><img class="norm" src="../logo/home.png" alt="Home" onmouseover=
"this.style.opacity=1;this.filters.alpha.opacity=100" onmouseout="this.style.opacity=0.8;this.filters.alpha.opacity=80"></a><br>
<a href="../index.html"><font color="white" face="Arial" size="-2">HOME</font></a>
<h1 align="center">
<font color="white" face="Arial"><u>Disclaimer and Denial of
...SNIP (the page is too big to fit it all in the post) ........
</li>
</ol>
</dd>
</dl>
</td>
</tr>
</table>
</div> <!--CLOSE of the primary "div" that allows for the background to be "stretched" -->
</body>
</html>
The code for the stylesheet is
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#bg {
position:fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
#content {
position: relative;
z-index: 1;
}
p.margin {
margin-left: 4cm;
}
a {
text-decoration: none;
border: none;
}
a:link {
text-decoration: none;
border: none;
}
a:visited {
text-decoration: none;
border: none;
}
a:active {
text-decoration: none;
border: none;
}
a:hover {
text-decoration: none;
border: none;
}
img.back
{
position: absolute;
display: block;
margin-left: auto;
margin-right: auto;
z-index: -1;
vertical-align: bottom;
opacity: 0.4;
filter: alpha(opacity=40);
}
img.norm
{
opacity: 0.6;
filter: alpha(opacity=60);
border: none;
}
table
{
background-color: transparent;
}