Go Back   Tech Support Forum > Design Forum > Web Design & Development

User Tag List

Spry Menu Rollover display issues in IE 9

This is a discussion on Spry Menu Rollover display issues in IE 9 within the Web Design & Development forums, part of the Tech Support Forum category. Hi, I am relatively new to web design, and have been working on a website for my family for a


Closed Thread
 
Thread Tools Search this Thread
Old 03-25-2011, 01:38 AM   #1
Registered Member
 
Join Date: Mar 2011
Posts: 6
OS: Windows 7 Home Premium x64



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" "https://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|/****%20Daddys%20Docs/Scho...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[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
</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">&copy;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.
jam2095476 is offline  
Sponsored Links
Advertisement
 
Old 03-25-2011, 01:52 AM   #2
TSF Enthusiast
 
Join Date: Jan 2011
Location: UK
Posts: 1,218
OS: .



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
Stephen Bowles is offline  
Old 03-25-2011, 11:36 AM   #3
Registered Member
 
Join Date: Mar 2011
Posts: 6
OS: Windows 7 Home Premium x64



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 is offline  
Sponsored Links
Advertisement
 
Old 03-25-2011, 01:07 PM   #4
Registered Member
 
Join Date: Mar 2011
Posts: 6
OS: Windows 7 Home Premium x64



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.
jam2095476 is offline  
Old 03-25-2011, 03:18 PM   #5
TSF Enthusiast
 
Join Date: Jan 2011
Location: UK
Posts: 1,218
OS: .



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.
Stephen Bowles is offline  
Old 03-25-2011, 04:19 PM   #6
Registered Member
 
Join Date: Mar 2011
Posts: 6
OS: Windows 7 Home Premium x64



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.
jam2095476 is offline  
Old 03-25-2011, 11:47 PM   #7
TSF Enthusiast
 
Join Date: Jan 2011
Location: UK
Posts: 1,218
OS: .



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).
Stephen Bowles is offline  
Old 03-26-2011, 11:42 PM   #8
TSF Team, Emeritus
 
Join Date: Dec 2010
Location: Portland, OR
Posts: 5,202
OS:

My System


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.
Laxer is offline  
Old 03-27-2011, 11:05 AM   #9
Registered Member
 
Join Date: Mar 2011
Posts: 6
OS: Windows 7 Home Premium x64



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.
jam2095476 is offline  
Old 03-27-2011, 01:26 PM   #10
TSF Team, Emeritus
 
Join Date: Dec 2010
Location: Portland, OR
Posts: 5,202
OS:

My System


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 is offline  
Old 03-27-2011, 01:31 PM   #11
TSF Team, Emeritus
 
Join Date: Dec 2010
Location: Portland, OR
Posts: 5,202
OS:

My System


Here is your fix:

In "SpryMenuBarVertical.css"

change
Code:
ul.MenuBarVertical ul
{
margin-top:10px;
}
to
Code:
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 is offline  
Old 03-27-2011, 01:37 PM   #12
TSF Team, Emeritus
 
Join Date: Dec 2010
Location: Portland, OR
Posts: 5,202
OS:

My System


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.
Laxer is offline  
Old 03-27-2011, 05:02 PM   #13
Registered Member
 
Join Date: Mar 2011
Posts: 6
OS: Windows 7 Home Premium x64



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.
jam2095476 is offline  
Old 03-27-2011, 05:06 PM   #14
TSF Team, Emeritus
 
Join Date: Dec 2010
Location: Portland, OR
Posts: 5,202
OS:

My System


Quote:
Originally Posted by jam2095476 View Post
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

If you have any other questions feel free to fire away.
Laxer is offline  
Closed Thread

Thread Tools Search this Thread
Search this Thread:

Advanced Search

Similar Threads
Thread Thread Starter Forum Replies Last Post
[URGENT] How to display database value in dropdown menu via update form
Hi All, I've created one admin form wherein he can add/update/delete sub category product details. These are my form elements: 1. Main Category Name (dynamic drop down - names are displayed from another table) 2. Sub category Name (text box) 3. Sub category description (textarea box) ...
Kan20 Web Design & Development 1 03-24-2011 03:59 AM
AIM/Yahoo display picture issues
I recently had to format my PC in early Feb. and DLed Yahoo/AIM earlier last week, however I've been having issues with my friend's display images. Yahoo won't display my friend's profile pictures, just a black square. I can upload my own pic fine however but can't see anyone else's profile pic....
Corrderio Windows 7 , Windows Vista Support 4 03-06-2011 08:13 AM
Need a VB Script Graphical Menu
I need help. I need a graphical (Clickable) menu for a batch script that I have written. I realize I can't create the correct type of menu in DOS, so I am asking for help from you guys. I will put the script in this post so someone can look it over and see if they can help me. I have a few VBS...
Ilneval Programming 0 02-24-2011 09:19 AM
[SOLVED] Display Issues, even after Upgrades?
*Please bear with me here... I know this is long but it has been extremely frustrating for my friend and I for almost a month now.* My friend had an issue about a month and a half ago. Randomly (sometimes a few minutes, sometimes up to a week) while playing any graphically (mildly) intensive...
EvolutionJ Video Card Support 6 02-23-2011 09:44 AM
msi 1719 (GX700) LCD display issues
A friend of mine recently gave me his old laptop after it died. It wasn't powering on, even after prelacing both the power jack on the computer, and the power board (and the ac adapter). I found a reasonably priced motherboard for it, and last night went through the trouble of replacing it. ...
bluezeak Laptop Support 1 02-09-2011 05:25 PM

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is on
Smilies are on
[IMG] code is on
HTML code is Off
Trackbacks are Off
Pingbacks are Off
Refbacks are Off


Post a Question


» Site Navigation
 > FAQ
  > 10.0.0.2
Powered by vBadvanced CMPS v3.2.3


All times are GMT -7. The time now is 05:55 AM.


Powered by vBulletin® Version 3.8.8
Copyright ©2000 - 2020, vBulletin Solutions, Inc.
vBulletin Security provided by vBSecurity v2.2.2 (Pro) - vBulletin Mods & Addons Copyright © 2020 DragonByte Technologies Ltd.
User Alert System provided by Advanced User Tagging v3.1.0 (Pro) - vBulletin Mods & Addons Copyright © 2020 DragonByte Technologies Ltd.
Copyright 2001 - 2018, Tech Support Forum

Windows 10 - Windows 7 - Windows XP - Windows Vista - Trojan Removal - Spyware Removal - Virus Removal - Networking - Security - Top Web Hosts