Website menu hover css IE8 issue

Question

I have a site here http://www.deltacars.co.uk/testsite/

The menu and hover work fine in all browsers including IE8 but when I go to the another page which is using the same html and css the menu does not appear correct

http://www.deltacars.co.uk/testsite/north-wales-private-hire/privatehire.html

Please note that this is only using IE 8.

Anyone know why it works fine on one page and not the other

Thanks in advance

Answer 1

The broken page is missing some conditional IE comments in the header. All you need to do is right click and view the page source to compare the output.

    <!--[if lt IE 9]>
    <script src="shiv/dist/html5shiv.js"></script>
    <![endif]-->
    <!--[if lt IE 9]>
    <script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js"></script>
    <![endif]-->

Answer 2

Give your website a thorough validation using http://validator.w3.org - my guess is that one of your 241 errors is causing this not to render correctly in IE8.

"Modern" browsers are intelligent enough to render elements correctly despite the mark-up being incorrect, hence why you're not seeing the problem on any others.