# Spry Menu Rollover display issues in IE 9



## jam2095476 (Mar 25, 2011)

Hi, I am relatively new to web design, and have been working on a website for my family for a few days now. I have Dreamweaver Cs5. I have Opera, Safari, FireFox, IE 9, Chrom and Netscape navigator on my computer. When I view my website it looks and functions as i would expect from all the browsers except for IE 9. For some reason, IE 9 forces more space between my submenu items and it seems to throw off the location of my hover over sensitivity in the submenu. What happens, is that I can get the submenu to fly out, but only some of the buttons have complete sensitivity to the whole button, others are rollover sensitive on the words in the submenu. What makes no sense to me, is that some of the submenu buttons are perfect, and some are having this problem. I will include the link to my site:

The Morris Family Website

As well as my code for the site. I am not sure if this is a java script issue (which i know next to nothing about) or as i suspect, its an issue with IE 9. I have tried to run IE in compatibility mode for 6, 7, and 8 but still have the same issue with IE.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>

<style type="text/css">
#wrapper {
margin-right: auto;
margin-left: auto;
background-color: #FDD598;
padding: 20px;
height: auto;
width: 950px;
}
#picture_row {
margin-top: 20px;
background-color: #E6832E;
clear: both;
padding-left: 10px;
}
#html {
}
#footer {
background-color: #603;
color: #FFF;
width: 950px;
margin-right: auto;
margin-left: auto;
padding-top: 0px;
padding-right: 20px;
padding-bottom: 0px;
padding-left: 20px;
}
#header {
background-color: #E6832E;
padding: 10px;
width: 900px;
margin-top: 10px;
margin-right: auto;
margin-bottom: 10px;
margin-left: auto;
height: auto;
}
#quote {
margin-right: auto;
margin-left: auto;
width: 900px;
font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
font-size: 14px;
height: auto;
background-color: #CB956F;
font-style: normal;
padding: 0px;
}
#column1 {
float: left;
width: 150px;
margin:0 auto;
}
#column2 {
margin-left: 160px;
background-color: #8E4C4D;
margin-right: auto;
color: #FFF;
padding-right: 10px;
padding-left: 10px;
padding-bottom:10px;

}
#columns {
margin-right: 15px;
margin-left: 15px;
}
#body {
}
body {
background-image: url(file:///K|/**** Daddys Docs/School Work/gradient background.gif);
background-repeat: repeat-x;
background-color: #f7d4b5;
}
ul {padding:0;
margin:0;
}
a:link {color:#414958;
text-decoration: underline;
}
a:visited {color:#4e5869;
text-decoration: underline;
}
a {outline:none;}




</style>
<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<script type="text/javascript">
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a_.indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a;}}
}
</script>
<link href="SpryAssets/SpryMenuBarVertical.css" rel="stylesheet" type="text/css" />
<title>The Morris Family Website</title>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<div id="wrapper">
<div id="header"><img src="Images/morris_family.jpg" width="900" height="125" alt="Image header" /> </div><!--end of head-->

<div id="quote"><h3 align=center>Be who you are and say what you feel because those who mind don't matter and those that matter don't mind.</h3></div>

<div id="columns">


<div id="column1">
<center><ul id="MenuBar1" class="MenuBarVertical">
<li><a href="#">Home</a> </li>
<li><a href="#" class="MenuBarItemSubmenu">Family</a>
<ul>
<li><a href="pages/kathyspages.html">Kathy</a></li>
<li><a href="pages/jimspage.html">Jim</a></li>
<li><a href="pages/erikspage.html">Erik</a></li>
<li><a href="pages/mackenziespage.html">Mackenzie</a></li>
<li><a href="pages/alexaspage.html">Alexa</a></li>
<li><a href="pages/bernicepages.html">Bernice</a></li>
<li><a href="pages/brodiespage.html">Brody</a></li>
<li><a href="pages/roxiespage.html">Roxy</a></li>
</ul>
</li>
<li><a href="#">Friends</a> </li>
<li><a href="#">Other Stuff</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
<p></p>
<p align="center">this is where the navigation buttons will be located.</p></center> 
</div><!--end of column1-->

<div id="column2">
<h1 align=center>Welcome to our website!</h1>

<p>We are family! We love each other, we support each other, and we love to tease each other.</p>
<p>We have put this site together for our friends and family to stay in touch with us, and to keep up to date on our goings ons.</p>
</div><!--end of column2-->

<div id="picture_row">We are family, we yell, we scream, we love and we listen!
</div><!--end of picture row-->

<marquee behavior="alternate"><img src="Images/Scolling-pictures-for-site.png" width="2100" height="125" alt="Scrolling images" /></marquee>



</div><!--end of columns-->

</div><!--end of wrapper-->
<div id="footer"><p align="right">©The Morris Family Project, 2011</p>
</div>
<script type="text/javascript">
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
</script>
<body <?php echo $browser; ?>>
</html>



Thank you in advance for any thoughts or suggestions you may have about my problem._


----------



## Stephen Bowles (Jan 28, 2011)

I am not entirely sure what the problem is. I have tried your code and viewed your site using different browsers, including IE9, and it looks fine and basically the same in each browser, no real difference.

I suggest you run your code through a validator, fix the errors (in the piece you provided there was a far few), then see if anything is corrected your end.

Due to the fact it looks fine on my browser, it could be something to do with your system and/or cache, so try deleting browser cache/temp files, and then see what happens.

Each browser does have its own defaults, so if you do not specify something, it will use its defaults (such as font family and padding). Make sure each element/style on DIVs and similar clearly state these types of things. You want margin 0? Specify it.

