Horizontal spry menu dropdowns not displaying properly in IE7

Hi,
Grateful for any help! I have a dreamweaver template which works fine on a Mac with Firefox and Safari, but when opened in IE7 on a PC the menu bar accros the top is ok but the dropdowns appear as a horizontal list, instead of vertical, and the submenues are not displayed. The site is not available on the web Can anyone advise how to fix this please?
I am using the default Spry code and Dreamweaver CS5, and have run Update to ensure latest versions, on iMac with Snow lepoard - also updated.
Many thanks
Richard

Have a look here http://labs.adobe.com/technologies/spry/samples/menubar/AutoWidthHorizontalMenuBarSample.h tml and when you get down near the bottom of the page add !important as per following
ul.MenuBarHorizontal ul li {
display: block;
float: none !important;
width: auto;
white-space: nowrap;
border-bottom: solid 1px #EEE;
The !important will override any changes that the JS wants to make.
Gramps

Similar Messages

Menu windows not displaying properly in Acrobat 11 STD

When I try to print any PDF file (clicking File->Print) the Print Menu that opens is missing all text in the window incl all buttons. I tried installing a separate Adobe Reader in local Danish language just to test the application but this was worse. So uninstalled and sticking to Acrobat.
I also tried click File->Properties and this is also not displaying properly.
I fear this has something to do with Microsoft compatibility, but I don't know. I have MS Windows 7 Pro SP1 installed.
The good news is I can guess the bottom 2 buttons - 'OK' (left button) and 'Cancel' (right button) which at least allows me to print in the default preferences.
Any ideas how to fix? I have the latest update installed.

I have been working together with Adobe support team to solve this. After multiple rootcauses we found the issue.
The issue was caused by not having the default windows font 'Segoe UI' installed. Sounds strange that Win 7 does not come with the font that is used by this application but the tip worked.
Google a website to download the font from, I used 'Fontpalace.com' - install the font - and voila the issue is solved.

Talbe not displaying properly in IE7

Here is my site;
http://tfproperty.co.uk/gardens/
According to Net Render;
http://ipinfo.info/netrenderer/index.php
My site is not dispalying properly in IE7. Anyone know why this is?
Just to preempt the invitalbe back lash, I know ive used a table for layout but I couldnt achive the multuple background images I wanted with CSS. Im making this site for a friend and he's adamant that he wants the multiple background image effect.
On top of that, a community expert on this forum said that using 1 table in the way that I have wont make a difference to accesabilty or SEO.
Thanks

I started this site ages ago but then put it down while I was waiting for information.
I dont mean to come across as defenive, I really appreciate people taking time to answer my questions! I just thought I knew what was coming in terms of table criticism, perhaps I was wrong.
I want a background image to extend to right of the container div, and a different image to extend down, and 3rd to extend to the left (at the moment this is just a block colour to the left, but this will change).
Even if I created multiple divs so it was as if i had 3 ‘body’s, and assigned a different repeating background image to each one, would they not overlap?
Will the lack of text be an SEO issue if every image has alternative text?
Its hard to describe the problem with the page in IE7. The table cells seem to be all over the place.
The easiest thing is to go to http://ipinfo.info/netrenderer/index.php
and then paste in http://tfproperty.co.uk/gardens/index.html in the text box and set the drop down menu to Internet Explorer 7.
Thanks a lot

Horizontal Spry Menu doesn't display correctly in browser. Displays correctly in live view and prev

Hello,
I am new to web building and am having trouble with my Spry menu. It won't display correctly.
www.denverphotographics.com
Please Help!!
Thanks,
Rob

#1 Upload your Spry Assets folder to your remote server. The necessary CSS & JavaScript files are 404 not found. That's why your menu looks un-styled.
#2 Loud, gratuitous, unsolicited music on web sites is a very bad idea. It forces a lot of people to click away from your site and never return. It so happens I was listening to other media when I clicked on your site. That cacophony of competing noise was not the least bit enjoyable.
Nancy O.

Spry Vertical Menu does not display properly when uploaded to server.

I am using Dreamweaver CS5 Version 11.0 Build 4909 on Windows XP. The website I am working on is displaying the ordered list incorrectly. The drop down submenus are not lined up underneath each other.
So I did a basic one and uploaded it to the server and had the same outcome. Locally it looks fine but uploaded to the hosting server not fine. Below is the code from the document called deleteme.html. I am new to all this so I apologize if this seems basic. Thanks for your help in advanced.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<link href="SpryAssets/SpryMenuBarVertical.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="container">Content for id "container" Goes Here
<ul id="MenuBar1" class="MenuBarVertical">
    <li><a class="MenuBarItemSubmenu" href="#">Item 1</a>
      <ul>
        <li><a href="#">Item 1.1</a></li>
        <li><a href="#">Item 1.2</a></li>
        <li><a href="#">Item 1.3</a></li>
      </ul>
    </li>
    <li><a href="#">Item 2</a></li>
    <li><a class="MenuBarItemSubmenu" href="#">Item 3</a>
      <ul>
        <li><a class="MenuBarItemSubmenu" href="#">Item 3.1</a>
          <ul>
            <li><a href="#">Item 3.1.1</a></li>
            <li><a href="#">Item 3.1.2</a></li>
          </ul>
        </li>
        <li><a href="#">Item 3.2</a></li>
        <li><a href="#">Item 3.3</a></li>
      </ul>
    </li>
    <li><a href="#">Item 4</a></li>
</ul>
</div>
<script type="text/javascript">
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
</script>
</body>
</html>

Hello all,
Thanks to everyone who replied to my post. I have it working now but I have other issues that I will post separately.
Here was my thought process and you can tell me if I am right or wrong. I was working with multiple pages that I was using Spry. I had only one folder set that all the Spry Assets were being saved into. My thinking was that they were getting over written. So I deleted the folder and re-built the page. When I deleted Spry Assets folder it showed me I had 6 pages linked to the Spry Assets folder. I also deleted my Spry Assets folder on my hosting server....thought I would really start from scratch. When I went to upload the files I created a SpryAssets folder and what I realized I had originally put a space between the y and a of the folder name. So I am not sure if the elements in the Spry Assets folder were getting over written or it was because I had a space in the folder name. Thanks again, Mike

Menu bar not displaying properly

On boot-up I am have a recurring problem. About 80% of the time I login to my account (1 user, auto logs in on startup), several menu bar icons do not load. This includes 3rd party icons and 2nd party icons (built-in). It's difficult to compare the menu bar with everything loaded properly and when some things are missing because I can't look at both at once =/ . The noticeable absences include lack of battery status icon, wifi connectivity icon, and iStat menus CPU usage. Even when I go to System Preferences to make sure that it says "Show ____ status in menu bar" is checked, and when I uncheck and recheck it, nothing happens. Oftentimes I just have to log out and log back in, however it usually doesn't work. Any ideas as to what might be causing this.

The menu bar extras are handled by SystemUIServer, which evidently is having a problem with something you have installed. While it seems to be more robust in Leopard than it was in earlier versions of Mac OS, it can still choke up on third party things (it used to choke even on some Apple menu bar extras). First take a look in your startup items, and see what, if anything, is there and loading menu bar extras, make a note of what it is so you can add it back later, and delete it.
Then try deleting the preference list for SystemUIServer:
/Users/yourname/Library/Preferences/com.apple.systemuiserver.plist
and also the cache file for it:
/Users/yourname/Library/Preferences/ByHost/com.apple.systemuiserver.0017f20dca84 .plist
Log out and back in. Now go to the Apple items and re-enable the ones you need. Run for awhile and restart. Next add ONE of the third-party items back and see how things go. Each time you restart put another item back. You ought to eventually figure out which one is causing the problem. You'll have to learn to live without it, or check to see if the program that has it has an updater for Leopard.
Francine
Francine
Schwieder

Spry table does not display properly in Explorer 10

I have set up a web page including a Spry table which works great in all browsers EXCEPT Explorer 10. Does anyone know how to fix this?
http://jarrettrifles.com/Jarrett2012-website/pet-calibers.html
Here's how it looks in Explorer 10:
This is how it should display (from Chrome):

Hello,
hm, there is no problem in my IE 10. Spry works fine - in my case even without using compatiblity mode - (see screenshot, with IE 10 Info):
BUT you should consider - I quote from different contributions of the forum - "Spry has been deprecated and is no longer officially supported by Adobe" and: "Spry framework related examples available here: http://adobe.github.com/Spry/samples/ or use jQuery."
Hans-Günter

Horizontal Spry Menu displays incorrectly in Explorer

I looked in other discussions to find an answer to this, but I can't find the right answer.
My issue is that my Horizontal Spry Menu Bar, which displays correctly in Firefox and Chrome, displays vertically and on the left side of the page in Explorer.
I had a heck of a time getting the Menu Bar to work at all, so I'm sure there are issues in the coding, but don't know what they are.
Any help is appreciated.
Jean
jeanrivard.com
jeanrivard.com/vo

This appears to have worked. Thank you Gramps!
Jean

Spry horizontal menu's not displaying right in IE9

Presently I'm using Dreamweaver CS4. I have built a web site and placed a horizontal spry menu at the top of the web page. It is situated on the page just below a smaller non-spry horizontal menu.    In IE9, the menu appears above and to the right of this smaller menu rather than in the location I want it to appear. What's more, in Dreamweaver the menu seems to float the upper right of the screen (I've attached a screen shot).   When I review the web site in IE 7, Firefox, Chrome, Opera, and Safari, the menu is correctly placed.
Can anyone help solve this issue? When I view the web page in IE9 and put it into IE7 mode, all is well. Not so in IE9 (or IE8 for that matter).
I'd appreciate direct email as well as answering it here to help others with my quandry. My direct email address:   [email protected].
Thank you!
This image shows you where the menu appears in Dreamweaver AND in IE9
This image shows you where the menu correctly displays in IE 7 (standard mode), Chrome, Firefox, Opera, and Safari.
The smaller navigation you see "Subscribe to Alerts" etc is controlled by the following code:
#secondarynav {
width: 475px;
margin: 0px 0px 0px 0px;
padding: 0px;
float: right;
/* height:20px; */
The entire page including these menus sits in a container (My Code):
#container {
width: 930px;
height:800px; /* changed from 775px */
margin: 0 auto;
border:1pt solid #c7a9a9;
background-color: #FFFFFF; /* added by WDM, 6/5/2012 to keep container white while page body is gray */
Control for Menu Bar: (My code)
#menubar1 ul{
          z-index:5000;
          margin:40px 20px 0px 0px;
LAYOUT INFORMATION: describes box model, positioning, z-order (Dreamweaver Code)
/* The outermost container of the Menu Bar, an auto width box with no margin or padding */
ul.MenuBarHorizontal
/* margin: 0; */
    margin:-45px 0px 0px 200px;
    padding: 0;
    list-style-type: none;
    font-size: 10pt; /* change from 100%, 12pt */
    cursor: default;
    width: auto;
    float:left;
          z-index: 5000;
/* Set the active Menu Bar with this class, currently setting z-index to accomodate IE rendering bug: http://therealcrisp.xs4all.nl/meuk/IE-zindexbug.html */
ul.MenuBarActive
    z-index: 1000;
/* Menu item containers, position children relative to this container and are a fixed width */
ul.MenuBarHorizontal li
    margin: 0;
    padding: 0;
    list-style-type: none;
    font-size: 9pt; /* change from 100%, 12pt */
    position: relative;
    text-align: left;
    cursor: pointer;
    width: 15em; /* change from 8em */
    float: left;
/* Submenus should appear below their parent (top: 0) with a higher z-index, but they are initially off the left side of the screen (-1000em) */
ul.MenuBarHorizontal ul
    margin: 0;
    padding: 0;
    list-style-type: none;
    font-size: 10pt;   /* change from 100%, 12pt */
    z-index: 1020;
    cursor: default;
    width: 13.0em;   /* change from 8.2em/14.2 */
    position: absolute;
    left: -1000em;
/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to auto so it comes onto the screen below its parent menu item */
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible
    left: auto;
/* Menu item containers are same fixed width as parent */
ul.MenuBarHorizontal ul li
    width: 14.2em;   /* change from 8.2em/14.2 */
/* Submenus should appear slightly overlapping to the right (95%) and up (-5%) */
ul.MenuBarHorizontal ul ul
    position: absolute;
    margin: 0 0 0 170px; /* change from -5% 0 0 80%; */
/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to 0 so it comes onto the screen */
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible ul.MenuBarSubmenuVisible
    left: auto;
    top: 0;

I'm not sure where you attached files (I have not seen a way to do that in the Forum), But I will try to speak generally and work with what you have posted.
My suspicion is that the negative top margin you have applied is messing things up a bit.
I also note that it is usually better to apply margins to a CONTAINER of an unordered list (which is what menus are made of), than to apply the margins to the ul itself. So, restore the margin: 0; to the ul.MenuBarHorizontal style selector and create an enclosing element that bears the margin:-45px 0px 0px 200px; though I would still reconsider the use of negative top margin.
It is entirely possible that this simple change will help.
Please post the HTML for the top of the <body> section, including the menu code.
Beth

My vertical Spry is not displaying properly in IE 8

I am working on my first website using Dreamweaver CS4 and my spry is not displaying properly over my flash photo gallery. It looks ok in Firefox (although the borders are missing on my submenu for "sheds tool list") but in IE 8 the submenus can't be seen. How can I correct this?
My website is www.toolshedstudio.com
Here's my css:
@charset "UTF-8";
/* SpryMenuBarVertical.css - version 0.6 - Spry Pre-Release 1.6.1 */
/* Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. */
LAYOUT INFORMATION: describes box model, positioning, z-order
/* The outermost container of the Menu Bar, a fixed width box with no margin or padding */
ul.MenuBarVertical
    margin: 0;
    padding: 0;
    list-style-type: none;
    font-size: 100%;
    cursor: default;
    width: 10em;
    border-top-style: none;
    border-right-style: none;
    border-bottom-style: none;
    border-left-style: none;
/* Set the active Menu Bar with this class, currently setting z-index to accomodate IE rendering bug: http://therealcrisp.xs4all.nl/meuk/IE-zindexbug.html */
ul.MenuBarActive
    z-index: 1000;
/* Menu item containers, position children relative to this container and are same fixed width as parent */
ul.MenuBarVertical li
    margin: 0;
    padding: 0;
    list-style-type: none;
    font-size: 100%;
    position: relative;
    text-align: left;
    cursor: pointer;
    width: 170px;
    border-top-style: outset;
    border-right-style: outset;
    border-bottom-style: outset;
    border-left-style: outset;
    border-top-width: thin;
    border-right-width: thin;
    border-bottom-width: thin;
    border-left-width: thin;
/* Submenus should appear slightly overlapping to the right (95%) and up (-5%) with a higher z-index, but they are initially off the left side of the screen (-1000em) */
ul.MenuBarVertical ul
    margin: -5% 0 0 95%;
    padding: 0;
    list-style-type: none;
    font-size: 100%;
    position: absolute;
    z-index: 1020;
    cursor: default;
    width: 8.2em;
    left: -1000em;
    top: 0;
/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to 0 so it comes onto the screen */
ul.MenuBarVertical ul.MenuBarSubmenuVisible
    left: 0;
/* Menu item containers are same fixed width as parent */
ul.MenuBarVertical ul li
    width: 8.2em;
DESIGN INFORMATION: describes color scheme, borders, fonts
/* Outermost menu container has borders on all sides */
ul.MenuBarVertical
    border: 1px none #CCC;
/* Submenu containers have borders on all sides */
ul.MenuBarVertical ul
    border: 1px solid #CCC;
/* Menu items are a light gray block with padding and no text decoration */
ul.MenuBarVertical a
    display: block;
    cursor: pointer;
    background-color: #000;
    padding: 0.5em 0.75em;
    color: #CCC;
    text-decoration: none;
/* Menu items that have mouse over or focus have a blue background and white text */
ul.MenuBarVertical a:hover, ul.MenuBarVertical a:focus
    background-color: #33C;
    color: #000;
    font-size: 100%;
/* Menu items that are open with submenus are set to MenuBarItemHover with a blue background and white text */
ul.MenuBarVertical a.MenuBarItemHover, ul.MenuBarVertical a.MenuBarItemSubmenuHover, ul.MenuBarVertical a.MenuBarSubmenuVisible
    background-color: #33C;
    color: #FFF;
SUBMENU INDICATION: styles if there is a submenu under a given menu item
/* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarVertical a.MenuBarItemSubmenu
    background-image: url(SpryMenuBarRight.gif);
    background-repeat: no-repeat;
    background-position: 95% 50%;
/* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarVertical a.MenuBarItemSubmenuHover
    background-image: url(SpryMenuBarRightHover.gif);
    background-repeat: no-repeat;
    background-position: 95% 50%;
BROWSER HACKS: the hacks below should not be changed unless you are an expert
/* HACK FOR IE: to make sure the sub menus show above form controls, we underlay each submenu with an iframe */
ul.MenuBarVertical iframe
    position: absolute;
    z-index: 1010;
    filter:alpha(opacity:0.1);
/* HACK FOR IE: to stabilize appearance of menu items; the slash in float is to keep IE 5.0 from parsing */
@media screen, projection
    ul.MenuBarVertical li.MenuBarItemIE
        display: inline;
        f\loat: left;
        background: #FFF;

Hi
You flash movie doesn't have the parameter wmode=transparent. If you set that, the menu bar will be on top.
<param name="wmode" value="transparent">
I hope this helps.
Ben

Horizontal Spry Menus are not showing up in ANY browser HELP!

www.tvnewsjunkie.com
I am a novice web designer and I need help!
The above site listed is the site I am currently working on. As you can see the menu bar...is not a menu bar at all but a long list of links along the left side.
HOWEVER, when I click on LIVE VIEW in DreamWeaver everything looks fine.
There should be 7 total menu bars with 7 Dropdown menu options each (except on the bottom menu bar which there will only be 4 I believe)
What am I doing wrong??

Thank you so much for your help!This matter is certainly closed.
I just want to add, however, that somehow my Spry Assets folder was placed somewhere outside of the rest of my files! no wonder I was confused.
Thank you again!
Grant
Date: Fri, 17 Dec 2010 23:43:25 -0700
From: [email protected]
To: [email protected]
Subject: Horizontal Spry Menus are not showing up in ANY browser HELP!
You have forgotten to upload the support files - SpryMenuBar.js and SpryMenuBarHorizontal.css - to the server.
Gramps
>

Horizontal Spry Menu appears as bullet point list in IE8 and below - fine in firefox, chrome and IE9

This one is breaking my brain! I have an horizontal spry menu bar in my website that renders correctly in all browsers except ie 8 and below where it appears like an unordered list - almost like no CSS had been applied at all. You can check out the site here http://www.webhance.com.au. The spry css looks like this:
@charset "UTF-8";
/* SpryMenuBarHorizontal.css - version 0.6 - Spry Pre-Release 1.6.1 */
/* Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. */
LAYOUT INFORMATION: describes box model, positioning, z-order
/* The outermost container of the Menu Bar, an auto width box with no margin or padding */
ul.MenuBarHorizontal
margin: 0;
padding: 0;
list-style-type: none;
font-size: 130%;
cursor: default;
width: auto;
float:right;
/* Set the active Menu Bar with this class, currently setting z-index to accomodate IE rendering bug: http://therealcrisp.xs4all.nl/meuk/IE-zindexbug.html */
ul.MenuBarActive
z-index: 1000;
/* Menu item containers, position children relative to this container and are a fixed width */
ul.MenuBarHorizontal li
margin: 0;
padding: 0;
list-style-type: none;
font-size: 100%;
position: relative;
cursor: pointer;
width: 150px;
float: right;
text-align:center;
font-family:"AvantGarde Bk BT";
/* Submenus should appear below their parent (top: 0) with a higher z-index, but they are initially off the left side of the screen (-1000em) */
ul.MenuBarHorizontal ul
margin: 0;
padding: 0;
list-style-type: none;
font-size: 100%;
z-index: 1020;
cursor: default;
width: 150px;
position: absolute;
left: -1000em;
/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to auto so it comes onto the screen below its parent menu item */
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible
left: auto;
/* Menu item containers are same fixed width as parent */
ul.MenuBarHorizontal ul li
width: 150px;
/* Submenus should appear slightly overlapping to the right (95%) and up (-5%) */
ul.MenuBarHorizontal ul ul
position: absolute;
margin: -5% 0 0 95%;
/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to 0 so it comes onto the screen */
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible ul.MenuBarSubmenuVisible
left: auto;
top: 0;
DESIGN INFORMATION: describes color scheme, borders, fonts
/* Submenu containers have borders on all sides */
ul.MenuBarHorizontal ul
border-right: 1px solid #9fe2fd;
text-align:center;
font-family:"AvantGarde Bk BT";
background-color:#4c859d;
color:#FFF;
/* Menu items are a light gray block with padding and no text decoration */
ul.MenuBarHorizontal a
border-right: 1px solid #9fe2fd;
display: block;
cursor: pointer;
background-color: #4c859d;
padding: 0.5em 0.75em;
color: #FFF;
text-decoration: none;
/* Menu items that have mouse over or focus have a blue background and white text */
ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus
background-color: #4c859d;
color: #9cc9a0;
/* Menu items that are open with submenus are set to MenuBarItemHover with a blue background and white text */
ul.MenuBarHorizontal a.MenuBarItemHover, ul.MenuBarHorizontal a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a.MenuBarSubmenuVisible
background-color: #4c859d;
color: #9cc9a0;
SUBMENU INDICATION: styles if there is a submenu under a given menu item
/* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal a.MenuBarItemSubmenu
background-image: url(SpryMenuBarDown.gif);
background-repeat: no-repeat;
background-position: 95% 50%;
/* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal ul a.MenuBarItemSubmenu
background-image: url(SpryMenuBarRight.gif);
background-repeat: no-repeat;
background-position: 95% 50%;
/* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal a.MenuBarItemSubmenuHover
background-image: url(SpryMenuBarDownHover.gif);
background-repeat: no-repeat;
background-position: 95% 50%;
/* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal ul a.MenuBarItemSubmenuHover
background-image: url(SpryMenuBarRightHover.gif);
background-repeat: no-repeat;
background-position: 95% 50%;
BROWSER HACKS: the hacks below should not be changed unless you are an expert
/* HACK FOR IE: to make sure the sub menus show above form controls, we underlay each submenu with an iframe */
ul.MenuBarHorizontal iframe
position: absolute;
z-index: 1010;
filter:alpha(opacity:0.1);
/* HACK FOR IE: to stabilize appearance of menu items; the slash in float is to keep IE 5.0 from parsing */
@media screen, projection
ul.MenuBarHorizontal li.MenuBarItemIE
display: inline;
float: left;
background: #FFF;
The HTML for the section looks like this:
<div class="header">
<ul id="MenuBar1" class="MenuBarHorizontal">
<li><a href="index.html" id=button1>Home</a></li>
<li><a class="MenuBarItemSubmenu" href="#">Services</a>
    <ul>
      <li><a href="design.html">Web Design</a>        </li>
      <li><a href="maintenance.html">Web Maintenance</a></li>
      <li><a href="social.html">Social Media</a></li>
    </ul>
</li>
<li><a href="portfolio.html">Portfolio</a></li>
<li><a href="contact.html">Contact</a>    </li>
</ul>
</div>
I really really need some help - hope someone out there can point me in the right direction :-)
Julie

Hi Gramps - thanks for getting back to me - I took advantage of your advice to others with some other issues I had and they worked a charm so I was really hoping to hear from you :-)
Unfortunately removing media="only screen and (min-width: 769px) from the css call didn't resolve the problem. Check it out on my index page www.webhance.com.au/index.html Any other ideas?
Cheers, Julester

