Jump to content

Computer tossed out the window - IE9

Recommended Posts

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-->

Link to post
Share on other sites

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.

Link to post
Share on other sites

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.

Link to post
Share on other sites

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!!!!!!

Link to post
Share on other sites

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]".
Link to post
Share on other sites

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.

Edited by dink
Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

  • Create New...