Here's hoping that was somewhat helpful...

The W3C Markup Validation Service


----------



## jam2095476 (Mar 25, 2011)

Thank you for your timely response. It is much appreciated. 
Ok, I cleared all my cache, and tried again. I also checked on the other 6 computers in my house, and still get the same issue. The page looks good, (as good as I can make it for being an amateur) and functions, but it doesnt operate the same in IE 9. The specific issue is that when the submenus come out on the family button, only 3 of the submenu buttons are activated by rollover, but the words in in box activate the rollover effect in all of them. If I rollover kathy, the rollover works when i am over the words, but when I roll past the words to the open part of the button the rollover goes away and the menu collapses. The Mackenzie, Alexa and Bernice submenu buttons work exactly how I want them too, and if you go past the Bernice button to just the very top of the Brody button, the Brody button lights up. This just seems like weird action since all the other browsers I have tried did not have this issue. 

I tried to validate the file in dreamweaver, but when i click on the validate tab, it doesnt let me actually validate the file, it asks me to choose from a list of things, of which, html 4.0 is already selected. Do I need to select other options for the validation to be available?

Thank you again for your help..


----------



## jam2095476 (Mar 25, 2011)

WOW. lol, I feel like a total noob.....

I figured out my problem....the document mode for my IE 9 browser setting was set to IE 7, as soon as i changed it to IE 9, it is looking perferct.

Thank you for you help, I appreciate it very much.


----------



## Stephen Bowles (Jan 28, 2011)

Well, that is good, but doesn't it feel like putting the problem under the carpet? Someone with an older version of IE might get that issue. Hopefully it wasn't too bad though.

Great job with the site though.


----------



## jam2095476 (Mar 25, 2011)

Lol, yes it does sort of feeling like sweeping it under the rug, but I went through and modified the css for the spry menu in just about every line, little tweaks here and there with no positive result.

<meta http-equiv="X-UA-Compatible" content="IE=9" >

I put this simple meta tag in my code and it works fine now, but i am curious, do you need to put meta tags in the code for all versions of the browser? or does this code simple tell the browser to use IE 9 mode if its available?

I dont have any computers in my home with an older version of IE, so I can't test it from home.

Thank you again.


----------



## Stephen Bowles (Jan 28, 2011)

That would need to be tested with someone who has an older version of IE, however I shouldn't think (unless there is some sort of windows update), that it would make much difference. The browser will just try that compatibility mode, but if it can't, then will go back to defaults (same for other browsers). Because of this and because your website looks fine in Chrome/Firefox (at least on my end), you shouldn't need anything else.

You could try some JavaScript (or maybe I should say ECMA script) in place of the <marquee>, which may sort it (would also validate with w3c standards better).


----------



## Laxer (Dec 28, 2010)

I will go ahead and tell you now that your use of meta tags is incorrect 

Here is some information if your curious: Meta Tags

Just my web $.02 don't design your site to work in versions of IE less then 6.

For example if you want your menu to bump out in 6 you will have to use a javascript to apply the attributes on-hover.

This isn't hard but it's unnecessary.

One last note, your menu doesn't quite line up on my end. (needs to be up a little.)

Also, your background-image on your body tag is linked to incorrectly.


Following up what Stephen said, Using the html tag <MARQUEE> is poor design, i would much rather see it replaced with a javascript.


----------



## jam2095476 (Mar 25, 2011)

I appreciate the input, but I dont know how to change the alignment in my menu. When I view the page directly in IE 9, the submenu pops up slightly lower than the family button, but when i preview it in IE 9 from Dreamweaver cs5, the submenu pops up slightly higher than the family button. I have review the sprybar css, and not really sure how I can change that attribute.

I do believe I have properly linked the body background image now, but am just starting to read about javascript, so I have no idea how to change the <marquee> to be w3c validation yet. Any pointer/thoughts/ideas would be much appreciated.

Thank you again.


----------



## Laxer (Dec 28, 2010)

Always go by how the browser shows it not how DW displays it.

I will go ahead and see if i can tweak your menu to improve it just give me a bit.

As for the marquee just google javascript alternatives.


----------



## Laxer (Dec 28, 2010)

Here is your fix:

In "SpryMenuBarVertical.css"

change

```
ul.MenuBarVertical ul
{
margin-top:10px;
}
```
to

```
ul.MenuBarVertical ul
{
margin-top:0px;
}
```

I am not a big fan of how the menu is built but i don't think you had anything to do with it and it works just fine so no need to edit 

Also check your source code on default.aspx there is a left over ">" at the bottom of the page.


----------



## Laxer (Dec 28, 2010)

For your marquee:

Here is an alternative i have seen used:Slide

I'm sure there is a better solution but i don't know how confident you are in your coding/JS.


----------



## jam2095476 (Mar 25, 2011)

thank you for those suggestions. and yes, i didnt design the menu bar, it was a preset spry menu from dreamweaver, i just modified the background.

I knew there had to be a better way to do my marquee, just had no idea what was available yet. Before about a week ago, I had never even thought about web design, and never played with or looked into this medium, but now that i am, i am very curious to learn more.


----------



## Laxer (Dec 28, 2010)

jam2095476 said:


> thank you for those suggestions. and yes, i didnt design the menu bar, it was a preset spry menu from dreamweaver, i just modified the background.
> 
> I knew there had to be a better way to do my marquee, just had no idea what was available yet. Before about a week ago, I had never even thought about web design, and never played with or looked into this medium, but now that i am, i am very curious to learn more.


There is a long road ahead of you. Best of luck :grin:

If you have any other questions feel free to fire away.


----------

