CSS background Image issue between FireFox and IE
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
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 to be an issue and so resized it to a much smaller image 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:
The code for the stylesheet isCode:<!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>Code: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; }
CSS Codes
Reply With Quote
Bookmarks