Solved

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

Posted on 2011-09-29
9
948 Views
Last Modified: 2012-05-12
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
Comment
Question by:Rartemass
9 Comments
 
LVL 15

Accepted Solution

by:
ncoo earned 250 total points
ID: 36844894
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
 
LVL 18

Author Comment

by:Rartemass
ID: 36852557
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
 
LVL 9

Expert Comment

by:user_n
ID: 36891696
0
 
LVL 8

Assisted Solution

by:Jen0910
Jen0910 earned 125 total points
ID: 36891698
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
How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

 
LVL 15

Expert Comment

by:ncoo
ID: 36895941
Are you running IE8 as IE8 or are using the IE7 settings in the browser (Compatibility mode)?
0
 
LVL 2

Assisted Solution

by:maricksville
maricksville earned 125 total points
ID: 36896153
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
 
LVL 18

Author Comment

by:Rartemass
ID: 36899177
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
 
LVL 15

Assisted Solution

by:ncoo
ncoo earned 250 total points
ID: 36899220
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
 
LVL 18

Author Closing Comment

by:Rartemass
ID: 36906581
Thanks for the comments.
I was under a time limitso simply created the gradient image in photoshop and applied as background.
0

Featured Post

IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

Join & Write a Comment

SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
Several part series to implement Internet Explorer 11 Enterprise Mode
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …
This Micro Tutorial will demonstrate how nuggets on the Web are formatted by using Chrome Developer Tools. These tools would not only view the site's CSS but it can also modify it and save the CSS to use on your own site.

706 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

18 Experts available now in Live!

Get 1:1 Help Now