Question

I’m working to convert a site to responsive and am having issues with an image resize and the positioning of some jquery elements.

Please look at this test site. Reduce the browser width (I have set to 768) and all looks fine in Firefox.

In IE8 everything works EXCEPT the size of images in the slider and the positioning of the slider captions.

The images aren’t sizing down to fit a smaller viewport. As far as the positioning of the elements ON the slides, I’m hoping there’s a solution as I imagine I can’t use IE specific styles on the page because it’s not part of the responsive code…or could I??

I’m at a loss!

Answer 1

My guess is the CSS selector for the media query uses

#slider > section > deiv > div img { 
    width: 768px;
    height: 251px;
}

Try changing the section tag to something else or selecting the image directly in the CSS selector. The section tag is not supported in IE8 because it is an HTML5 element so the media query cannot select the section tag.

You could probably change the CSS selector to:

#slider * img {
    width: 768px;
    height: 251px;
}

The #slider * img selector will get any child/grandchild of the element with an ID of slider.

For more information & browser support on the section tag visit: http://www.w3schools.com/html5/tag_section.asp

EDIT:
After doing further research it looks like IE8 doesn’t support media queries. There alternatives that you can use to emulate media queries with javascript. Check out this prior question:
IE8 support for CSS Media Query

It suggestes using http://code.google.com/p/css3-mediaqueries-js/ to implement this functionality in IE 8.

It looks relatively easy to implement because basically all you do is include this JS file in your application and write your media queries as you would if they were written for a browser that supports it natively.