1 reply [Last post]
2sharp
Offline
newbie
Sydney
Last seen: 17 years 46 weeks ago
Sydney
Joined: 2004-03-10
Posts: 1
Points: 0

Hi all,

I have a request to ask for checks on the following site.
http://www.sharperstill.com

One problem that I know about is IE6/Win, which places the grad background-image at the bottom of the main DIV as well as at the bottom of the viewport (where I wanted it)
The css for the background image is:
html, body {
margin: 0;
padding: 0;
background: #ECECE6 url(../graphics/bggrad.jpg) bottom left fixed repeat-x;
color: #333;
}

Hope someone can help as I develop on a mac and it is fine in all gecko browsers, safari etc

Jon

Daybreak_0
Offline
Enthusiast
Sydney, Australia
Last seen: 18 years 11 weeks ago
Sydney, Australia
Timezone: GMT+10
Joined: 2003-11-15
Posts: 389
Points: 0

Need help with IE 6/WIN issue

Jon

1) I would just go for a simpler background. The fact is most clients will use IE, and you want your site to look good for them.

or

Use some hacks to hide the background image from IE and then some more hacks to use an IE's proprietary gradient as per -

Here is my template

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

<html>
<head>

<title>Untitled</title>
<meta name="keywords" content="put keywords here seperated by comma's" />
<meta name="description" content="put a description here" />
<meta name="robots" content="all" />
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<link href="put your stylesheet here.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" language="javascript" src="put your javascript here.js"></script>

<style type="text/css">


.test1{
height: 50px;
background-color: blue;
filter: Alpha(opacity=100, finishopacity=0, style=1, startx=0, starty=100, finishx=0, finishy=0);
margin: 10px 0px;
}

.test2{
height: 50px;
background-color: blue;
filter: Alpha(opacity=100, finishopacity=0, style=1, startx=0, starty=0, finishx=0, finishy=100);
margin: 10px 0px;
}

.test3{
height: 50px;
background-color: blue;
filter: Alpha(opacity=100, finishopacity=0, style=1, startx=100, starty=0, finishx=0, finishy=0);
margin: 10px 0px;
}

.test4{
height: 50px;
background-color: blue;
filter: Alpha(opacity=100, finishopacity=0, style=1, startx=0, starty=0, finishx=100, finishy=0);
margin: 10px 0px;
}

.test5{
height: 500px;
background-color: blue;
filter: Alpha(opacity=100, finishopacity=0, style=1, startx=100, starty=100, finishx=0, finishy=0);
margin: 10px 0px;
}


</style>


</head>
<body>

<div class="test1"></div>
<div class="test2"></div>
<div class="test3"></div>
<div class="test4"></div>
<div class="test5"></div>

</body>
</html>

2) Why not centre your box in the viewport - it would look better.

Regards
Day

The only way to learn is to do it yourself