Images not showing up in IE using responsive design

Question

So I've got a website (see this page - it's already live, but behind a coming soon cover), with two stylesheets accompanying it: one for normal styles (style.css) and one for style that only applies to a specific with (width.css - or, in other words: responsive design). This sheet makes sure that some photos don't show up at smaller screen sizes, but that they do show up at larger screens.

At least - that is what it has to do, and it does so fine in Chrome and Firefox, but it doesn't in IE (version 11). IE's dev tools show me that the calculated properties for my images are display:none and display:inital (which I used in most cases) is crossed out, despite that display:inital is in the min-width:700px / min-width:900px part.

Is there anybody who can help me out? If you need more resources / code, I'll be happy to provide it.

Thanks in advance!

Answer 1

Simply put it is not showing because the most recent rule that it read regarding that image is display:none, line 42 on width.css. The reason Chrome and FF are displaying it is because it also has an ID which takes a higher specificity over a class which has the rule display:initial.

I don't know why IE is taking the .overviewphoto as more important than #opgroot but it looks like maybe only one of those is needed anyway?

Edit: as Desperados_ mentioned, initial is not supported by IE (I did think it was a strange one) and hence IE can't work with it and is rendering none instead.

Quick fix would be adding inside ie.css this: img#opgroot { display:initial!important; } but I would recommend against this.

Keeping your code as simple as possible will definitely help with these cross-browser bugs.

Answer 2

The "initial" value is not supported by IE. However you can use "visibility" property instead of display: initial; or other values for display property.