Horizontal Spry Menu Breaks in IE6

I have created an horizontal spry menu using the spry widget
in DreamWeaver CS3. I would like the width of each menu item to
adjust to the text (width: auto;) and that works fine in current
browsers (FireFox, IE7, Opera, Netscape) but in IE6 the menu items
are displayed vertically instead of horizontally. As soon as I give
them a width, it displays appropriately in IE6, but that changes
the look. You can see the page in question at
http://www.inachordwebdesign.com/ccc/test.html
Is there any way to work around this problem with the older
IE versions?
Any help would be greatly appreciated! Please let me know if
I need to upload any code. This is one of my first posts, so I'm
not sure what all I need to post.
Thanks!

I have updated the Spry Assets as suggested, but still have
the same results. Removing the float:left for the menu bar doesn't
help with the item alignment in IE6 and actually introduces a
problem in the current version of Firefox, so that isn't the
problem either.
Any other thoughts? The only thing that seems to force the
menu bar to display horizontally in IE is to have fixed widths for
the list items in the unordered list (ul.MenuBarHorizontal li). As
soon as I change that from a defined width to auto, or remove the
width designation altogether, it falls back to a vertical
arrangement in IE6, though it works in all the more recent browsers
just fine. We'd rally prefer to let the list items size
automatically, but if there is no way around it, I'll have to try
to replicate that effect by assigning a different width to each
item. That will add a lot of extra code, unfortunately.
Thanks.

