PDA

View Full Version : A little cross browser CSS hack help if possible


Hot DesignZ
04-13-2008, 12:06 AM
Hey guys!

So I am trying to do is create a site that has a fixed (no scroll) background image that scales with the browser window, I found a CSS hack that allows this but the image is not fixed in IE (and causes a gap at the bottom), but works fine in FF, Opera, and Safari

here (http://metroinnovations.com/examples/rhinodev/) is what I have so far, if you look at it in Firefox you can see the effect I am trying to get. I am useing all HTML and Inline CSS

Here is my code if that will help



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>index</title>
<meta http-equiv="imagetoolbar" content="false">

<style type="text/css">
<!--
.fsx01 {font-size: 11px;}
.fsx02 {font-size: 12px;}
.fsx03 {font-size: 13px;}
.fsx04 {font-size: 15px;}
.fsx05 {font-size: 16px;}
.fsx06 {font-size: 19px;}
.fsx07 {font-size: 21px;}
.fsx08 {font-size: 24px;}
.fsx09 {font-size: 27px;}
.fsx10 {font-size: 29px;}
.fsx11 {font-size: 32px;}
.fsx12 {font-size: 35px;}
.fsx13 {font-size: 37px;}
.fsx14 {font-size: 48px;}
.fsx15 {font-size: 64px;}
.fsx16 {font-size: 96px;}
.txdec {text-decoration: none;}
#Oobj6 {position:absolute;z-index:9;visibility:visible;left:10px;top:71px;widt h:176px;height:206px;}
#Oobj7 {position:absolute;z-index:9;visibility:visible;left:2px;top:2px;width: 192px;height:56px;}
#Oobj9 {position:absolute;z-index:9;visibility:visible;left:226px;top:70px;wid th:696px;height:53px;}
#Oobj35 {position:absolute;z-index:9;visibility:visible;left:226px;top:123px;wi dth:370px;height:188px;}
#Oobj15 {position:absolute;z-index:9;visibility:visible;left:921px;top:68px;wid th:13px;height:243px;}
#Oobj16 {position:absolute;z-index:9;visibility:visible;left:15px;top:302px;wid th:168px;height:298px;}
#Oobj17 {position:absolute;z-index:9;visibility:visible;left:214px;top:310px;wi dth:720px;height:246px;}
#Oobj21 {position:absolute;z-index:9;visibility:visible;left:213px;top:66px;wid th:13px;height:245px;}
input,textarea,select {color:#000000;font-family:'Times New Roman';font-size:12px;font-weight:normal;font-style:normal;text-decoration:none;}
.dfltt {font-family:'Times New Roman';font-size:12px;font-weight:normal;font-style:normal;text-decoration:none;text-align:left;color:#000000;}
.dfltc {font-family:'Times New Roman';font-size:12px;font-weight:normal;font-style:normal;text-decoration:none;text-align:left;color:#000000;}
/* begin css hack */
body { background-color: transparent; margin: 0px; padding: 0px; height: 100%; border-top: 1px transparent solid; margin-top: -1px; z-index:0; position:relative; }
img#background { height: 100%; width: 100%; z-index: -1; position:fixed; color: white; }
-->
</style>
</head>
<body id="css hack">
<img id="background" src="image/swosh2.jpg" alt="Background-image" >
<!-- end css hack -->
<body alink="#ff0000" link="#0000ff" vlink="#800080" >
<div id="Oobj18" style="position:absolute;z-index:9;visibility:visible; left:4%;top:-1px;width:91%;height:603px;">
<div id="Oobj6">

<img name="Ggeo7" Align=Top src="./image/login.png" alt="" border="0" width="176" height="206"></div>
<div id="Oobj7">
<img name="Ggeo8" Align=Top src="./image/logo.png" alt="" border="0" width="192" height="56"></div>
<div id="Oobj9">
<img name="Ggeo10" Align=Top src="./image/topbar.png" alt="" border="0" width="696" height="53"></div>
<div id="Oobj35">
<img name="Ggeo37" Align=Top src="./image/pic.jpg" alt="" border="0" width="370" height="188"></div>
<div id="Oobj15">
<img name="Ggeo15" Align=Top src="./image/rightbar.png" alt="" border="0" width="13" height="243"></div>
<div id="Oobj16">
<img name="Ggeo106" Align=Top src="./image/test.png" alt="" border="0" width="168" height="298"></div>
<div id="Oobj17">
<img name="Ggeo17" Align=Top src="./image/mid.png" alt="" border="0" width="720" height="246"></div>
<div id="Oobj21">
<img name="Ggeo108" Align=Top src="./image/leftbar.png" alt="" border="0" width="13" height="245"></div>
</div>
</body>

</html>



If anyone has any ideas, or knows another way do this, It would make me super happy :)

Thanks!
linFox
04-13-2008, 01:46 AM
Being in a bit of a hackish mood, you could add a conditional comment for IE to drop the height a little, which seems to work (although probably isn't too versatile) and then shift it down to remove most of the whitespace.
Under the first style block, add:
<!--[if ie]><style type="text/css">img#background { position: relative; top: +4px; height: 99.4%;}</style><![endif]-->
Hot DesignZ
04-13-2008, 10:12 AM
Nice, thanks for that, it takes care of the white gap. but still does not allow it to be :fixed

Any idea how I could achieve this?

Thanks for your help!