Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Posted by Aaron Fryer
Aaron Fryer
3,605 Points

IE10 Gradient issue

I have an issue with the background linear gradient, specifically it's with IE10.

I have designed a website that uses this feature, and having navigated through a tonne of issues all ready with browser compatibility, I am stuck at a final hurdle.

The beta address for the site is www.ajfweb.com/angelfestbeta

As mentioned, when on IE10 i have issues. The gradient does appear, great, but it stops at the bottom of the viewport, and then restarts. This doesn't happen in ff, safari, chrome or opera....

The code i have for all the relevant browsers is:

    background: #000; /* for non-css3 browsers */
    background: -ms-linear-gradient(top, #000000 0%, #330F57 100%); /*for IE9+*/
    background: -webkit-gradient(linear, left top, left bottom, from(#000), to(#563E70)); /* for            webkit browsers */
    background: -moz-linear-gradient(top,  #000,  #563E70); /* for firefox 3.6+ */

Any suggestions would be most welcome!

2 Answers

Ernest Grzybowski
Ernest Grzybowski
Treehouse Project Reviewer
Ernest Grzybowski
Ernest Grzybowski
Treehouse Project Reviewer

In #footer I took away:

    margin: -1% auto;

and it looks fine now. Give it a try.

Aaron Fryer
Aaron Fryer
3,605 Points
Aaron Fryer
Aaron Fryer
3,605 Points

Hey Ernest

Thanks a lot for the response! I'm amazed by the help I get on this forum with each issue I come across!

Unfortunately removing the margin didn't seem to affect the gradient, but I'm not sure exactly what I put it in there for so have removed it and don't see any changes.

However, After doing a bit more research online, I did find a solution-

I simply added the following AFTER the above background declarations, within the body selector, and all is now well with the world :)

height: 100%;
margin: 0;
background-repeat: no-repeat;
background-attachment: fixed;

Thanks again for your suggestion Ernest!

Cheers,

Aaron