Help with a very simple horizontal Spry menu

Hi,
I’ve always received great help here and I’m sure that if I explain the issue I’m having properly I’ll get some good input.
This is to do with a very simple horizontal Spry menu, there’s no dropdown involved, only a color change on the rollover. The menu items are in a shade of blue, then on the rollover each menu item changes to a shade of red, the font color remains white for both.
What’s mentioned above works flawlessly, the problem I’m having is this … On the rollover when the menu block items turn red, I’m attempting to add a 1px border around the entire block, but when I do the block item seems to want to change its width and height slightly when it’s rolled-over. As I said, without the border it works perfect.
Any suggestions will be appreciated.

steve0308 wrote:
Hi,
I’ve always received great help here and I’m sure that if I explain the issue I’m having properly I’ll get some good input.
This is to do with a very simple horizontal Spry menu, there’s no dropdown involved, only a color change on the rollover. The menu items are in a shade of blue, then on the rollover each menu item changes to a shade of red, the font color remains white for both.
What’s mentioned above works flawlessly, the problem I’m having is this … On the rollover when the menu block items turn red, I’m attempting to add a 1px border around the entire block, but when I do the block item seems to want to change its width and height slightly when it’s rolled-over. As I said, without the border it works perfect.
Any suggestions will be appreciated.
You also have to apply the border to the 'a' css selector. If you just apply it to the 'a:hover' css selector then the tab will grow slightly bigger because its adding more width and height to the overall structure.

