Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

CSS

Why are the header and footer imgs not responsive in IE?

Hi all!

Currently I am finishing off a website and can't find out why the images I placed in the header element (within the div.heroimage) and in the div.footer-bg are not responsive in IE.

I was testing on IE11 even. Played around with several max-width, height auto rules in CSS, however I still can't get the images to behave responsive and autoscaling with browser width in IE.

In Chrome and Firefox it works just fine.

Here is a link to an example page: http://projekt-groess.saskialund.de/referenzen.html Btw I am using the latest bootstrap.

Maybe one of you smart treehouse friends knows a trick!

Thanks in advance Saskia

4 Answers

I finally found the solution:

had to set the css width of the img itself to 100% and remove max-width to make it work in IE as well.

I solved it by removeing the bootstrap class img-responsive from the img elements and instead adding the correct CSS rule to it.

I converted the html template into a WordPress theme. For anyone who is interested, please have a look here: http://projekt-groess.saskialund.de/wordpress/

If anyone has any questions, please le tme know.

thanks to those who have spent time thinking about my question!

Hi Saskia, This could be your css rule isn't compatible with IE11.

Well, that's what I've already figured XD

Which is why I am asking here :)

Thanks for participating in the discussion, though!

Check your bootstrap it could be causing the your responsive rules to not work. Try highlighting your Bootstrap code then do the following shortcut ctrl+x which will cut the highlighted text also copying it then reload your page. If that doesn't work then it is either your browser or you just did something wrong with your css rules.

Sorry it is really hard to help you without seeing your code. If you could please attach it.

You can see the code in the html that I linked.

Use your browser developer tools, Ethan ;) It is just a simple html page with css.