Hi all. I've been trying to think of a way to make a nice fluid layout.
My page consists of three content areas that are inline. Behind them is
a background image (www.i4cevents.com). When the browser is resized,
the content areas should move and the background image should shrink or
enlarge. So far, this works quite nicely in ff and opera, but the
background image is not displaying correctly in safari. Any idea why?
The relevant html is:
<body>
<div id="background">
<div class="header"><img src="images/i4cLogo.jpg" alt="i4c Events
Logo" /></div>
<!--class sets the bg image with two drop shadows-->
<div class="bgImage">
<div class="topDropShadow"></div>
<div class="bottomDropShadow"></div>
</div>
</div>
...
and the css is for the background and bg Image is:
body{
position:absolute;
margin:0;
padding:0;
height:90%;
width:99%;
font: 62.5% verdana, sans-serif;
max-width:990px;
max-height:600px;
min-height:450px;
border:2px solid #afafaf;
border-bottom:none;
}
#background{
position:relative;
top:0;
height:100%;
width:100%;
z-index:1;
}
.header{
position:relative;
height:60px;
width:100%;
}
.bgImage{
position:relative;
top:0;
background:url('../images/indexRally.jpg') top left no-repeat fixed;
height:65%;
width:100%;
}
I think it might be to do with the fact that the body is absolutely
positioned. Can anyone confirm this and suggest an improvement? Thanks
a lot.
______________________________________________________________________
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
