Computer tossed out the window - IE9

[camdav72]

Hiya guys, thought my site was going along just fine; was testing it frequently in Safari and Forefox on my mac and via my usb stick on the laptop in Safari, Firefox and IE9.All seemed grand... BUT when I u ploaded site and tested it in IE9 on the mrs laptop my horizontal menu bar is all over the place... I have been pulling my hair out for the last 6 hours trying to get to the bottom of it and would appreciate any advice you could give. The site is still under construction but have temporarily launched it here: http://www.heggie5.webspace.virginmedia.com/mosLink.html Also the page tuner works in all browsers EXCEPT IE9 - can anyone hekp me with any of these problems PLEASE? My CSS and HTML for the page is :

<style>header ul#menu li:hover ul{display: block;}   header ul#menu ul li a:hover{color: #000;}header ul#menu ul li:last-child{border-bottom: none}header ul#menu li{display: inline-block;}header ul#menu li a{border-top: 1px solid #d0e2ea;color: #fff;font-weight: bold;display: inline-block;display: block;line-height: 40px;margin-right: 1px;text-decoration: none;text-shadow: 0 -1px rgba(0, 0, 0, 0.25);border-radius: 3px 3px 0 0;padding-top: 0px;padding-right: 15px;padding-bottom: 0;padding-left: 0px;font-size: 130%;font-style: normal;background-color: #621517;height: 41px;text-align: left;vertical-align: bottom;}header ul#menu li > ul{display: none;}header ul#menu li a:hover{background: #fff;border-top-color: #fff;color: #666;text-shadow: none;}header ul#menu ul {background: #fff;border-bottom: 1px solid rgba(0, 0, 0, 0.1);display: none;margin-left: 0;margin: 0;padding: 5px 0 0 0;position: absolute;}header ul#menu ul li{border: 1px solid rgba(0, 0, 0, 0.1);border-width: 0 1px;float: none;list-style: none;margin: 0;padding: 0;}header ul#menu ul li a{background: none;color: #666;font-weight: normal;font-size: 12px;margin: 0 20px;padding: 0;text-shadow: none;border-top-style: none;}header ul#menu li a.home-icon span{display: block;text-indent: 22px;overflow: hidden;text-align: left;direction: ltr;background-image: url(IMAGES/home-icon.png);background-repeat: no-repeat;background-position: left center;}header ul#menu li a.home-icon:hover span{background-image: url(IMAGES/home-icon-hover.png);background-repeat: no-repeat;background-position: left center;}header ul#menu li a{margin-top: 5px;padding-left: 10px;padding-top: 3px;float: left;}header{display: block; /* Compatibility fix */}header:after{background: rgba(0, 0, 0, 0.1);content: ' ';height: 0px;position: absolute;width: 100%;z-index: 10;}header ul#menu{border-bottom: 5px solid #fff;overflow: hidden;list-style: none;padding-right: 10px;padding-bottom: 0;padding-left: 10px;clear: left;top: 0px;margin-top: 0;margin-bottom: 0;margin-left: 250px;}header h1 {font-family: Garamond;color: #FFFFFF;font-weight: lighter;text-align: left;padding-top: 0px;font-size: 36px;padding-left: 250px;display: block;float: left;word-spacing: -2px;}#footer .footer {width: 890px;margin-right: 0px;margin-left: 35px;font-size: 13px;color: #FFFFFF;float: left;line-height: 3px;margin-top: -10px;padding-top: 0px;text-align: center;vertical-align: top;}#apDiv3 {float: right;width: 700px;position: absolute;top: 30px;padding-left: 230px;}   #wrapper {width: 960px;margin-right: auto;margin-left: auto;}body {background-color: #FFF7DD;background-image: url(IMAGES/headerweb150px.jpg);background-repeat: repeat-x;}   #apDiv2 {position:absolute;width:205px;height:156px;z-index:1;float: right;top: 7px;}    #apDiv1 {position:absolute;width:200px;height:115px;z-index:1;}#apDiv3 {position:absolute;width:708px;height:52px;z-index:2;}#bookflip{color:#ffffff;}.topmargin {margin-right: auto;margin-left: auto;width: 960px;padding-top: 20px;margin-top: 10px;position: relative;}.previousButton {background-image: url(IMAGES/mikeBook/previous.png);background-repeat: no-repeat;height: 40px;width: 90px;margin-top: 20px;margin-right: 2px;margin-bottom: 2px;margin-left: 2px;background-color: #000000;}.nextButton {background-image: url(IMAGES/mikeBook/nextBut.png);background-repeat: no-repeat;height: 40px;width: 90px;margin-top: 20px;margin-right: 2px;margin-bottom: 2px;margin-left: 2px;background-color: #000000;}body,td,th {font-family: "Century Gothic", "ITC Avant Garde Gothic Book", "Avant Garde", "Trebuchet MS", Tahoma, Verdana, "Gill Sans", Geneva, sans-serif;font-size: 13px;}#footer {background-color: #621517;clear: both;float: left;width: 960px;padding-top: 0px;margin-top: 8px;}   #footer .footer p a {text-decoration: none;color: #FFFFFF;cursor: auto;}#movemenu #menu {top: 0px;margin-top: 90px;}#whitecontent {background-color: #FFFFFF;float: left;width: 960px;margin-right: auto;margin-left: auto;margin-top: -10px;border-top-left-radius: 7px;border-top-right-radius: 7px;box-shadow: 0px 2px 9px 1px #000000;position: relative;min-height: 550px;}#Framework {width: 940px;margin-left: 10px;height: 550px;float: left;position: relative;background-image: url(IMAGES/bookback.jpg);background-repeat: no-repeat;background-position: 0px 80px;}</style><script type="text/javascript" src="bookflip_v4.1/bookflipjs/bookflip.js"></script></script><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>	    <!--[if lt IE 9]>above<![endif]--></head><body><div id="wrapper"> <!--[sTART of WRAPPER FOR PAGE div-->   <div id="heeder"> <!--[sTART of HEEDER div-->	   	    <header>	   	   <div id="apDiv2"><img src="IMAGES/ysiabLogo.png" width="245" height="138" alt="your story logo"></div>	    <div id="apDiv3"><img src="IMAGES/MameMems.png" width="738" height="45" alt="Memories text"></div>	   	    <div id="movemenu"> <!--[sTART of MENU CASING div--><ul id="menu">	 <li><a href="index.html" class="home-icon"><span>Home</span></a></li>   	 <li><a href="browseflash3.html">Browse our books</a></li>	 <li><a href="whichBookYou.html">Which book for you?</a></li>			  <li><a href="HowYourBook.html">Order your book</a></li>	 </ul>	    </div> <!--[END of MENU CASING div-->  </header> <!--[END of HEEDER div-->    </div> <!--[END of HEEDER div-->

