6 Replies - 1267 Views - Last Post: 02 June 2012 - 05:11 PM

#1 I X Code X 1  Icon User is offline

  • D.I.C Head
  • member icon

Reputation: 47
  • View blog
  • Posts: 66
  • Joined: 28-July 10

Gradients: IE (not working) vs. Chrome (working)

Posted 02 June 2012 - 05:56 AM

Hello, I am creating a very basic page and trying to apply gradients to two different spots on the page. In Chrome and FF
this is not a problem, it works as I would expect it to. However, in IE (my current version is 9 - but would like to make it work in all versions; all possible anyway) the gradients don't show up and instead the background set for the body is in it's spot.


I have tried several different things, but can't seem to mend this problem. I have supplied an image of the two browsers side by side below and the html/css code.

HTML Code:

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" type="text/css" href="styles.css" />
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>TestTitle</title>
    </head>
    <body>
        <div id="header">
            <h1>TestTitle</h1>
        </div>
        <div id="content-wrapper">
            <div id="main-content">
                <form action="" method="">
                    <label for="username">Username:</label><input name="username" id="username" type="text"/>
                    <label for="password">Password:</label><input name="password" id="password" type="password"/>
                    <input type="submit" value="Enter" />
                </form>
            </div>
        </div>
    </body>
</html>



CSS Code:

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

body {
    background-image: url(stripe.png);
}

#header {
    height: 55px;
    width: 100%;
    background-image: linear-gradient(bottom, rgb(64,89,153) 100%, rgb(19,47,158) 74%);
    background-image: -o-linear-gradient(bottom, rgb(64,89,153) 100%, rgb(19,47,158) 74%);
    background-image: -moz-linear-gradient(bottom, rgb(64,89,153) 100%, rgb(19,47,158) 74%);
    background-image: -webkit-linear-gradient(bottom, rgb(64,89,153) 100%, rgb(19,47,158) 74%);
    background-image: -ms-linear-gradient(bottom, rgb(64,89,153) 100%, rgb(19,47,158) 74%);

    background-image: -webkit-gradient(
            linear,
            left bottom,
            left top,
            color-stop(1, rgb(64,89,153)),
            color-stop(0.74, rgb(19,47,158))
    );
    
    color: white;
    font-size: 50px;
}

#header h1 {
    padding-top: 10px;
    padding-left: 10px;
}

#content-wrapper {
    width: 95%;
    background-image: linear-gradient(bottom, rgb(144,148,156) 71%, rgb(162,168,189) 37%);
    background-image: -o-linear-gradient(bottom, rgb(144,148,156) 71%, rgb(162,168,189) 37%);
    background-image: -moz-linear-gradient(bottom, rgb(144,148,156) 71%, rgb(162,168,189) 37%);
    background-image: -webkit-linear-gradient(bottom, rgb(144,148,156) 71%, rgb(162,168,189) 37%);
    background-image: -ms-linear-gradient(bottom, rgb(144,148,156) 71%, rgb(162,168,189) 37%);

    background-image: -webkit-gradient(
            linear,
            left bottom,
            left top,
            color-stop(0.71, rgb(144,148,156)),
            color-stop(0.37, rgb(162,168,189))
    );
    -webkit-box-shadow: 0px 0px 30px rgba(50, 50, 111, 0.9);
    -moz-box-shadow:    0px 0px 30px rgba(50, 50, 111, 0.9);
    box-shadow:         0px 0px 30px rgba(50, 50, 111, 0.9);
    zoom: 1;
    margin: 0 auto;
    margin-top: 40px;
    height: 400px;
    text-align: center;
}




I don't know how to get images to appear on this website, so here is a linkto the picture.

The picture might be kind of hard to see, basically, it's a striped background on the body is showing through on IE and the gradient that is easily visible on Chrome is missing. Any tips or suggestions?

Is This A Good Question/Topic? 0
  • +

Replies To: Gradients: IE (not working) vs. Chrome (working)

#2 BenignDesign  Icon User is offline

  • holy shitin shishkebobs
  • member icon




Reputation: 5999
  • View blog
  • Posts: 10,421
  • Joined: 28-September 07

Re: Gradients: IE (not working) vs. Chrome (working)

Posted 02 June 2012 - 01:58 PM

I thought -ms-linear-gradient was IE 10. Isn't IE 9 and below just -linear-gradient?
Was This Post Helpful? 0
  • +
  • -

#3 I X Code X 1  Icon User is offline

  • D.I.C Head
  • member icon

Reputation: 47
  • View blog
  • Posts: 66
  • Joined: 28-July 10

Re: Gradients: IE (not working) vs. Chrome (working)

Posted 02 June 2012 - 02:29 PM

View PostBenignDesign, on 02 June 2012 - 01:58 PM, said:

I thought -ms-linear-gradient was IE 10. Isn't IE 9 and below just -linear-gradient?



I have tried both and both are resulting in the same results.
Was This Post Helpful? 0
  • +
  • -

#4 e_i_pi  Icon User is offline

  • = -1
  • member icon

Reputation: 793
  • View blog
  • Posts: 1,679
  • Joined: 30-January 09

Re: Gradients: IE (not working) vs. Chrome (working)

Posted 02 June 2012 - 03:37 PM

In terms of the gradient, this is what I'm using for IE, and it works fine:
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#000000', endColorstr='#ffffff', gradientType=1); /* for IE */


Out of interest, in the opening part of your CSS where you list a bunch of different element types, is there a reason why you're not just doing this?:
* {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}


Was This Post Helpful? 1
  • +
  • -

#5 I X Code X 1  Icon User is offline

  • D.I.C Head
  • member icon

Reputation: 47
  • View blog
  • Posts: 66
  • Joined: 28-July 10

Re: Gradients: IE (not working) vs. Chrome (working)

Posted 02 June 2012 - 04:17 PM

View Poste_i_pi, on 02 June 2012 - 03:37 PM, said:

In terms of the gradient, this is what I'm using for IE, and it works fine:
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#000000', endColorstr='#ffffff', gradientType=1); /* for IE */


Out of interest, in the opening part of your CSS where you list a bunch of different element types, is there a reason why you're not just doing this?:
* {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}




That seemed to fix it, do you happen down to what version of IE this is valid for?

Thanks!

And to answer the 2nd question, no there's not really a reason :sleepy:

This post has been edited by I X Code X 1: 02 June 2012 - 04:18 PM

Was This Post Helpful? 0
  • +
  • -

#6 e_i_pi  Icon User is offline

  • = -1
  • member icon

Reputation: 793
  • View blog
  • Posts: 1,679
  • Joined: 30-January 09

Re: Gradients: IE (not working) vs. Chrome (working)

Posted 02 June 2012 - 04:20 PM

According to MSDN, it's IE 5.5+, but I've only ever tested on IE 7+.
Was This Post Helpful? 0
  • +
  • -

#7 I X Code X 1  Icon User is offline

  • D.I.C Head
  • member icon

Reputation: 47
  • View blog
  • Posts: 66
  • Joined: 28-July 10

Re: Gradients: IE (not working) vs. Chrome (working)

Posted 02 June 2012 - 05:11 PM

View Poste_i_pi, on 02 June 2012 - 04:20 PM, said:

According to MSDN, it's IE 5.5+, but I've only ever tested on IE 7+.


Thanks, I also found this nice little write-up about it and other IE issues with these type of properties. Shows the drawbacks to each of these too, like for gradients with filter you can't set a start and stop, so it's a bit limited. At least it's still there though.
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1