Spry Horizontal Menu causing site not to load using Firefox and Maverick OSX 10.9.2

Why does Spry Horizontal Menu cause site not to load using Firefox and Maverick OSX 10.9.2?

Your code is terribly malformed.
There are multiple body tags & erroneous tags that overlap your <head> and other content tags. Get those fixed first.
And you also have more than 1 doctype definition in the wrong place.
If my assumption is correct, I think each include file you're using has its own doctype, body, html & head definitions causing final PHP to render all these on your output page.
Run your site through W3 validator like Jon suggested earlier: [Invalid] Markup Validation of http://www.ambppct.org/ - W3C Markup Validator
Fix those and you should be good.

Similar Messages

Why is my published site not operational when using Firefox or IE?

The original problem I experienced had to do with the fact that my published site's navigation bar was totally missing on each page and replaced with a "period" as described by the following thread... http://discussions.apple.com/thread.jspa?messageID=9899999&#9899999
The weird thing is that this problem only exists when using IE or Firefox on a PC (at work). Site is 100% operational using Safari on a Mac (at home).
Thinking my iWeb files were corrupt, I uninstalled and reinstalled iWeb '08. After doing so, I republished my site. The good news: the nav bar is now present on each page and operational. The bad news: my photo pages and blog page have zero content other than the header banner and nav bar. Again, this problem only exists when accessing the published site using IE or Firefox on a PC. The site is fully operational and all photos/blog entries present when accessing the site using Safari on my Mac.
What gives? Did a recent iWeb update (intended for iWeb 09 users or intel-based macs) corrupt my iWeb '08 on my PowerBook G4?

Please note that Java and Javascript are not related. iWeb uses a lot
of Javascript, not Java. There may be some issues with the Javascript
generated by iWeb -- I don't know. If it seems to work for someone
and not for someone else then it is an issue at the browser end, not
the website end. Each browser may not be handling the Javascript in
exactly the same way. (You gotta love standards.)
Dave

Flex does not auto load in Firefox and Opera but works in IE

I am using the following wrapper for deploying my Flex application. It works fine when the files are local but when the files are deployed on the server, IE works fine but I only see a blank screen in firefox and opera. However if I right click and click play the application runs fine. I don't understand what I need to do to make the Flex application autorun in Firefox and Opera as it works on IE (on server and local) and all browsers (when local).
I would be grateful for any help. I am wantonly including flashVars in both the object and embed tags to get it to be read in all browsers. The problem seems to be play="true" does not seems to be honored in Firefox and Opera when the flash in on a server but works when it is local. I have also tried accessing the flash directly without a HTML wrapper but the same problem happens only in firefox and opera but works in IE.
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
           id="DistributorWarehouse" width="100%" height="100%"
   codebase="http://fpdownload.macromedia.com/get/flashplayer/current/swflash.cab">
   <param name="movie" value="/public/DISTRIBUTORWAREHOUSE.SWF" />
   <param name="quality" value="high" />
   <param name="bgcolor" value="#869ca7" />
   <param name="allowScriptAccess" value="sameDomain" />
   <param name="flashVars" value="CustNo=0000000004&Distp=2&Distfl=4&Distsl=0020&vkorg=GDMI&vtweg=CM&empl=X"/>
   <embed src="/public/DISTRIBUTORWAREHOUSE.SWF" bgcolor="#869ca7"
    width="100%" height="100%" name="DistributorWarehouse" align="middle"
    play="true"
    loop="false"
    quality="high"
    flashVars="CustNo=0000000004&Distp=2&Distfl=4&Distsl=0020&vkorg=GDMI&vtweg=CM&empl=X"
    allowScriptAccess="sameDomain"
    type="application/x-shockwave-flash"
    pluginspage="http://www.adobe.com/go/getflashplayer">
   </embed>
</object>

I found the cause of the problem. The server was compressing the swf file to reduce bandwidth and setting Content-Encoding: gzip. This means that Firefox and Opera receive the file but you have to right and click play to play the file or do a refresh. The solution is to change the server settings not to compress swf files. However I cannot understand why it should work in IE but not firefox or opera.

