Solved

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

Posted on 2011-09-29
9
955 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
DevOps Toolchain Recommendations

Read this Gartner Research Note and discover how your IT organization can automate and optimize DevOps processes using a toolchain architecture.

 
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
 
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

Master Your Team's Linux and Cloud Stack!

The average business loses $13.5M per year to ineffective training (per 1,000 employees). Keep ahead of the competition and combine in-person quality with online cost and flexibility by training with Linux Academy.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
css, html 5 42
songs will not play in k love website 5 33
A simple Float not working. 5 19
php mysql check email already in database. (second check) 7 26
Preface This is the third article about the EE Collaborative Login Project. A Better Website Login System (http://www.experts-exchange.com/A_2902.html) introduces the Login System and shows how to implement a login page. The EE Collaborative Logi…
Several part series to implement Internet Explorer 11 Enterprise Mode
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.
Shows how to create a shortcut to site-search Experts Exchange using Google in the Chrome browser. This eliminates the need to type out site:experts-exchange.com whenever you want to search the site. Launch the Search Engine Menu: In chrome, via you…

770 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