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

Posted by Saskia Lund
Saskia Lund
5,673 Points

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

Saskia Lund
Saskia Lund
5,673 Points

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!

Ethan Moffat
Ethan Moffat
3,223 Points
Ethan Moffat
Ethan Moffat
3,223 Points

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

Saskia Lund
Saskia Lund
5,673 Points

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

Which is why I am asking here :)

Thanks for participating in the discussion, though!

Ethan Moffat
Ethan Moffat
3,223 Points
Ethan Moffat
Ethan Moffat
3,223 Points

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.

Ethan Moffat
Ethan Moffat
3,223 Points
Ethan Moffat
Ethan Moffat
3,223 Points

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

Saskia Lund
Saskia Lund
5,673 Points

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.