Horizontal spry menu style appears turned off when on the internet though can view it in live mode!?

The style of the horizontal spry menu seems as to have been turned off when on the web though is visible and functioning on CS4 Dreamweaver design and live views. I have styled the spry menu and can view it in the properties section though the style setting is there on the internet it looks as if the styles have turned off and appears unformatted vertically when it should be a cascading horizontal menu bar. Not sure where the error is, I have looked at the coding and as I'm not the most experienced with spry.....
this is the coding above the head.
<script src="../SpryAssets/SpryMenuBar.js" type="text/javascript">
<link href="../SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />

</script>
I have noticed that SpryMenuBarHorizontal.css doesn't appear in the spry assets folder, does this matter? (not sure how to insert into the assets menu). Any help would be greatly appreciated!

thanks for testing it. I'm not sure how to proceed though as the css file is in my local_sites/spry assets folder for the website. I've tried to point it to other (copies of SpryMenuBarHorizontal.css) and spry assets folder externally from the site and again internally in the root folder and seems to make little or no difference.
Your suggestion of what it should read,(sorry to sound so naive at all this) though would you mind giving a step-by-step guide on how to go about it? as I'm obviously missing something in the setup process.
thanks again for your help.

Horizontal spry menu dropdowns not displaying properly in IE7

Similar Messages

Maybe you are looking for