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 CSS Selectors Selectors - Beyond the Basics Course Overview

Mark Conway
Mark Conway
2,224 Points
Posted by Mark Conway
Mark Conway
2,224 Points

My 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

Mark Conway
Mark Conway
2,224 Points
Mark Conway
Mark Conway
2,224 Points

Sorry the website changed in auto correction, it is - www.troggled.com

4 Answers

Bradley Davis
Bradley Davis
5,918 Points

Hey 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
Bradley Davis
5,918 Points
Bradley Davis
Bradley Davis
5,918 Points

Hey 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
Mark Conway
2,224 Points
Mark Conway
Mark Conway
2,224 Points

Thank 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
Jane Marianne Filipiak
7,444 Points
Jane Marianne Filipiak
Jane Marianne Filipiak
7,444 Points

Hi 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