Search code examples
cssinternet-explorercross-browser

website layout not working correctly on older versions of IE - works fine on IE9, FF 13 and chrome


I have created my first site and put alot of time into it and I'm confuse I have tested the site on my browsers

IE9 Chrome 19.0.1084.56 m Firefox 13.0

My layout all works for me

In checking previous browsers like IE8, IE7 etc the buttons on my menu are not even displaying properly I have an image as a button with a rollover image over the top.

They are either half showing the underlying image or not at all and then when clicked on half disappear etc..

I really would like to get some help from an experienced person out there to let me know the best thing to do when it come to my website.

Has it got anything to do with the size of the graphics etc? or the way I have done my CSS coding for the rollover buttons??

any help would be greatly appreciated.

I'm sorry that I'm a beginner but I have tried to learn what I can and watched hundreds of youtube videos and website tutorials... so I'm not sure where I am going wrong.


Solution

  • On line 148 of style.css you are missing a . on a class selector menu li a:visited should be .menu li a:visited. Some browsers may drop the rule completely if that cannot parse it. Double check your CSS.

    Not really relevant since you are using html5 shiv, but worth mentioning:

    Additionally, you are using section elements and relying on them to style things. Those are from HTML5 so some browsers wont recognize them and thus will not apply your css. If you want to support older browsers (and any new ones that don't support certain HTML5 elements) then use DIV or other elements as containers instead.