Gradient not working
Permalink December 24, 2012 at 6:02 PM
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!!