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 trialMark Conway
2,224 PointsMy Background image on the header and footer - is not displaying in Internet explorer but fine in other browsers?
I have been following the CSS course and web design course and I have two problems I can't resolve and need help with:
a. My header and footer background images will not display on Internet explorer, but seem to work fine on other browsers - what am I doing wrong?
b. On the iPhone my site shows as having a large white border on the right hand side, it works fine on iPad does anyone know how to resolve this?
My website is www.toggled.com
Mark
4 Answers
Bradley Davis
5,918 PointsHey Mark,
Referring to b.
I had a look in your sites css and your media queries are missing some text. Yours read:
@media (max-width: 1024px) @media (max-width: 768px)
they should read:
@media only screen and (max-width: 1024px) @media only screen and (max-width: 768px)
also with you media query that reads:
@media only screen and (min-device-width : 320px) and (max-device-width : 480px)
I would have it just read:
@media only screen and (max-device-width : 480px)
Hope this helps!
Bradley Davis
5,918 PointsHey Mark,
referring to a.
Im pretty sure your background-image issue will be because there are some css things in your background: ... that IE can't read.
If you first specify this - background: url('../img/troggled-header.jpg') no-repeat; with no gradient stuff and then have what you've got currently come after in your css. IE should fallback to background: url('../img/troggled-header.jpg') no-repeat; without any specified liner-gradient.
If it was me I would just apply the gradient effect to the image in photoshop as this would also lower the image file size greatly therefore making your page load a lot faster and also you wouldn't need to worry about weird browser things happening.
Hope this helps!
Mark Conway
2,224 PointsThank you - I will have a go and see what happens and will let you know.
It does not appear in IE 6, 7, 8 or 9.
Jane Marianne Filipiak
7,444 PointsHi Mark, Perhaps your IE version cannot support Flexbox. If you go to Guil's CSS3 Layout course / Using Flexbox today/, you might find some answers. He refers to modernizr too. Hope this suggestion will help you. Jane
Juliana Minium
Front End Web Development Techdegree Student 10,643 PointsWhat version of IE are you using. The Header & Footer background images are both displayed with IE 11. No iPhone so I'm no help there.
Mark Conway
2,224 PointsMark Conway
2,224 PointsSorry the website changed in auto correction, it is - www.troggled.com