Spry Horizontal menu bar borders not showing in IE6/IE 7 but ok in Mozilla!

I am hoping someone can help me! I have built a spry menu
with CS 3 and have altered the CSS file to customise colours etc.
the problem I am encountering is that I have specified white
borders around the menus items and sub menus which look perfectly
fine in Mozilla Firefox but when I check IE 6 & 7 the borders
have disappeared! I am hoping someone you may have a workaround or
any reason this might happen.
this is the CSS
@charset "UTF-8";
/* SpryMenuBarHorizontal.css - Revision: Spry Preview Release
1.4 */
/* 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: Arial, Helvetica, sans-serif;
font-size: 90%;
cursor: default;
width: 800px;
/* 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;
text-align: left;
cursor: pointer;
width: 100px;
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: 100%;
z-index: 1020;
cursor: default;
width: 8.2em;
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: 8.2em;
/* 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: 0.5px solid #FFFFFF;
border: 0.5px solid #FFFFFF;
/* Menu items are a light gray block with padding and no text
decoration */
ul.MenuBarHorizontal a
display: block;
cursor: pointer;
background-color: #b7a66d;
border: 0.5px solid #FFFFFF;
padding: 0.5em 0.5em;
color: #ffffff;
text-decoration: none;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: bold;
text-transform: lowercase;
/* 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: #c8bb89;
border: 0.5px solid #FFFFFF;
color: #FFFFFF;
/* 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: #c8bb8;
border: 0.5px solid #FFFFFF;
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.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;
/* 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;
f\loat: left;
background: #FFF;
.Nav {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;

I am having the same problems in IE7. I'm using the latest
version of everything (Spry 1.6.1 and javascript file version 0.12)
and at first I was having the problem on my drop down menus
appearing horizontal with all the correct styles but when I changed
the rule ul.MenuBarHorizontal ul to position: relative; the drop
downs appear vertical now but I have no beige border around the
whole ul anymore and I'm getting white space inbetween list items.
http://www.wusf.usf.edu/Header_Nav_Footer_newStyleSheet.cfm
so if anyone has any advice I'd much appreciate it. Also i'm
using 1px width on my borders no decimals.

Spry Horizontal Menu Bar not working in IE

Hi! I am new to this forum and new to Dreamweaver. I recently used Dreamweaver to build a website to display my digital portfolio. I am not very good at this and don't understand much of this works. I inserted a spry horizontal menu bar for my navigation. I did change the original set up to have the background the colors I wanted and I also changed the size so it would go across the top of my page. This looks fine in Firefox and Safari but in Internet Explorer the bar displays vertically, which does not look good. Can anyone look at my code and tell me how I can fix this problem?
I appreciate any help I can get with this as I have tried everything I know.
This is the link to my site: www.digitaldesignsbymargee.com

Hi! I am new to this forum. I inserted a spry horizontal menu bar for my navigation but i cannot able veiw a horizontal menubar in IE though it works fine in google chrome and Mozila. Can anyone look at my code and tell me how I can fix this problem?
w@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: 0px;
    padding: 0px;
    list-style-type: none;
    font-size: 100%;
    cursor: default;
    width: auto;
/* 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: 0px;
    padding: 0px;
    list-style-type: none;
    font-size: 100%;
    position: relative;
    text-align: left;
    cursor: pointer;
    width: 14em;
    float: left;
    border-color: white;
    border-left-style: solid;
    border-left-width: 1px;
    border-right-style: none;
    border-right-width: 1px;
/* 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: 14em;
    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: 14em;
/* Submenus should appear slightly overlapping to the right (95%) and up (-5%) */
ul.MenuBarHorizontal ul ul
    position: absolute;
    margin: 0 0 0 99%;
/* 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
/* Menu items are a light gray block with padding and no text decoration */
ul.MenuBarHorizontal a
    display: block;
    cursor: pointer;
    padding: 0.9em 0.75em;
    color: white;
    font-size: 14px;
    font-weight: bold;
    font-family: Arial, Helvetica, Verdana, sans-serif;
    text-decoration: none;
    color: white;
