I want my spry horizontal accordian in explorer content table to be closed and also wont align left
I've tried everything. my accordian will stay closed when landing on the page in all browsers except explorer and also I can't get the tab text to align left no matter what I do.
Here is the page http://www.lohud.com/legacy/advertising/mediakit/tjn_content_guide.html
Please help I've been at this for many many hours.
Here is my code
<!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"><!-- InstanceBegin template="/Templates/Main.dwt" codeOutsideHTMLIsLocked="false" -->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- InstanceBeginEditable name="doctitle" -->
<title>The Journal News Media Group</title>
<!-- InstanceEndEditable -->
<style type="text/css">
body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
text-align: center;
background-image: url(images/backdrop.png);
background-repeat: no-repeat;
background-position:top center;
background-color: #77787B;
.pageLable {
font-family: arial;
font-size: 18pt;
color: #00adf0;
line-height: 25pt;
vertical-align: middle;
padding-top: 10px;
.pageLableTagline {
font-family: arial;
font-size: 18pt;
color: #A7A9AC;
.BlueText {
color: #00adf0 !important;
.descriptionFont {
font-family: arial;
font-size: 10pt;
line-height: 14pt;
.labelSub {
font-family: arial;
font-size: 14px;
color: #00adf0;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
.content12 {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
.fontNinePoint {
font-family: Arial, Helvetica, sans-serif;
font-size: 9px;
.white {
color: #FFF !important;
</style>
<!-- InstanceBeginEditable name="head" -->
<script src="SpryAssets/SpryAccordion.js" type="text/javascript"></script>
<link href="SpryAssets/SpryAccordion.css" rel="stylesheet" type="text/css" />
<!-- InstanceEndEditable -->
<style type="text/css">
a:link {
text-decoration: none;
a:visited {
text-decoration: none;
a:hover {
text-decoration: underline;
a:active {
text-decoration: none;
body,td,th {
font-family: Arial, Helvetica, sans-serif;
font-size: 15px;
h1,h2,h3,h4,h5,h6 {
font-family: Arial, Helvetica, sans-serif;
h6 {
font-size: 8px;
color: #000;
h4 {
font-size: 12px;
.fontsmall {
font-size: 9pt;
</style>
<style type="text/css">
</style>
<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
</head>
<body leftmargin="0">
<table width="100%" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td><table width="906" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td width="126" rowspan="3"><a href="index.html"><img src="images/Logo_Nav_Black.jpg" alt="The Journal News Media Group" width="126" height="132" border="0" longdesc="index.html" /></a></td>
<td width="780" height="30" align="right" valign="top"><table width="657" border="0" align="right" cellpadding="0" cellspacing="0">
<tr>
<td width="61" height="32" align="right" valign="middle"> </td>
<td width="372" align="right" valign="middle"><a href="http://www.linkedin.com/groups/Journal-News-Media-Group-4828545?trk=myg_ugrp_ovr" target="_new"><img src="images/linkedin.png" alt="linkedin" width="16" height="16" border="0" /></a></td>
<td width="37" align="center" valign="middle"><a href="http://www.facebook.com/pages/The-Journals-News-Media-Group/124999397672489" target="_new"><img src="images/facebook.png" alt="facebook" width="8" height="16" border="0" /></a></td>
<td width="90" align="center" valign="middle" nowrap="nowrap" class="white" style="font-size:12px"><strong><a href="newsletter.html" class="white">newsletter</a></strong></td>
<td width="24" align="center" valign="middle" class="white" style="font-size:12px"><img src="images/dot.png" alt="" width="9" height="9" /></td>
<td width="90" align="center" valign="middle" nowrap="nowrap" class="white" style="font-size:12px"><strong> <a href="contact.html" class="white">contact us </a></strong></td>
</tr>
</table></td>
</tr>
<tr>
<td align="right" valign="top"><table width="657" border="0" align="right" cellpadding="0" cellspacing="0">
<tr>
<td width="75" bgcolor="#000000"> </td>
<td width="369" bgcolor="#000000"><ul id="MenuBar1" class="MenuBarHorizontal">
<li class="MenuBarItemSubmenu"><a href="#">About</a>
<ul>
<li><a href="our_brand.html">Our Brand</a></li>
<li><a href="our_audience.html">Our Audience</a></li>
<li><a href="giving_back.html">Giving Back</a></li>
<li><a href="careers.html">Careers</a></li>
</ul>
</li>
<li><a href="digital.html" >Digital</a> </li>
<li><a href="#">Print</a>
<ul>
<li><a class="MenuBarItemSubmenu" href="#">Journal News</a>
<ul>
<li><a href="tjn_content_guide.html">Content Guide</a></li>
<li><a href="tjn_print_reach.html">Print Reach</a></li>
</ul>
</li>
<li><a href="special_sections.html">Special Sections</a></li>
<li><a href="creative_ad_units.html">Creative Ad Units</a></li>
<li><a href="zoning_guide.html">Zoning Guide</a></li>
</ul>
</li>
<li><a href="events.html">Events</a>
<ul>
<li><a href="golf_show.html">Golf Show</a></li>
<li><a href="theater_awards.html">Metropolitan High School Theater Awards</a></li>
<li><a href="rockland.html">Rockland Scholar Athlete</a></li>
<li><a href="ray_rice_day.html">Ray Rice Day</a></li>
<li><a href="cookie_swap.html">Cookie Swap</a></li>
<li><a href="give_grow.html">Give & Grow</a></li>
</ul>
</li>
<li><a href="#"> Specs</a>
<ul>
<li><a href="print_specs.html">Print Specs</a></li>
<li><a href="digital_specs.html">Digital Specs</a></li>
<li><a href="deadlines.html">Deadlines</a></li>
<li><a href="terms_conditions.html">Terms & Conditions</a></li>
</ul>
</li>
</ul></td>
</tr>
<tr> </tr>
</table></td>
</tr>
<tr>
<td height="70" align="right" valign="top"> </td>
</tr>
</table>
<table width="906" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td height="40"> </td>
</tr>
</table></td>
</tr>
</table>
<!-- InstanceBeginEditable name="MainTable" -->
<table width="906" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td height="300" valign="top" bgcolor="#FFFFFF"><table width="906" border="0" align="center" cellpadding="10" cellspacing="0">
<tr>
<td height="57" align="left" valign="top" class="pageLable">Content Guide <span class="pageLableTagline">lohud.com</span></td>
</tr>
</table> <div id="Accordion1" class="Accordion" tabindex="0">
<div class="AccordionPanel">
<div class="AccordionPanelTab">News</div>
<div class="AccordionPanelContent">
<table width="864" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td width="684" align="left" valign="top" class="descriptionFont"><strong>Content: </strong>The latest headlines, by county, updated continuously to keep readers informed of breaking news as it happens. Here is where they go to first for the latest on issues of particular importance to area residents: crime, politics, business, education, health and New York State news.<br />
<strong><br />
Advertiser Advantage:</strong> Benefit from prime positioning and high visibility on one of the most frequently<br />
visited pages on lohud.com.</td>
<td width="180" align="right"><img src="images/digital/contentguide/lh-news.jpg" alt="News" width="180" height="154" border="0" /></td>
</tr>
</table>
</div>
</div>
<div class="AccordionPanel">
<div class="AccordionPanelTab">Tax Watch</div>
<div class="AccordionPanelContent">
<table width="864" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td width="685" align="left" valign="top" class="descriptionFont"><strong>Content: </strong>Money and taxes. It’s a passion topic that many area residents have a keen interest in following. Our standing Tax Watch feature on LoHud.com keeps them in-the-know with watchdog columns on government accountability, blogs from local tax experts, timely articles and columns.<br />
<strong><br />
Advertiser Advantage:</strong> Ideal environment for financial, banks, real estate, and business.</td>
<td width="179" align="right"><img src="images/digital/contentguide/lh-taxwatch.jpg" alt="Tax Watch" width="179" height="155" border="0" /></td>
</tr>
</table>
</div>
</div>
<div class="AccordionPanel">
<div class="AccordionPanelTab">Communities</div>
<div class="AccordionPanelContent">
<table width="864" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td width="684" align="left" valign="top" class="descriptionFont"><strong>Content: </strong>Sixteen ultra-local homepages dedicated to the unique villages, towns and cities of Westchester County, with daily updates, photos and neighborhood conversations designed to involve <br />
and engage readers — and have them returning regularly for updates.<br />
<strong><br />
Advertiser Advantage: </strong>Ideal for smaller advertisers looking to reach their best potential customers<br />
within targeted geographic areas.</td>
<td width="181" align="right"><img src="images/digital/contentguide/lh-community.jpg" alt="Communities" width="179" height="158" border="0" /></td>
</tr>
</table>
</div>
</div>
<div class="AccordionPanel">
<div class="AccordionPanelTab">Living Here</div>
<div class="AccordionPanelContent">
<table width="865" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td width="686" align="left" valign="top" class="descriptionFont"><strong>Content:</strong> Awarded “First Place Winner/Niche Website” by the 2012 New York Associated Press! Offers an insider’s look at Lower Hudson Valley real estate for residents looking to buy, sell up, downsize or plan a renovation.<br />
<strong><br />
Advertiser Advantage:</strong> Ideal for real estate, financial, and home-related businesses. Provides a locally driven and highly targeted environment for your message.</td>
<td width="179" align="right"><img src="images/digital/contentguide/lh-livinghere.jpg" alt="News" width="179" height="155" border="0" /></td>
</tr>
</table>
</div>
</div>
<div class="AccordionPanel">
<div class="AccordionPanelTab">Sports</div>
<div class="AccordionPanelContent">
<table width="864" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td width="684" align="left" valign="top" class="descriptionFont"><strong>Content:</strong> Comprehensive and updated frequently to keep fans up to date with the latest action from high school, college, major-league teams. Featuring game results, profiles of local athletes, perspective, commentary and blogs for reader interaction.<br />
<strong><br />
Advertiser Advantage:</strong> Action-packed environment for auto aftermarket, sporting goods, financial,<br />
men’s interests, orthopedic and physical therapy businesses.</td>
<td width="180" align="right"><img src="images/digital/contentguide/lh-sports.jpg" alt="Sports" width="180" height="158" border="0" /></td>
</tr>
</table>
</div>
</div>
<div class="AccordionPanel">
<div class="AccordionPanelTab">Blogs</div>
<div class="AccordionPanelContent">
<table width="864" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td width="683" align="left" valign="top" class="descriptionFont"><strong>Content:</strong> Can we talk? We sure can…and readers love to hear what our writers and editors have<br />
to say. Our lively Blogs site is where they can turn to for conversation and opinion on all kinds of <br />
subjects — community, lifestyle & entertainment, news, opinion and sports, including our extremely popular Yankees blog.<br />
<strong><br />
Advertiser Advantage:</strong> Benefit from prime positioning and visibility on highly targeted pages that offer maximum impact and response.</td>
<td width="181" align="right"><img src="images/digital/contentguide/lh-blogs.jpg" alt="News" width="181" height="157" border="0" /></td>
</tr>
</table>
</div>
</div>
<div class="AccordionPanel">
<div class="AccordionPanelTab">Multimedia</div>
<div class="AccordionPanelContent">
<table width="864" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td width="684" align="left" valign="top" class="descriptionFont"><strong>Content:</strong> A picture is worth a thousand words and this photo/video gallery keeps readers involved and engaged with compelling local photos from the week and informative feature videos on trending stories.<br />
<strong><br />
Advertiser Advantage:</strong> Ideal for retailers of all kinds, benefit from prime positioning and visibility on<br />
highly targeted pages.</td>
<td width="178" align="right"><img src="images/digital/contentguide/lh-multimedia.jpg" alt="Multimedia" width="178" height="157" border="0" /></td>
</tr>
</table>
</div>
</div>
<div class="AccordionPanel">
<div class="AccordionPanelTab">Life & Leisure</div>
<div class="AccordionPanelContent">
<table width="864" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td width="684" align="left" valign="top" class="descriptionFont"><strong>Content:</strong> The perfect complement to our daily “Life & Style” print section, it’s where readers go to be inspired and entertained! Featuring complete local restaurant and food coverage, weddings/engagement announcements, home & garden tips, movie & TV reviews, music and more.<br />
<strong><br />
Advertiser Advantage:</strong> Ideal weekly environment for restaurants, entertainment and leisure-related<br />
businesses.</td>
<td width="180" align="right"><img src="images/digital/contentguide/lh-lifeleisure.jpg" alt="Life and Leisure" width="180" height="158" border="0" /></td>
</tr>
</table>
</div>
</div>
<div class="AccordionPanel">
<div class="AccordionPanelTab">Opinion</div>
<div class="AccordionPanelContent">
<table width="864" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td width="684" align="left" valign="top" class="descriptionFont"><strong>Content:</strong> Everybody’s got one — and this is where it counts. Our Opinion page on LoHud.com is just <br />
that: opinions on the issues of the day, from our staff and from our readers, designed to inform, inspire and encourage interaction. Find editorials by our writers and editors, commentary, letters, editorial board surveys and more.<br />
<strong><br />
Advertiser Advantage:</strong> Benefit from prime positioning and visibility on highly targeted pages that offer maximum impact and response.</td>
<td width="178" align="right"><img src="images/digital/contentguide/lh-opinion.jpg" alt="Opinion" width="178" height="156" border="0" /></td>
</tr>
</table>
</div>
</div>
<div class="AccordionPanel">
<div class="AccordionPanelTab">Obituaries</div>
<div class="AccordionPanelContent">
<table width="864" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td width="684" align="left" valign="top" class="descriptionFont"><strong>Content:</strong> Comprehensive and complete, with death notices, memorials, touching tributes and <br />
convenient interactive features such as a search feature, free obituary alerts, one-click access to flowers and services, guest book signing and more.<br />
<strong><br />
Advertiser Advantages:</strong> Ideal environment for funeral homes, estate planners and florists.</td>
<td width="178" align="right"><img src="images/digital/contentguide/lh-obits.jpg" alt="Obituaries" width="178" height="154" border="0" /></td>
</tr>
</table>
</div>
</div>
</div>
<p> </p></td>
</tr>
</table>
<script type="text/javascript">
var Accordion1 = new Spry.Widget.Accordion("Accordion1",{ useFixedPanelHeights: false, defaultPanel: -1 });
</script>
<!-- InstanceEndEditable -->
<table width="906" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td height="19" align="center" valign="middle" bgcolor="#77307d" class="white" style="font-size:12px"> <a href="contact.html"><img src="images/contactAnAdvert.png" alt="Contact an advertising expert" width="336" height="18" border="0" /></a></td>
</tr>
<tr>
<td height="19" align="center" valign="middle" class="white" style="font-size:12px"><p><br />
1133 Westchester Avenue, Suite N-110, White Plains, NY 10604 <img src="images/dot.png" width="9" height="9" alt="dot" /> P: 914-694-5500</p>
<p> </p>
<p><a href="http://www.gannett.com/" target="_new"><img src="images/Gannett.png" alt="Gannett" width="130" height="18" border="0" /></a><br />
<br />
Copyright © 2013<a href="http://www.lohud.com/" target="_new" class="white"> www.lohud.com</a>. All rights reserved.<br />
Users of this site agree to the <a href="http://www.lohud.com/section/terms" target="_new" class="white">Terms of Service</a>, <a href="http://www.lohud.com/section/privacy" target="_new" class="white">Privacy Notice/Your California Privacy Rights</a>, and <a href="http://www.lohud.com/section/privacy#adchoices><http://www.lohud.com/section/privacy #adchoices" target="_new" class="white">Ad Choices</a> <br />
</p></td>
</tr>
</table>
<p> </p>
<table width="960" border="0" align="center" cellpadding="0" cellspacing="0">
<tr> </tr>
</table>
<p> </p>
<p> </p>
<script type="text/javascript">
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
</script>
</body>
<!-- InstanceEnd --></html>
It just wont align left ......This is my style sheet
@charset "UTF-8";
/* SpryAccordion.css - version 0.5 - Spry Pre-Release 1.6.1 */
/* Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. */
.Accordion {
overflow: hidden;
outline:none;
border-top-width: 0px;
border-right-width: 0px;
border-bottom-width: 0px;
border-left-width: 0px;
text-align: left;
.AccordionPanel {
margin: 0px;
padding: 0px;
font-family: Arial, Helvetica, sans-serif;
font-size: 12pt;
/* This is the selector for the AccordionPanelTab. This container houses
* the title for the panel. This is also the container that the user clicks
* on to open a specific panel.
* The name of the class ("AccordionPanelTab") used in this selector is not necessary
* to make the widget function. You can use any class name you want to style an
* accordion panel tab container.
* NOTE:
* This rule uses -moz-user-select and -khtml-user-select properties to prevent the
* user from selecting the text in the AccordionPanelTab. These are proprietary browser
* properties that only work in Mozilla based browsers (like FireFox) and KHTML based
* browsers (like Safari), so they will not pass W3C validation. If you want your documents to
* validate, and don't care if the user can select the text within an AccordionPanelTab,
* you can safely remove those properties without affecting the functionality of the widget.
.AccordionPanelTab {
margin: 0px;
padding: 2px;
cursor: pointer;
-moz-user-select: none;
-khtml-user-select: none;
text-align: left;
padding-left: 10px;
color: #000000;
background-color: #c0dff5;
border-bottom-width: 6px;
border-bottom-style: solid;
border-bottom-color: #FFF;
text-indent: 10px;
font-family: Arial, Helvetica, sans-serif;
font-size: 12pt;
/* This is the selector for a Panel's Content area. It's important to note that
* you should never put any padding on the panel's content area if you plan to
* use the Accordions panel animations. Placing a non-zero padding on the content
* area can cause the accordion to abruptly grow in height while the panels animate.
* Anyone who styles an Accordion *MUST* specify a height on the Accordion Panel
* Content container.
* The name of the class ("AccordionPanelContent") used in this selector is not necessary
* to make the widget function. You can use any class name you want to style an
* accordion panel content container.
.AccordionPanelContent {
overflow: auto;
outline:none
margin: 0px;
text-align: justify;
font-family: Arial, Helvetica, sans-serif;
font-size: 12pt;
padding-left: 10px;
padding-right: 10px;
height: 200px;
/* This is an example of how to change the appearance of the panel tab that is
* currently open. The class "AccordionPanelOpen" is programatically added and removed
* from panels as the user clicks on the tabs within the Accordion.
.AccordionPanelOpen .AccordionPanelTab {
background-color: c0dff5;
color: #666;
font-family: Arial, Helvetica, sans-serif;
font-size: 12pt;
/* This is an example of how to change the appearance of the panel tab as the
* mouse hovers over it. The class "AccordionPanelTabHover" is programatically added
* and removed from panel tab containers as the mouse enters and exits the tab container.
.AccordionPanelTabHover {
color: #999999;
background-color: c0dff5;
.AccordionPanelOpen .AccordionPanelTabHover {
color: #000000;
font-family: Arial, Helvetica, sans-serif;
font-size: 12pt;
/* This is an example of how to change the appearance of all the panel tabs when the
* Accordion has focus. The "AccordionFocused" class is programatically added and removed
* whenever the Accordion gains or loses keyboard focus.
.AccordionFocused .AccordionPanelTab {
color: #000000;
font-family: Arial, Helvetica, sans-serif;
font-size: 12pt;
text-align: left;
/* This is an example of how to change the appearance of the panel tab that is
* currently open when the Accordion has focus.
.AccordionFocused {
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
.AccordionPanelOpen
.AccordionPanelTab {
background-color: c0dff5;
color: #666;
font-family: Arial, Helvetica, sans-serif;
font-size: 12pt;
/* Rules for Printing */
@media print {
.Accordion {
overflow: visible !important;
.AccordionPanelContent {
display: block !important;
overflow: visible !important;
height: auto !important;
font-size: 12pt;
padding-left: 10px;
padding-right: 10px;
Similar Messages
-
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. -
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 spry horizontal menu drops then returns when clicked?
Hello,
I recently updated my website to include a Facebook "Like" button with counter, and now my spry horizontal menu jumps up and down when you click a menu item?
http://www.kansascitycrates.com/index.html
I played around with the like button position in my template, before just adding it to the existing "Recommend" position at the top. It is simply a 2 column 1 row table.
What setting is causing the Spry horizontal menu to jump like that?
Thanks in advance.
JohnThank you SnakEyez02,
I made the changes you suggested. The spry horizontal menu should be below the header background image. Also, I put the Facebook plugins into a table, for lack of better understanding of controlling it's placement. I would like both Facebook buttons to be even along the top.
When I opened the template this morning, the last spry menu option (Testimonials) suddenly word wrapped (?) and began a second line under the first menu item (Contact). So I played with adjusting it's width and font size. I haven't made any other template changes in 6 months and don't know why it "word wrapped"?
Thank you again for your help.
JM -
Spry Horizontal Menubar Submenus offset in Explorer
I am redesigning my website and am having trouble with the spry horizontal menu bar submenus which are offsetting to the right in Explorer. They should be vertically aligned. They work correctly in Safari, Firefox, and Chrome. Also having troubles with it on the Home page where it does not want to drop down over my table-rollover content. Any suggestions on how to fix these glitches? My beta website.
I changed the document and re-uploaded it to the server. But the version on the server is still showing no change! When I close and re-open my original local document, it does show the changes made. Somehow, the changes are not properly uploading to the server or it is not allowing them to post.
Jeff
Here is the code in the document that was posted (maybe you could cast an eye on that in the mean time):
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Welcome to Lawson Design</title><meta name="Jeff Lawson, glendale, california, websites, brand identity, brand image, corporate identity, logos, branding, trademarks, style guides, posters, graphic design, graphic designers, brochures, marketing collateral, sales brochures, annual reports, company brochures, direct mail promotions, packaging, signage, graphic standards, marketing, commercial artists, Jeffrey Dale Lawson, consultant, fine artists, giclee editions, fine art, " content="" />
<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<style type="text/css">
body {
background-image: url(images/tile8.gif);
#headerbox {
height: 130px;
width: 840px;
position: absolute;
left: 70px;
top: 68px;
/* [disabled]float: right; */
/* [disabled]clear: left; */
background-image: url(images/lawsondesign.png);
visibility: visible;
/* [disabled]font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif; */
/* [disabled]font-size: 15px; */
/* [disabled]color: #444; */
/* [disabled]padding-top: 35px; */
/* [disabled]padding-left: 300px; */
/* [disabled]padding-right: 250px; */
/* [disabled]padding-bottom: 20px; */
background-repeat: no-repeat;
</style>
<link href="../Templates/lawsondesign.css" rel="stylesheet" type="text/css" />
<style type="text/css">
@import url("SpryAssets/SpryMenuBarHorizontal.css");
</style>
<script type="text/javascript">
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
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];}}
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
</script>
</head>
<body onLoad="MM_preloadImages('cell1_ro.jpg','cell2_ro.jpg','cell3_ro.jpg','cell4_ro..jpg','ce ll5_ro.jpg','cell9_ro.jpg','cell6_ro.jpg','cell7_ro.jpg','cell8_ro.jpg','cell10_ro.jpg','c ell11_ro.jpg','cell12_ro.jpg')">
<div class="sectionheading" id="headerbox"></div>
<div id="text_larger">
<table height="419" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td align="center" bgcolor="#FFFFFF" id="cell1"><a href="packaging.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('index/cell1','','index/cell1_ro.jpg',1)"><img src="index/cell1.jpg" name="index/cell1" width="174" height="140" border="0" /></a></td>
<td align="center" bgcolor="#FFFFFF" id="cell2"><a href="identity.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('index/cell2','','index/cell2_ro.jpg',1)"><img src="index/cell2.jpg" name="index/cell2" width="174" height="140" border="0" /></a></td>
<td align="center" bgcolor="#FFFFFF" id="cell3"><a href="communications.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('index/cell3','','index/cell3_ro.jpg',1)"><img src="index/cell3.jpg" name="index/cell3" width="174" height="140" border="0" /></a></td>
<td align="center" bgcolor="#FFFFFF" id="cell4"><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('index/cell4','','index/cell4_ro.jpg',1)"><img src="index/cell4.jpg" name="index/cell4" width="174" height="140" border="0" /></a></td>
</tr>
<tr>
<td align="center" bgcolor="#FFFFFF" id="cell5"><a href="identity.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('index/cell5','','index/cell5_ro.jpg',1)"><img src="index/cell5.jpg" name="index/cell5" width="174" height="141" border="0" /></a></td>
<td align="center" bgcolor="#FFFFFF" id="cell6"><a href="packaging.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('index/cell6','','index/cell6_ro.jpg',1)"><img src="index/cell6.jpg" name="index/cell6" width="174" height="141" border="0" /></a></td>
<td align="center" bgcolor="#FFFFFF" id="cell7"><a href="communications.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('index/cell7','','index/cell7_ro.jpg',1)"><img src="index/cell7.jpg" name="index/cell7" width="174" height="141" border="0" /></a></td>
<td align="center" bgcolor="#FFFFFF" id="cell8"><a href="identity.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('index/cell8','','index/cell8_ro.jpg',1)"><img src="index/cell8.jpg" name="index/cell8" width="174" height="141" border="0" /></a></td>
</tr>
<tr>
<td align="center" bgcolor="#FFFFFF" id="cell9"><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('index/cell9','','index/cell9_ro.jpg',1)"><img src="index/cell9.jpg" name="index/cell9" width="174" height="137" border="0" /></a></td>
<td align="center" bgcolor="#FFFFFF" id="cell10"><a href="identity.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('index/cell10','','index/cell10_ro.jpg',1)"><img src="index/cell10.jpg" name="index/cell10" width="174" height="137" border="0" /></a></td>
<td align="center" bgcolor="#FFFFFF" id="cell11"><a href="communications.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('index/cell11','','index/cell11_ro.jpg',1)"><img src="index/cell11.jpg" name="index/cell11" width="174" height="137" border="0" /></a></td>
<td align="center" bgcolor="#FFFFFF" id="cell12"><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('index/cell12','','index/cell12_ro.jpg',1)"><img src="index/cell12.jpg" name="index/cell12" width="174" height="137" border="0" /></a></td>
</tr>
</table>
</div>
<div class="footerbar" id="footerbar"></div>
<ul id="MenuBar1" class="MenuBarHorizontal">
<li id="home"><a href="index.html" title="Welcome to Lawson Design">Home</a></li>
<li id="aboutus"><a href="about.html" title="About Us" class="MenuBarItemSubmenu">About Us</a>
<ul>
<li><a href="clients.html">Clients</a></li>
<li><a href="jefflawson.html" title="About Jeff Lawson">Jeff Lawson</a></li>
<li><a href="philosophy.html" title="Our Philosophy">Our Philosophy</a></li>
</ul>
</li>
<li id="services"><a href="services.html" title="Services" class="MenuBarItemSubmenu">Services</a>
<ul>
<li><a href="identity.html" title="Brand Identity">Brand Identity</a></li>
<li><a href="communications.html" title="Communications">Communications</a></li>
<li><a href="websites.html" title="Websites">Websites</a></li>
<li><a href="packaging.html" title="Packaging">Packaging</a></li>
<li><a href="exhibits.html" title="Exhibit Graphics">Exhibit Graphics</a></li>
</ul>
</li>
<li id="consulting"><a href="consulting.html" title="Consulting" class="MenuBarItemSubmenu">Consulting</a>
<ul>
<li><a href="audits.html" title="Brand Audits">Brand Audits</a></li>
<li><a href="marketing.html" title="Marketing Planning">Marketing Planning</a></li>
</ul>
</li>
<li id="arteditions"><a href="http://artid.com/members/lawsondesign" title="Giclee Editions" target="_new">Art Editions</a></li>
<li id="contactus"><a href="contact.html" title="Contact Us">Contact Us</a></li>
</ul>
<script type="text/javascript">
var identityslideshow = new Spry.Widget.ImageSlideShow("#identityslideshow", {
widgetID: "identityslideshow",
injectionType: "replace",
autoPlay: true,
displayInterval: 4000,
transitionDuration: 2000,
componentOrder: ["view"],
plugIns: [ ]
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"../../SpryAssets/SpryMenuBarDownHover.gif", imgRight:"../../SpryAssets/SpryMenuBarRightHover.gif"});
</script>
</body>
</html> -
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 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.comHi! 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 Submenus Won't Appear - Help
OK, I have a Spry Horizontal Menu Bar done through DW CS5. The root menu items work just fine. And the arrow graphics indicating there are submenus are shown, however when you hover over the main menu item the submenus do not appear in browser preview. The spry menu bar is located in the header div above a main content div and a sidebar div (two column layout). Interestingly enough if I drop a new menu bar in the main content div with sample submenus it works fine, so the css file must be ok because they both read off the same css file.
My only assumption is there is something in the header code which conflicts with the submenus and is not allowing the submenus to appear. Unfortunately I can't post it only in a test location as I am reworking an existing website and when I post the new css file it will obviously change the existing website.
But here is some of the relevant code. First the HTML for the section in question.
I very much appeciate any advice.
Home
Biography
Blog
Riding
Resources
Provincial
Municipal
Federal
Education
Community
International
Liberal Party
Media
News Releases
Newsletters
Columns
Photo Gallery
Multimedia
RSS Feeds
Contact
Now the CSS for the menu bar:
@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: auto; padding: 0; list-style-type: none; font-family: "Times New Roman", Times, serif; font-size: medium; font-weight: bold; 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: 0; padding: 0; list-style-type: none; font-size: 100%; position: relative; text-align: center; cursor: pointer; width: 108px; 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 0 0 50%; padding: 0; list-style-type: none; font-size: 80%; z-index: 1020; cursor: default; width: 108px; float: none; 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: 108px; } /* Submenus should appear slightly overlapping to the right (95%) and up (-5%) */ ul.MenuBarHorizontal ul ul { position: absolute; margin: -5% 0 0 95%; z-index:1030; } /* 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: none; top: 0; z-index:1040; } /******************************************************************************* DESIGN INFORMATION: describes color scheme, borders, fonts *******************************************************************************/ /* Submenu containers have borders on all sides */ ul.MenuBarHorizontal ul { border: 1px solid #CCC; } /* Menu items are a light gray block with padding and no text decoration */ ul.MenuBarHorizontal a { display: block; cursor: pointer; background-color: #000; padding: 5px 5px; color: #FEFEFE; 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: #323232; color: #FEFEFE; } /* 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: #323232; color: #FEFEFE; } /******************************************************************************* 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; f\loat: left; background: #FFF; } }
And lastly the Css code for the whole thing...
@charset "utf-8"; body { font-family: Verdana, Geneva, sans-serif; margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */ padding: 0; text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */ } .twoColFixLtHdr #container { width: 760px; /* using 20px less than a full 800px width allows for browser chrome and avoids a horizontal scroll bar */ margin: 0 auto auto auto; /* the auto margins (in conjunction with a width) center the page */ border: 2px solid #000; text-align: left; /* this overrides the text-align: center on the body element. */ } .twoColFixLtHdr #header { padding: 0; /* this padding matches the left alignment of the elements in the divs that appear beneath it. If an image is used in the #header instead of text, you may want to remove the padding. */ border: 0px solid #000; } .twoColFixLtHdr #header h1 { margin: 0; /* zeroing the margin of the last element in the #header div will avoid margin collapse - an unexplainable space between divs. If the div has a border around it, this is not necessary as that also avoids the margin collapse */ padding: 0; /* using padding instead of margin will allow you to keep the element away from the edges of the div */ } .twoColFixLtHdr #sidebar1 { float: left; /* since this element is floated, a width must be given */ width: 200px; font-size:12px; color:#FEFEFE; background: #000; border-top-width: 1px; border-right-width: 2px; border-bottom-width: 2px; border-left-width: 1px; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-top-color: #000; border-right-color: #660000; border-bottom-color: #000; border-left-color: #000; padding-top: 1px; padding-right: 0px; padding-bottom: 1px; padding-left: 1px; } .twoColFixLtHdr #mainContent { margin: 0 0 0 204px; /* the left margin on this div element creates the column down the left side of the page - no matter how much content the sidebar1 div contains, the column space will remain. You can remove this margin if you want the #mainContent div's text to fill the #sidebar1 space when the content in #sidebar1 ends. */ padding: 0 10px; /* remember that padding is the space inside the div box and margin is the space outside the div box */ background:#660000; } .twoColFixLtHdr #videomainContent { margin: 0 0 0 200px; /* the left margin on this div element creates the column down the left side of the page - no matter how much content the sidebar1 div contains, the column space will remain. You can remove this margin if you want the #mainContent div's text to fill the #sidebar1 space when the content in #sidebar1 ends. */ background: #323232; padding-left:100px } .twoColFixLtHdr #singleframe { background: #323232; } .twoColFixLtHdr #footer { padding: 0 10px 0 10px; /* this padding matches the left alignment of the elements in the divs that appear above it. */ font-size:12px; color:#FEFEFE; background:#000; border: 1px solid #000; } .twoColFixLtHdr #footer p { margin: 0 0 0 270px; /* zeroing the margins of the first element in the footer will avoid the possibility of margin collapse - a space between divs */ padding: 20px 0; /* padding on this element will create space, just as the the margin would have, without the margin collapse issue */ } .clearfloat { /* this class should be placed on a div or break element and should be the final element before the close of a container that should fully contain a float */ clear:both; height:0; font-size: 1px; line-height: 0px; } br{font-size:10px} a:link {color:#FEFEFE} a:visited {color:#FEFEFE} a:hover {text-decoration:none;} #mainContent a:link {color:#000; text-decoration:none} #mainContent a:visited {color: #000; text-decoration:none} #mainContent a:hover { text-decoration:underline; } #mainContent a:active {color:#000;text-decoration:none} .red{ color:#4C0000;} .w1{font-size:14px; color:#FEFEFE;} .w2{font-size:12px; color:#FEFEFE;} .w3{font-size:large; color:#FEFEFE;} .b1{font-size:14px; color: #000; font-weight:bolder} .sidehline{ float: left; /* since this element is floated, a width must be given */ width: 200px; /* the actual width of this div, in standards-compliant browsers, or standards mode in Internet Explorer will include the padding and border in addition to the width */ padding: 0px 0px 0px 0px; } .b{font-size:12px; color:#000000; } .topbtmmargin { margin-top: 20px; margin-bottom: 20px; } .SidebarPadding { padding-top: 0px; padding-right: 10px; padding-bottom: 0px; padding-left: 10px; } .FrontImage { border: 5px ridge #323232; float: left; margin-right: 10px; margin-bottom: 10px; margin-top: 0px; } .FrontImageFltRgt { border: 5px ridge #323232; float: right; margin-left: 10px; margin-bottom: 10px; margin-top: 20px; } .mapRgt { float: right; padding-left: 5px; padding-bottom: 10px; border: none; } .sigRgt { float: right; padding-left: 5px; margin-right: 60px; padding-bottom: 10px; margin-top: 10px; } .textfntrgtcol { padding-left: 200px; font-size:12px; color:#000000; } .textfntlftcol { padding-right: 210px; font-size:12px; color:#000000; } .twoColFixLtHdr #container #mainContent ul li { list-style-type: none; list-style-position: outside; list-style-image: url(images/blackbullet.gif); } .leftpicture { border: 5px ridge #323232; position: absolute; z-index: 20; height: 140px; width: 180px; margin-top: 10px; margin-right: 10px; margin-bottom: 10px; margin-left: 210px; left: 150px; top: 326px; } img { border-style: none; } .grooveimg { border: groove; } #apDiv1 { position:absolute; width:200px; height:115px; z-index:1; left: 0px; top: 0px; visibility: visible; } #apDiv2 { position:absolute; width:155px; height:123px; z-index:2; left: 5px; top: 4px; visibility: visible; } #apDiv3 { position:absolute; width:335px; height:122px; z-index:3; left: 173px; top: 3px; visibility: visible; color:#FEFEFE; } #apDiv3 a:link {color:#FEFEFE} #apDiv3 a:visited {color: #FEFEFE} #apDiv3 a:hover {text-decoration:none;} #apDiv3 a:active {color:#FEFEFE} #apDiv4 { position:absolute; width:120px; height:45px; z-index:4; left: 390px; top: 105px; visibility: visible; } #apDiv5 { position:relative; width:200px; height:115px; z-index:5; } .menubarWrapper { background-color: #000; float: left; width: 100%; }Move the constructor for the menu bar up to read as follows
<script type="text/javascript">
<!--
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
swfobject.registerObject("FlashID2");
swfobject.registerObject("FlashID2");
swfobject.registerObject("FlashID3");
//-->
</script>
Gramps -
Spry Horizontal Menu problem in Safari Mac/Windows
Hello!
Has anyone run into a problem using a horizontal spry menu and it showing up corectly in Safari? The menu is centered but I cannot get the table to center underneath. I then wrapped the table in a div and center aligned it, after addeding a <br/> (just trying stuff to no avail.)
Here is a link to a site I am working on.
http://tesibridal.com/NEW/index.html
So far I have found it does not work in Safari 3.2.1/Mac & Safari 3.2.2 and gives me a whole new set of spacing problems in Explorer (which I will address all of those next).
Thank you in advance for your time.
~TMC
P.S. - Here is the CSS for the menu:
@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
padding: 0;
list-style-type: none;
cursor: default;
width: 55em;
margin: 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: 0;
padding: 0;
list-style-type: none;
font-size: 11px;
font-family:Verdana, Arial, Helvetica, sans-serif;
color:#000000;
background-color:#FF0000;
text-align:center;
position: relative;
text-align: center;
cursor: pointer;
width: 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: 11px;
color:#000000;
background-color:#FF0000;
text-align:center;
z-index: 1020;
cursor: default;
width: 10.1em;
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: 10.1em;
/* 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:#000000;
border-style:solid;
border-width:1px;
/* Menu items are a light gray block with padding and no text decoration */
ul.MenuBarHorizontal a
display: block;
cursor: pointer;
background-color: #FF0000;
color: #000000;
text-decoration: none;
border:#000000;
border-style:solid;
border-width:1px;
padding-top: 1em;
padding-right: 0em;
padding-bottom: 1em;
padding-left: 0em;
/* 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: #FF0000;
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
background-color: #FF0000;
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: #FF0000;
Message was edited by: TMCDesign
Message was edited by: TMCDesignHi 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 -
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.comHi 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 -
Background images with spry "horizontal menu"
hi again
I am trying to work with the spry: "horizontal menu"
I want to put some background images into the menu bar not into the submenu
and that is the problem: the background images appears overall
what can I do ?
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Unbenanntes Dokument</title>
<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
<style type="text/css">
<!--
#container {
margin-right: auto;
margin-left: auto;
width: 400px;
-->
</style>
</head>
<body>
<div id="container">Raum für den Inhalt von id "container"
<ul id="MenuBar1" class="MenuBarHorizontal">
<li><a href="#">Element 1</a> </li>
<li><a class="MenuBarItemSubmenu" href="#">Element 3</a>
<ul>
<li><a href="#" class="MenuBarHorizontal">heija</a> </li>
<li><a href="#">soso</a></li>
</ul>
</li>
<li><a href="#">Element 4</a></li>
</ul>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
</div>
<script type="text/javascript">
<!--
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
//-->
</script>
</body>
</html>
and css
ul.MenuBarHorizontal
margin: 0;
padding: 0;
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: 0;
padding: 0;
list-style-type: none;
font-size: 100%;
position: relative;
text-align: center;
cursor: pointer;
width: 100px;
float: left;
height: 10px;
/* 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: 100px;
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: 100px;
height: 30px;
/* 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: 1px solid #CCC;
/* Menu items are a light gray block with padding and no text decoration */
ul.MenuBarHorizontal a
display: block;
cursor: pointer;
background-color: #FEF3E4;
padding: 0.5em 0.75em;
color: #FFF;
text-decoration: none;
background-repeat: no-repeat;
background-image: url(../rot.jpg);
/* Menu items that have mouse over or focus have a blue background and white text */
ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus
color: #FF0;
/* 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: #FEF3E4;
color: #FF0;
background-image: url(../rot.jpg);
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-color: #FEF3E4;
/* 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-color: #0F9;
/* 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-color: #FEF3E4;
color: #FF0;
/* 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-color: #F99;
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;
f\loat: left;
background: #FFF;Complete page and css code below (scroll down)
All you should be concerned with at this moment to get the background image to appear in the top level anchor is the css style below:
/* 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-color: #000;
background-image: url(../rot.jpg);
background-repeat: no-repeat;
background-position: left top;
I've added the background-postion because presumably you want it to appear flush left. This overides the out-of-the-box setting which positions it 95% far left.
Here is the code and css:
<!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/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Unbenanntes Dokument</title>
<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
<head>
<style type="text/css">
<!--
#container {
margin-right: auto;
margin-left: auto;
width: 400px;
-->
</style>
<style>
ul.MenuBarHorizontal
margin: 0;
padding: 0;
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: 0;
padding: 0;
list-style-type: none;
font-size: 100%;
position: relative;
text-align: center;
cursor: pointer;
width: 100px;
float: left;
height: 10px;
/* 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: 100px;
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: 100px;
height: 30px;
/* 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: 1px solid #CCC;
/* Menu items are a light gray block with padding and no text decoration */
ul.MenuBarHorizontal a
display: block;
cursor: pointer;
background-color: #FEF3E4;
padding: 0.5em 0.75em;
color: #FFF;
text-decoration: none;
background-repeat: no-repeat;
background-image: url(../rot.jpg);
/* Menu items that have mouse over or focus have a blue background and white text */
ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus
color: #FF0;
/* 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: #FEF3E4;
color: #FF0;
background-image: url(../rot.jpg);
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-color: #000;
background-image: url(../rot.jpg);
background-repeat: no-repeat;
background-position: left top;
/* 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-color: #0F9;
/* 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-color: #FEF3E4;
color: #FF0;
/* 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-color: #F99;
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);
</style>
</head>
<body>
<div id="container">Raum für den Inhalt von id "container"
<ul id="MenuBar1" class="MenuBarHorizontal">
<li><a class="MenuBarItemSubmenu" href="#">Element 1</a> </li>
<li><a class="MenuBarItemSubmenu" href="#">Element 3</a>
<ul>
<li><a href="#" class="MenuBarHorizontal">heija</a> </li>
<li><a href="#">soso</a></li>
</ul>
</li>
<li><a href="#">Element 4</a></li>
</ul>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
</div>
<script type="text/javascript">
<!--
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
//-->
</script>
</body>
</html> -
Spry Horizontal submenu hidden behind image
This is driving me nuts. I am using Dreamweaver CS4. I have created a horizontal menu bar just above an image. When i hover over the main menu item the submenu is hidden behind the image. I have not been able to figure this one outy. i am very new to CSS and Dreamweaver. This is a template that i want to use across my entire site. You can goto http://www.gray-wolf.net/MainPages.html.
@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: 100%;
cursor: auto;
width: 800px;
font-family: Arial, Helvetica, sans-serif;
background-color: #008080;
height: 40px;
float: left;
top: 100px
/* 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: 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: 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: 1px solid #CCC;
/* Menu items are a light gray block with padding and no text decoration */
ul.MenuBarHorizontal a
display: block;
cursor: pointer;
background-color: #EEE;
padding: 0.5em 0.75em;
color: #333;
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: #33C;
color: #FFF;
width: auto;
/* 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: #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.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;Your unexpected (and undesired) wolf call on entering that page scared the begesus outta me. Most people don't take kindly to such surprises!
You do realize that the page you linked to is a TEMPLATE page, but it is named with an HTML extension, right? You did that just to show us the template?
Also, it appears that you have built your entire site inside of the Templates folder -
<a href="Templates/pgpage1.htm" title="Page 1 of my Photo Gallery">
That's improper. Nothing should be in the Templates folder other than the template files themselves.
Finally, your use of absolute positioning as a primary page layout method is going to get you into serious trouble. Please read this -
http://apptools.com/examples/pagelayout101.php
Now - here's the problem:
You have applied a style of 'overflow:hidden' to div#nav. Remove that. With that in place, the submenus cannot flow OUT of div#nav. -
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.comThere'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 Nav Bar not working in IE7
I'm currently working on a website for South Jersey MOM
Magazine (www.southjerseymom.com). The header layer contains a
graphic and a Spry horizontal menu bar for navigation. The
navigation works properly in Firefox. However, when I go to open up
the page in IE, it originally shows the navigation bar, along with
a Information Bar menu asking if I want to allow active script to
run. When I click "yes" to allow the content, then the bar
disappears and doesn't work. Any suggestions?I'm currently working on a website for South Jersey MOM
Magazine (www.southjerseymom.com). The header layer contains a
graphic and a Spry horizontal menu bar for navigation. The
navigation works properly in Firefox. However, when I go to open up
the page in IE, it originally shows the navigation bar, along with
a Information Bar menu asking if I want to allow active script to
run. When I click "yes" to allow the content, then the bar
disappears and doesn't work. Any suggestions? -
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.
Maybe you are looking for
-
'dimension attribute was not found' error while refresing the cube in Excel
Dear All, Thanks for all your support and help. I need an urgent support from you as I am stuck up here from nearly past 2-3 days and not getting a clue on it. I have re-named a dimension attribute 'XX' to 'xx' (Caps to small)in my cube and cleared a
-
My new Samsung Galaxy S4 phone had a reception problem and I was getting frequent drop calls in my house ever since I got the new phone. Verizon Wireless sent me a new replacement phone and that fixed the issue. That was in July 2013. However, a big
-
I'm playing with ODS for the first time. I've created the ODS and the update rules. Now I have data loaded and activated in the ODS. I want to move that data to the next ODS level. What steps do I take to move this data from one ODS to another.
-
Folks, I am having problem starting the application server after trying to add the following JVM options -DproxyHost=<my_host>.<my_domain> -DproxyPort=80 OK, it didn't work, so I decided to remove the above options and back to where it was. Since the
-
Hallo every body ! Old Lady here and my first message. My grandson give me his old iBook and iPod Touch but he not very nice. He tell me to figure myselves. So I make new Apple account to find out how to put application I buy from iTunes store to my