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

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.