[Err]

I know it's bad coding but you can always put a IE 9 only CSS. It won't affect other browsers just the target IE browser.

[boen_robot]

This may not be related to your original issue, but...you have some inconsistent charset metas in your head:

	<meta content="text/html; charset=UTF-8" http-equiv="Content-Type">... <meta http-equiv="Content-Type" content="text/html; charset=windows-1252" />...		<meta charset="UTF-8" />

Also, you have

<!--[if IE ]>  <link href="iecss.css" rel="stylesheet" type="text/css"><![endif]--><!--[if IE]><style type="text/css"> #movemenu { zoom: 1;}</style><![endif]-->

i.e. it appears you're applying fixes that IE9 doesn't need. Try to limit those CCs to "IE lte 8".Also, validate your page and fix its errors. You may be triggering a legacy rendering mode.

[camdav72]

Sorry but I am abit of a noobie at this. What do you mean about my inconsistent charset metas? And the [if IE] are for a three pixel jot which was flagged by dreamweaver when I tested my html for browser compatibility. The other one is for the page flip javascript which I cannot seem to get to work in IE at all... Any help and advice is, believe me, greatly appreciated... I believe that the best way to learn something is to break it and I am feeling very broken at the moment!!!!!!

[boen_robot]

I use the word "metas" as a short hand for "meta elements". A meta element is the thing in the HTML that takes the form:

<meta ...>

By "charset meta", I mean a meta element that specifies the charset the document is in (such as those I quoted). This can be done in the way you do it with your first two elements OR the third element. Your first and third meta elements specify one charset (UTF-8), while your second meta specifies another (windows-1252). This is not right - you must have just one such meta elements declaring just one charset.I'd suggest your remove all of your existing metas, and make a new one that is like the second one, but using UTF-8, like the first, i.e.

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

And the [if IE] are for a three pixel jot which was flagged by dreamweaver when I tested my html for browser compatibility.

That's an IE6 bug if I remember correctly. So change that CC to "[if IE lte 6]".

[dink]

Don't believe everything that Dreamweaver or any wyswyg programs tell you.Validate your html code here http://www.w3schools...eb_validate.asp It would appear that in your heading you have three tags with different data so the browser is getting confused.. IE does that alot.. In the <head></head> you need to remove two of these tags.

   <meta content="text/html; charset=UTF-8" http-equiv="Content-Type">...<meta http-equiv="Content-Type" content="text/html; charset=windows-1252" />...				<meta charset="UTF-8" />

hope this helps a little..dink I just validated your HTML and it shows 84 errors, most of which are easy to fix.The validation page will show you where the errors are.