Gradient not working
Permalink
The gradient I have setup is not working in IE. It works in both Firefox and Chrome/Safari. Any ideas?
Link to site:
http://test.simleyfootball.com/...
Here is my code.
template code:
<?php defined('C5_EXECUTE') or die("Access Denied.")?>
<!DOCTYPE html>
<head>
<?php Loader::element('header_required'); ?>
<link href="<?php echo $this->getThemePath()?>/style/style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<?php Loader::element('footer_required'); ?>
<center>
<div id="wrapper">
<div id="pre-header">
pre-header
</div>
<div id="head-wrapper" class="gradient">
<div id="head"></div>
<?php defined('C5_EXECUTE') or die("Access Denied.")?>
<!DOCTYPE html>
<head>
<?php Loader::element('header_required'); ?>
<link href="<?php echo $this->getThemePath()?>/style/style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<?php Loader::element('footer_required'); ?>
<center>
<div id="wrapper">
<div id="pre-header">
pre-header
</div>
<div id="head-wrapper" class="gradient">
<div id="head"></div>
</div>
<div id="nav">
<?php
$a = new GlobalArea('Nav');
$a->display();
?>
</div>
<div id="content">
<?php
$a = new Area('Content');
$a->display($c);
?>
</div>
<div id="bottom" class="gradient">
<?php
$a = new GlobalArea('Sponsors');
$a->display();
?>
</div>
<div id="footer">
<?php
$a = new GlobalArea('Footer');
$a->display();
?>
</div>
</div>
</center>
</body>
</html>
css code:
body {
background-image:url(../images/noisy_net.png);
}
#wrapper {
background-image: url(../images/natural_paper.png);
width: 1024px;
margin-top: 0;
}
#pre-header {
display: none;
clear: left;
background-color: #F02B2B;
width:1024px;
height:20px;
}
body {
background-image:url(../images/noisy_net.png);
}
#wrapper {
background-image: url(../images/natural_paper.png);
width: 1024px;
margin-top: 0;
}
#pre-header {
display: none;
clear: left;
background-color: #F02B2B;
width:1024px;
height:20px;
}
#head-wrapper {
clear: left;
border: 1px solid transparent;
border-color: #083f5e;
}
#head {
width:1023px;
height:180px;
background: url(../images/logo.png) no-repeat center center;
}
#nav {
clear: left;
background-repeat:none;
width:1023px;
height:42px;
/* For WebKit (Safari, Google Chrome etc) */
background: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#c5c5c5));
/* For Mozilla/Gecko (Firefox etc) */
background: -moz-linear-gradient(top, #ffffff, #c5c5c5);
/* For Internet Explorer 5.5 - 7 */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#ffffff, endColorstr=#c5c5c5);
/* For Internet Explorer 8 */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#, endColorstr=#c5c5c5)";
}
#content {
clear: left;
background: url(../images/school_logo.png) no-repeat center center;
text-align: left;
height: auto;
min-height:700px;
width: 1022px;
}
#content p {
font-size: 14;
}
#content span {
font-weight: bold;
font-size: 20px;
}
#bottom {
clear: left;
width:1023px;
min-height:300px;
border: 1px solid transparent;
border-color: #083f5e;
}
#footer{
display:none;
clear:left;
background-color: #F02B2B;
width:1024px;
min-height:20px;
height:auto;
}
.gradient {
/* For WebKit (Safari, Google Chrome etc) */
background: -webkit-gradient(linear, left top, left bottom, from(#057dc9), to(#00507d));
/* For Mozilla/Gecko (Firefox etc) */
background: -moz-linear-gradient(top, #057dc9, #00507d);
/* For Internet Explorer 5.5 - 7 */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#057dc9, endColorstr=#00507d);
/* For Internet Explorer 8 */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#057dc9, endColorstr=#00507d)";
}
#nav{background:#c5c5c5;background:-moz-linear-gradient(#fff 0%, #c5c5c5 100%);background:-webkit-linear-gradient(#fff 0%, #c5c5c5 100%);background:-o-linear-gradient(#fff 0%, #c5c5c5 100%);background:linear-gradient(#fff 0%, #c5c5c5 100%)}
Change % to alter effect.
I don't use 'filter' for IE anymore. If you can get access to your .htaccess file, paste code below to help IE behave:
Or put this in header.php
Only issue is grads won't work with IE9, might want to call a small image?
Hope that helps.
Steev
Gotta go now, some fat bloke with a big white hairy beard has turned up and is drinking my brandy!!