0

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!

Spudley
  • 166,037
  • 39
  • 233
  • 307
lprintz
  • 17
  • 1
  • 7

1 Answers1

0

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.

Community
  • 1
  • 1
jmshapland
  • 483
  • 4
  • 10
  • Thanks so much...unfortunately this didn't do the trick. Actually this change broke firefox as well :( Strangely, I ended up using the child selectors as a simple class to the img wasn't working. I reverted the code back so users can see how the slider is SUPPOSED to look in Firefox. – lprintz Sep 11 '12 at 17:56
  • Try the above edit... I fixed the CSS selector so that it should work in both IE and Firefox. – jmshapland Sep 11 '12 at 19:33
  • This worked...the images are resized...thank you! Now I have other IE issues. It looks like I need to now adjust the placement of the slider (it's not centered) and the caption elements. Can I use a media query WITHIN the conditional IE tags? – lprintz Sep 12 '12 at 12:55
  • Answered my own question...I CAN have a media query within a conditional statement. Thanks again for your help! – lprintz Sep 12 '12 at 13:04
  • Glad I could help. Go ahead and mark the answer correct to close the question. – jmshapland Sep 12 '12 at 13:52