Go Premium for a chance to win a PS4. Enter to Win

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 979
  • Last Modified:

CSS gradient, shadow, and border not working in IE. OK in Firefox and Chrome.

I have a basic landing page for some internal testing.
I have used a gradient background for the text elements, with a drop shadow, some corner rounding etc. The code works fine in Chrome and Firefox. Please refer to the first image below.
In all versions of IE from 6 to 9, the page looks like the second image below.

Chrome and Firefox:
 Chrome and Firefox example
IE:
 Internet Explorer example
My CSS and HTML code is shown below. I can't figure out why the gradient, shadow and border styling won't apply in IE.
Please assist.

HTML:
 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 TRANSITIONAL//EN">
<html>
	<head>
	<title>Launch Page</title>
	<link href="view.css" rel="stylesheet" type="text/css" media="screen" />
    </head>
    <body>
      <div id="warning">
	  <p>Lorem ipsum dolor sit amet, donec libero a wisi vitae sed odio. Mattis consectetuer. Pretium congue neque scelerisque, erat officiis, pellentesque mi etiam. Vulputate fusce nullam egestas, mi nec morbi velit viverra bibendum. Condimentum hymenaeos vitae, urna porttitor neque mi urna, morbi mi ipsum magnis, taciti pretium ut. Sodales ultricies placerat lectus, tempor maecenas elit porttitor ac dolor egestas, ullamcorper id, lacinia ut eget quasi, pulvinar venenatis.</p>
	</div>
	<div id="policy">
<p>Lorem ipsum dolor sit amet, donec libero a wisi vitae sed odio. Mattis consectetuer. Pretium congue neque scelerisque, erat officiis, pellentesque mi etiam. Vulputate fusce nullam egestas, mi nec morbi velit viverra bibendum. Condimentum hymenaeos vitae, urna porttitor neque mi urna, morbi mi ipsum magnis, taciti pretium ut. Sodales ultricies placerat lectus, tempor maecenas elit porttitor ac dolor egestas, ullamcorper id, lacinia ut eget quasi, pulvinar venenatis.</p>
    </div>
    </body>
</html>

Open in new window


CSS:
 
body {
background-image: url('internet.jpg');
background-repeat:no-repeat;
background-attachment:fixed;
background-position:center; 
}

