Flexslider2 and IE7 & 8 issues

Im working with Flexslider to make a photo gallery. Looks pretty good in Safari, FF, Chrome. Ive been testing it in IE, and so begins the nightmare. For some reason the photo gallery is interfering with the navigation styling, it is also interfering with the footer styling as well. Does anyone know why this would be happening? It did the same thing when I tried using the Visual Slideshow application as an alternative. Why would a photo gallery cause these issues? Any direction would be very helpful. Thanks in advance!

Heres the website: http://mullenasphalt.com/photos.html

In which version of IE are you seeing the problem, please?

Can you please be more descriptive about how the flexslider is interfering with the navigation and footer stylings?

It would be smarter of me to read the title of the post a little more closely. Sorry 'bout the delay.

The errors that I see have nothing to do with the flexslider. You are expecting IE7 and 8 to recognize HTML5 tags and they do not.

If you will change the <nav>, <section> and <footer> tags to divs (maybe make the nav tag something like <div class=“nav”> and change the CSS), IE8 should start working OK. Seems to for me, anyway. IE7 does not recognize display:table, so you’ll still have a problem with it.

FYI: you do not need XHTML closing marks on the images and elsewhere and you should add “alt=” attributes to the images.

Thanks for replying ronpat. I def going to look into your suggestions tomorrow morning. Im curious tho, IE8 renders all the other pages fine that have the <nav> and <footer> tags. If I was just trying to fix the photo gallery page for IE8, do you have any idea why the photos page is the only one that seems out of whack. If you dont mind, please look at these other pages. I truly feel the photo gallery is causing the problems. Id really appreciate your expert advice. Thank you!

http://mullenasphalt.com/index.html

The second look was worthwhile.

In your code for the other pages, you have a script in the <head> section…


<script>
  'article aside footer header nav section time'.replace(/\\w+/g,function(n){document.createElement(n)})
</script>

When I add that script to the photogallery page, the menu and the footer start behaving in IE8. Apparently, the function of that script is to make IE8 (and any other non-compliant browser) respond to those HTML5 tags. (Which is effectively what I was suggesting by replacing the unknown HTML5 tags with known <div>s.)

Give it a try and let me know if this is on the right track.

The accepted way to cope with html5 in ie8 and under is to use the html5 shiv otherwise it will not recognise the elements.

OMG, THANK YOU SO MUCH!!! I have been so puzzled as to why this was not working properly. I totally overlooked the very important part of the code on that page. You really have saved a portion of my sanity. My sincerest accolades ronpat!! :slight_smile:

Thanks for the tip! I have never heard of html5 shiv, will def be looking into this method Paul O’B.