/* Menu items that have mouse over or focus have a blue background and white text */
ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus
    color: #FFF;
/* 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
    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.MenuBarHorizontal a.MenuBarItemSubmenu
    background-image: url(SpryMenuBarDown.gif);
    background-repeat: no-repeat;
    background-position: 10px 85%;
/* 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
    b/ackground-image: url(SpryMenuBarDownHover.gif);
    background-repeat: no-repeat;
    background-position: 10px 85%;
/* 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
    b/ackground-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;
     /* I have updated and checked the code as mentioned in the forum topic but still it is not working */
ul.MenuBarHorizontal a:visited { color: white;}
ul ul a { background-color: #436d9c; }
ul a.MenuBarItemHover { background-color: #19385a; }
ul .MenuBarItemSubmenu ul li a { border: none; }
ul a.MenuBarItemSubmenu.MenuBarItemSubmenuHover { background-color: #19385a; }
ul.MenuBarSubmenuVisible li { border: none; }
I appreciate any help I can get with this as I have tried everything I know.

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

Spry horizontal menu - IE6 issue with drop downs not displaying correctly

Hello everyone,
I have an IE6 display issue with a spry horizontal menu on a website I recently developed and hope someone can help me sort it out.
You can see the live site here: www.callumstrust.org
This is a site for a new charity so obviously I'm very keen to get it sorted out as soon as I can. The easiest way to view the problem is to either view it in IE6, or view it IE8, turn on the Developer Tools and change the Document Mode to 'Quirks mode'. you'll immediately see that the sub-menus on the header menu display permanently as a full width list, and not as a drop down menu as they should.
I think the problem lies with the 'width' being set to 'auto' in the ul.MenuBarHorizontal li style. However, I can't seem to get the style right to display the menu on a single line with enough space for text of all the menu items.
Can anyone advise on how to sort this out? I've not posted any code here: let me know if you need this and I'll happily post it.
Many thanks,
chris.

Hello everyone,
I have an IE6 display issue with a spry horizontal menu on a website I recently developed and hope someone can help me sort it out.
You can see the live site here: www.callumstrust.org
This is a site for a new charity so obviously I'm very keen to get it sorted out as soon as I can. The easiest way to view the problem is to either view it in IE6, or view it IE8, turn on the Developer Tools and change the Document Mode to 'Quirks mode'. you'll immediately see that the sub-menus on the header menu display permanently as a full width list, and not as a drop down menu as they should.
I think the problem lies with the 'width' being set to 'auto' in the ul.MenuBarHorizontal li style. However, I can't seem to get the style right to display the menu on a single line with enough space for text of all the menu items.
Can anyone advise on how to sort this out? I've not posted any code here: let me know if you need this and I'll happily post it.
Many thanks,
chris.

Spry horizontal menu- not showing in some browsers

my spry horizontal menu is showing up as a vertical list in
some of our viewers computers. can i adjust the basic html so that
if spry does not show up on someone's computer, a more basic
horizontal table will show?

Thank you all for the answers.
Can pop menu magic work with image maps?
Back in the day I created several drop down menus in Dreamweaver CS2 by adding behaviors to image maps. I liked that I pretty much could drop a menu from any point on an image.
Example: http://www.bettendorfdental.com/
So I have been going back to my old laptop and CS2 every time I needed to change something in these menus, but that was very inefficient.
My client wants the top banner to be in one image, with customized buttons that share the background of the logo and business name.
I have been customizing the topaz template in pop up magic but what the client reallly wants is to have the tab images as part of the larger image. So ideally there wouldn't be any text in the top menu and only the drop down part would show up.
http://www.monicagraphicdesign.com/Bill/spiritual.html
For people like me, who do not write or understand code, even searching a knowledge base can be a challenge because we do no know what to type in the search box! I am glad to learn Project Seven offers one on one support.
Another challenge is that the client manages his own site and uses Front Page on a PC (and I have neither) so I don't even know if he can attach the stylesheets to every page where he inserts the menu.

Spry Horizontal Menu not displayed correctly in Internet Explorer 6

Hello to everyone. I'm creating a website using David's tutorial. My Spry Horizontal Menu is correctly shown in Dreamweaver Live View, Firefox10 but not in IE6. It happears at the bottom of the page. Any advise? Thanks much in advance. Cecilia

Hello Cecilia,
please have a look here: http://gs.statcounter.com/#browser_version-ww-monthly-201201-201202-bar where you can see that this browser (IE6 ) is no longer in use and might not be used anywhere anymore.
And so you should not worry about this. But if it does please send a link to your website in question.
... and what's about the newer IE?
Hans-Günter

Spry Horizontal Menu problem in IE

I am a new Dreamweaver user and utilized the Spry horizontal
menu in a site that I am redesigning. The menus look great in
firefox, but do not load properly in internet explorer. I am hoping
to be able to resolve this problem as the menus look so good in
firefox.
You can view the page at
http://www.greenlevel.abcchicagolimo.com

Hi clead16,
What do you mean by "do not load properly in internet
explorer"? I checked the site in IE6 and IE7 and it the menus
render OK.
You may want to also take a look at the
Menu
Samples and
centering
a horizontal menu
on Adobe labs.
-- Florin

Another SPRY horizontal menu problem with IE7

I posted this before, with no responses, but I think
I've narrowed it down to a CSS response problem with IE7.0. If you
view the attached link in Firefox or Opera, the menu background
color responds correctly on the drop downs. In IE7, the
background-color is ignored, causing the menu to be translucent
and, uh, ugly. Has anyone else had an issue with the
background-color CSS attribute in the SPRY horizontal menu css not
working?
HELLLLLP! and, uh, Thanks,
Karl
Prototype
link using spry, css, ajax sprites and other magic.

>>
Regrettably, the silence from the forum has been deafening.
I'm not sure if folks are just wary of SPRY and AJAX issues right
now because they're so new or if it's the summer heat
>>
guess it´s all of that :-) But folks visiting these more
"general" Dreamweaver forums are not necessarily Spry experts
respectively might not even be interested in that -- you´ll
certainly get more response when posting Spry related questions in
the
Spry
forums @ Adobe Labs

Spry horizontal menu perfect on Mac, screwy on PC

I created a Spry Horizontal menu for http://www.ljwdesign.com/clients/TotalFab.
The only edit I made to http://www.ljwdesign.com/clients/TotalFab/SpryAssets/SpryMenuBarHorizontal.css was to add the positioning of the <div> container that holds the menu. You'll see it as the first thing in the CSS document. I left the rest of the code exactly the way Dreamweaver created it.
My main CSS file is http://www.ljwdesign.com/clients/TotalFab/css/mainstyle.css but there is nothing in that file that styles the Spry menu.
In Firefox and Safari on my Mac, it works EXACTLY as expected - exactly how I want it to work.
In IE 6, forget it - doesn't work, but I don't care at the moment.
In IE 7, the drop-downs won't go past the bottom of the table cell the menu is in. Also, once you mouseover then mouseout of any of the top level menu items (there are three), the text for the other two disappears until you mouseover them again.
In Chrome and Firefox, the menus drop just fine and the text stays visible, but the longest of the three drop-downs (the gallery) disappears behind the Flash object below the menu. This does not happen in any Mac browsers.
I've tried playing with z-index everywhere, but nothing helps. I even increased the z-indexes in the Spry CSS file to 9999; didn't make a darn bit of difference.
If anyone knows how to fix this, I'd really appreciate the heads up. Until I get this working in all the above-mentioned IE browsers, I don't dare touch the CSS code to make it match the rest of the site stylistically. Thanks!
Lynda Williams
LJWDesign.com

There's been a recent post and solution to menus that drop below Flash, just in the last two days.
I'll see if I can find it for you. Here it is: http://forums.adobe.com/message/261033#261033
Beth

Spry horizontal menu becomes vertical menu

In IE my spry horizontal menu becomes vertical but is
stretched to the same width as the horizontal menu is suppose to
be? Any ideas?

If horizontal is turning vertical, I have a feeling what is happening is that when you publish it, it's not connected to any style sheet -- or you have the style sheets in the wrong order.
Remember, with CSS (Cascading Style Sheets) the last stylesheet trumps the earlier one. That's perfectly OK if there are no conflicts, but there may be some that can cause problems.
Thus, you'd be looking for:
<link href="styles.css" rel="stylesheet" type="text/css">
<link href="navigation.css" rel="stylesheet" type="text/css">
If navigation.css is first, styles.css may be rewriting your styles for your spry navigation.
Now, I'm going to throw you a curve. Spry has been discontinued and it "going away." I recommend you learn how to make your own navigation and Spry is usually used for drop-down navigation. You can do that in straight HTML and CSS.
Take a look at my last reply in this forum discussion for a bunch of pretty cool "do it yourself" navigation tutorials.

Cell column width using spry horizontal menu

Hi
Trying to set the cell column width using DWCS5.5 Spry Horizontal menu.
view-source:http://www.roatan.ws/spry-menu-bob
I used help to get directions and I think I did it correctly but I do not know for sure.
/* Menu item containers are same fixed width as parent */
ul.MenuBarHorizontal ul li
          background-color: #356A68;
          float: none;
          background-color:transparent;
          height: auto;
          width: auto;
Trying to clean up my site and get things working an looking right.
Any suggestions appreciated
bob

Spry menus do not contain any table columns or cells.    They are just lists <ul> <li> tags styled with CSS.
ul.MenuBarHorizontal li
    margin: 0;
    padding: 0;
    list-style-type: none;
    font-size: 12px;
    position: relative;
    text-align: center;
    cursor: pointer;
    width: 8em; /**adjust top-menu width**/
    float: left;
    text-decoration: underline;
ul.MenuBarHorizontal ul
    margin: 0;
    padding: 0;
    list-style-type: none;
    font-size: 10px;
    z-index: 1020;
    cursor: default;
    width: 8em; /**adjust sub-menu width**/
    position: absolute;
    left: -1000em;
    background-color: #356A68;
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
http://alt-web.com/
http://twitter.com/altweb
http://alt-web.blogspot.com/

How do I make the menu title a different color when it is the active menu in Spry horizontal menu?

How do I make the menu title a different color when it is the active menu in Spry horizontal menu?
Dreamweaver CS5.5
Apple OS X.6.8
View site at: http://dorsay-easton-indian-law.com/staging/index.html
Steps:
1. Click link to land on Home page
2. View Home link in Spry horizontal navigation menu
Actual:
Home menu title is the same color as all of the others.
Expected:
The title of the active menu is color: #FFC.
I was hoping that a:active would give me this functionality, but that's not how it is described. Any suggestions are welcome!

Nothing I have tried in the template makes the BODY tag editable. That's why I'm wondering how to disconnect the template from the individual pages. Adding an ID to each body tag is a prerequisite of the how-to page you supplied.
You don't make the <body> tag editable in a Template.
You make attributes of the <body> tag editable.
Don't disconnect the Template from the child pages.
Specify editable tag attributes in a template
http://help.adobe.com/en_US/dreamweaver/cs/using/WScbb6b82af5544594822510a94ae8d65-7aa3a.h tml
In the Template:
Select the <body> tag (either in the Tag selector or click inside the <body> tag in Code View)
Modify > Templates > Make Attribute Editable
Select ID from the Attribute dropdown menu
If there's no existing ID attribute then click Add and type ID into the next dialogue box
Attribute: ID
Check the box to "Make attribute editable"
Enter anything into the Label field as a default e.g. foo
OK
Dreamweaver will change the <body> tag to read <body id="@@(foo)@@"....
Now the ID is editable
Save the Template and update the child page
In each child page:
Modify > Template Properties
Select the id attribute from the list (it's probably the only one listed)
Change its name in the box to whatever name matches your CSS rule for the active state for that page
OK
Save
Upload

Spry Horizontal Menu causing site not to load using Firefox and Maverick OSX 10.9.2

Similar Messages

Maybe you are looking for