#warning {
margin-top:5em;
margin-right:5em;
width: 25em;
float:right;
 -webkit-border-radius: 12px; /* Saf3-4, iOS 1-3.2, Android <1.6 */
     -moz-border-radius: 12px; /* FF1-3.6 */
          border-radius: 12px; /* Opera 10.5, IE9, Saf5, Chrome, FF4, iOS 4, Android 2.1+ */
          
  /* useful if you don't want a bg color from leaking outside the border: */        
  -moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box; 

  -webkit-box-shadow: 0px 0px 4px #ffffff /* Saf3-4 */
     -moz-box-shadow: 0px 0px 4px #ffffff; /* FF3.5 - 3.6 */
          box-shadow: 0px 0px 4px #ffffff; /* Opera 10.5, IE9, FF4+, Chrome 10+ */



  background-color: #990000;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#990000), to(#3333ff)); /* Saf4+, Chrome */
  background-image: -webkit-linear-gradient(top, #990000, #3333ff); /* Chrome 10+, Saf5.1+, iOS 5+ */
  background-image:    -moz-linear-gradient(top, #990000, #3333ff); /* FF3.6 */
  background-image:     -ms-linear-gradient(top, #990000, #3333ff); /* IE10 */
  background-image:      -o-linear-gradient(top, #990000, #3333ff); /* Opera 11.10+ */
  background-image:         linear-gradient(top, #990000, #3333ff);
            filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#990000', endColorStr='#3333ff'); /* IE6-IE9 */



  -webkit-transform: rotate(7.5deg);  /* Saf3.1+, Chrome */
     -moz-transform: rotate(7.5deg);  /* FF3.5+ */
      -ms-transform: rotate(7.5deg);  /* IE9 */
       -o-transform: rotate(7.5deg);  /* Opera 10.5 */
          transform: rotate(7.5deg);  
             filter: progid:DXImageTransform.Microsoft.Matrix(/* IE6–IE9 */ 
                     M11=0.9914448613738104, M12=-0.13052619222005157,M21=0.13052619222005157, M22=0.9914448613738104, sizingMethod='auto expand');
               zoom: 1;

  -webkit-transition: all 0.3s ease-out;  /* Saf3.2+, Chrome */
     -moz-transition: all 0.3s ease-out;  /* FF4+ */
      -ms-transition: all 0.3s ease-out;  /* IE10? */
       -o-transition: all 0.3s ease-out;  /* Opera 10.5+ */
          transition: all 0.3s ease-out;  



     text-shadow: 1px 1px 3px #888; /* FF3.5+, Opera 9+, Saf1+, Chrome, IE10 */

  -webkit-background-size: 100% 100%; /* Saf3-4 */
     -moz-background-size: 100% 100%; /* FF3.6 */
          background-size: 100% 100%; /* Opera, IE9, Saf5, Chrome, FF4 */
}
@font-face {
  font-family: 'WebFont';
  src: url('myfont.eot?#') format('eot'),  /* IE6–8 */
       url('myfont.woff') format('woff'),  /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
       url('myfont.ttf') format('truetype');  /* Saf3—5, Chrome4+, FF3.5, Opera 10+ */
}

p { 
color: white;
font-size: 1.5em;
}

#policy{
margin-top:5em;
margin-left:5em;
width: 25em;
float:left;
 -webkit-border-radius: 12px; /* Saf3-4, iOS 1-3.2, Android <1.6 */
     -moz-border-radius: 12px; /* FF1-3.6 */
          border-radius: 12px; /* Opera 10.5, IE9, Saf5, Chrome, FF4, iOS 4, Android 2.1+ */
          
  /* useful if you don't want a bg color from leaking outside the border: */        
  -moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box; 

  -webkit-box-shadow: 0px 0px 4px #ffffff /* Saf3-4 */
     -moz-box-shadow: 0px 0px 4px #ffffff; /* FF3.5 - 3.6 */
          box-shadow: 0px 0px 4px #ffffff; /* Opera 10.5, IE9, FF4+, Chrome 10+ */


  background-color: #990000;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#990000), to(#3333ff)); /* Saf4+, Chrome */
  background-image: -webkit-linear-gradient(top, #990000, #3333ff); /* Chrome 10+, Saf5.1+, iOS 5+ */
  background-image:    -moz-linear-gradient(top, #990000, #3333ff); /* FF3.6 */
  background-image:     -ms-linear-gradient(top, #990000, #3333ff); /* IE10 */
  background-image:      -o-linear-gradient(top, #990000, #3333ff); /* Opera 11.10+ */
  background-image:         linear-gradient(top, #990000, #3333ff);
            filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#990000', EndColorStr='#3333ff'); /* IE6-IE9 */



  -webkit-transform: rotate(-7.5deg);  /* Saf3.1+, Chrome */
     -moz-transform: rotate(-7.5deg);  /* FF3.5+ */
      -ms-transform: rotate(-7.5deg);  /* IE9 */
       -o-transform: rotate(-7.5deg);  /* Opera 10.5 */
          transform: rotate(-7.5deg);  
             filter: progid:DXImageTransform.Microsoft.Matrix(/* IE6–IE9 */ 
                     M11=0.9914448613738104, M12=0.13052619222005157,M21=-0.13052619222005157, M22=0.9914448613738104, sizingMethod='auto expand');
               zoom: 1;

  -webkit-transition: all 0.3s ease-out;  /* Saf3.2+, Chrome */
     -moz-transition: all 0.3s ease-out;  /* FF4+ */
      -ms-transition: all 0.3s ease-out;  /* IE10? */
       -o-transition: all 0.3s ease-out;  /* Opera 10.5+ */
          transition: all 0.3s ease-out;  



     text-shadow: 1px 1px 3px #888; /* FF3.5+, Opera 9+, Saf1+, Chrome, IE10 */

  -webkit-background-size: 100% 100%; /* Saf3-4 */
     -moz-background-size: 100% 100%; /* FF3.6 */
          background-size: 100% 100%; /* Opera, IE9, Saf5, Chrome, FF4 */
}
@font-face {
  font-family: 'WebFont';
  src: url('myfont.eot?#') format('eot'),  /* IE6–8 */
       url('myfont.woff') format('woff'),  /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
       url('myfont.ttf') format('truetype');  /* Saf3—5, Chrome4+, FF3.5, Opera 10+ */
}

Open in new window

0
Rartemass
Asked:
Rartemass
4 Solutions
 
ncooCommented:
Take a look at the following matrix, it will tell you what is and isn't supported in IE/FF/Chrome etc

Also if you click on the css element it gives you the methods for the browser,

e,g, IE8 gradient is:

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#000000');

But it's not supported by IE6/7 or IE9, you can't use gradient with these browsers.

http://www.quirksmode.org/css/contents.html
0
 
RartemassAuthor, martial arts coach, IT ConsultantAuthor Commented:
Thanks for the matrix, it explains this well.
What I don't understand is that the matrix states that it works in IE 8 with the filter as you have above.
I have that line in my CSS and it still doesn't work in IE 8.
The only difference between your code and mine are the colours used.

Your code is first, mine is second:
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#000000');
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#990000', endColorstr='#3333ff');

Even changing my code to be yours exactly makes zero change in IE8.
0
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

 
Jen0910Commented:
Filter is IE look...bad unfortunately. Check this out for CSS3 support in IE: www.css3pie.com

It's a plugin that swaps out the HTC file. Works awesome, I use it all of the time.
0
 
ncooCommented:
Are you running IE8 as IE8 or are using the IE7 settings in the browser (Compatibility mode)?
0
 
maricksvilleCommented:
Not sure why this worked for me but can you comment out or remove lines 43-44 and lines 105-106. This then resulted in a gradient appearing as intended but removed the rounded corners.

0
 
RartemassAuthor, martial arts coach, IT ConsultantAuthor Commented:
ncoo, I am running IE8 as IE8.
maricksville, I will test your suggestion in the next few days. The page is internal at work and I won't be able to check it until later in the week. Will get back with the results ASAP.
However those lines you suggest to comment out make the text rotate at an angle.
If this makes it work, I guess I'll just have to decide which is more important, the gradient or the rotation.
0
 
ncooCommented:
You could always create an image of the gradient in Firefox and then for IE use that image as the background.  You will then get the same style in both browsers, although not the best code sadly.  It's often the only way to handle IE sometimes.
0
 
RartemassAuthor, martial arts coach, IT ConsultantAuthor Commented:
Thanks for the comments.
I was under a time limitso simply created the gradient image in photoshop and applied as background.
0

Featured Post

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Tackle projects and never again get stuck behind a technical roadblock.
Join Now