Hi everyone. I am working with my site:
I am now checking some compatiblity issue with some browsers. When I open my site in IE8 this is how it looks:
But in chrome it works fine:
How can I fix it?
Why now?
You should have done that at the start while you were developing. Leaving things to the end only leads to pain 
It’s so much easier to fix things while you are developing because you can change the element concerned and make it work as required rather than building on a shaky foundation that only works in one browser. I have 4 or 5 browsers open on mac and PC and test in each every dozen or so lines that I code (or at least at frequent intervals or in complex situations).
Anyway, back to the issue with the nav and that is likely to be that as you have developed using the mobile first approach then browsers that do not understand media queries (such as IE8) get only the styles outside of the media queries and not your fully developed rules inside your min-width media query.
I usually develop the other way and provide a normal desktop experience first and then enhance it with media queries. That means that browsers like iE8 get a proper desktop display. Most mobiles these days support media queries so it is not the issue it used to be,
The easiest solution is for you to add a media query polyfill support and I use respond.js for this:
Note that it doesn’t work on local files so you have to be online to test or have a local server set up.
Well you are so blessed. I am jealous. I don’t have much resources like good pc’s and Mac. I only have a laptop with a lower spec. my RAM can’t support much. If I will open chrome and then use localhost like XAMPP it will lag for some times. A challenge for me. I’ll go find a way to fix this.
lol - I didn’t mean to boast
The respond.js should fix it if you just attach it after the main css file.
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.