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
Chris Dziewa
17,781 PointsBackground-color not working
I'm working on a website right now for a client and on UC browser HD and on IE9, the background colors I'm using are showing up as transparent on the header, footer, banner and buttons. On everything else I have tried, the site works fine.
Does anyone happen to know how I could fix this? I've tried using modernizr and even plain rgb background-color since I thought it was because of my gradients, but it didn't change anything. Thanks guys!
2 Answers
Graham Saunders
2,683 PointsDid you use all of the different browser packages?
background: #f2825b; /* Old browsers */
background: -moz-linear-gradient(top, #f2825b 0%, #e55b2b 50%, #f07146 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f2825b), color-stop(50%,#e55b2b), color-stop(100%,#f07146)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #f2825b 0%,#e55b2b 50%,#f07146 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #f2825b 0%,#e55b2b 50%,#f07146 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #f2825b 0%,#e55b2b 50%,#f07146 100%); /* IE10+ */
background: linear-gradient(to bottom, #f2825b 0%,#e55b2b 50%,#f07146 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f2825b', endColorstr='#f07146',GradientType=0 ); /* IE6-9 */
Chris Dziewa
17,781 PointsHey that worked, thank you! It must be that last package that did it. I think I'll start using gradient generators so I can stay sane with all of the prefixes ha. For some reason this works on everything except for my footer. I did include html5shiv in my modernizr build but it doesn't seem to be finding it. Any ideas why it wouldn't find that? EDIT: It also isn't working on the buttons.
James Barnett
39,199 Points> I think I'll start using gradient generators so I can stay sane with all of the prefixes
That's what prefix free is for.
Chris Dziewa
17,781 PointsThanks James, I'll have to check that one out. Any ideas why the gradients are only working with a few elements? Maybe I need to use the full ie9 gradient support selection on the gradient generator site. Maybe Treehouse could make a course about creating a cross-browser compatible website step by step.
Chris Dziewa
17,781 PointsJames, that prefix free is awesome!! Thank you so much for sharing. It will make my life a lot easier! I will also check out some other options in the future in case JavaScript is turned off. It has fixed my display problems on this site though.
James Barnett
39,199 Points> I will also check out some other options in the future in case JavaScript is turned off.
Sounds like a case for progressive enhancement. Where if JavaScript is turned off you see a solid color instead of a tranparent color. The user without JavaScript will never know there's anything missing. Make your site so it looks good and works fine without JS and then with JS it adds extra bells and whistles around the edges.