Spry Menu, IE troubles
does anyone know how to fix this?
http://www.ov-ds.com/penn_index.html
please view in IE to see the prob. works fine in other
browsers
I'm not seein any markup for a vertical menu in that page?
--== Kin ==--
Similar Messages
-
I am trying to vertical menus that may have up to 2 levels of
popups. At first the submenus were invisible until I changed a CSS
setting in ul.verticalmenubar a Positioning setting from -1000 to
0. I don't know how it was set in the first place. Now the submenus
are always on the screen, overlaying the content beneath them. How
do I get them to only appear on a rollover or click on the menu
item. There seems to be no code automatically inserted to do this.
I have been trying to get Spry to work for several days, and
can never get the submenus to work correctly. Do you have any ideas
on what is wrong? Is Spry still buggy? I'm working with IE.When you download the installer it runs another application
which installs the 1.6 addon into DW CS3. It updates all of your
scripts to 1.6 and puts your old SpryCSS into another Spry folder
in your site (which can be deleted).
The 1.6 update is supposed to help with some of the early
issues with some of the newer browsers (most notably IE). If you
are still having issues it might be best if you can just post a
link to this page (so if you have not uploaded it yet, do so). I
don't know why the submenus wouldn't show up on rollover. They
shouldn't be having this problem so it is an issue with the CSS.
If you look back at my first post there is a link to a file
called "SpryMenuBarVertical.css". Click on that link and view the
CSS file in your browser. Compare that to what you have in your CSS
document in the Spry Assets folder. See if they match up or if
something is different (ignoring all colors and background images
that you may have changed). That would be the only other option to
posting a link to your page would be for you to compare those
documents. -
Trouble with Spry Menu Bar Not Opening on Hover
I have two Spry Menu Bars on this one page. They were both working fine. Now the menu bar on the top right is not opening on rollover. I have uploaded the Spry .JS and .CSSfiles to the server.Could it be that I added 2 to the names of the CSS styles, but not all of them? I just tested them all with 2 after the style name, and it didn't fix it.
I also noticed that the ability to edit these two navigation bars using the Property Inspector went away. I can't seem to click on them to edit. Now I edit them through the code only.
Rebuild it on another page, and paste in the code?
Suggestions?
ALso, getting an error message on line 2 of HTML below, which I don't remember editing.
I will paste the template page HTML, then the CSS, then the Javascript Spry file for Menu Bar Horizontal. I did not edit the JS file at all.
Link to the uploaded files: http://www.sproulcreative.com/filetest/panin_website/
Thanks for any help you can offer.
D
HTML for template page:
<!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" />
<!-- TemplateBeginEditable name="doctitle" -->
<title>Press Reviews of Paninos Italian Restaurant Food in three Colorado Locations</title>
<!-- TemplateEndEditable -->
<link href="../styles_paninositalianrestaurant.css" rel="stylesheet" type="text/css" />
<script src="../SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<script src="../SpryAssets/SpryMenuBar_topnav.js" type="text/javascript"></script>
<link href="../SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
<link href="../SpryAssets/SpryMenuBarHorizontal_topnav.css" rel="stylesheet" type="text/css" />
<!-- TemplateBeginEditable name="head" --><!-- TemplateEndEditable --><!-- TemplateParam name="LinksSidebar" type="boolean" value="true" -->
</head>
<body>
<div id="wrapper">
<a href="#skiptomaincontent">
<img src="../images/spacer.gif" alt="Skip to main page content" name="spacer" width="1"
height="1" class="invisible" id="spacer"> </a><!--ANCHOR FOR SCREEN READERS-->
<!--START TOP NAV DIV-->
<div id="topnav">
<!--START TWITTER/FACEBOOK MENU BAR -->
<script type="text/javascript">
<!--
var MenuBar2 = new Spry.Widget.MenuBar("twittermenu", {imgDown:"../SpryAssets/SpryMenuBarDownHover.gif", imgRight:"../SpryAssets/SpryMenuBarRightHover.gif"});
//-->
</script>
<ul id="twittermenu" class="MenuBarHorizontal2">
<li><a href="../paninos_local_italian_restaurant_fort_collins_colorado_springs_minnesota.html">H ome</a></li>
<li><a href="../reviews_italian_restaurant_food.html">Reviews</a></li>
<li><a href="../history_of_paninos_local_italian_restaurant_coloradosprings_fortcollins_minnesot a.html">History</a></li>
<li><a class="MenuBarItemSubmenu2" href="#">Twitter</a>
<ul>
<li><a href="http://twitter.com/Paninosfc">Follow Fort Collins, CO, Paninos</a></li>
<li><a href="http://twitter.com/paninosmn">Follow Minnesota Paninos</a></li>
</ul>
</li>
<li><a href="#" class="MenuBarItemSubmenu2">Facebook</a>
<ul>
<li><a href="http://www.facebook.com/search/?q=Paninos&init=quick#/pages/North-Oaks-MN/Paninos/13234142 7180?v=wall&ref=search">Minnesota Twin Cities Four</a></li>
</ul>
</li>
</ul>
<!--END TWITTER/FACEBOOK MENU BAR-->
</div>
<!--ENDS TOP NAV DIV-->
<div id="pagebg">
<div id="centralpageborder"><!--FOR BORDER TRIM & BG color-->
<!--START OF HEADERBOX-->
<div id="headerbox">
<div align="left">
<img src="../images/web_logo_paninos_final.png" alt="Paninos Italian Restaurant Logo (black text with a tomato for the letter O), Your family's Italian restaurant for over 35 years, locally owned and operated." width="215" height="118" class="paddingbottom" />
<!--START OF MAIN FOUR NAVIGATION -->
<ul id="MainFourNav" class="MenuBarHorizontal">
<li><a href="#" class="MenuBarItemSubmenu"><img src="../images/img_mainnav_locations_contact.png" alt="Paninos Italian Restaurant Locations and Contact Information: Colorado Springs, Fort Collins, Minnesota" name="locationscontactbutton" width="167" height="24" border="0" id="locationscontactbutton" /></a> <ul>
<li><a href="../contact_info_italian_restaurant_fort_collins_colorado_paninos.html">Fort Collins, Colorado, by CSU</a></li>
<li><a href="../contact_info_italian_restaurant_colorado_springs_downtown_colorado_paninos.html" >Colorado Springs Downtown: Tejon St. by Colorado College</a></li>
<li><a href="../contact_info_italian_restaurant_colorado_springs_8th_street_colorado_paninos.htm l">Colorado Springs: South Eighth St.</a></li>
<li><a href="http://paninos.com/minnesota/">Minnesota website</a></li>
</ul></li>
<li><a href="#" class="MenuBarItemSubmenu"><img src="../images/img_main4nav_download_menus.png" alt="Download Italian Restaurant Menus in PDF format for restaurants in Fort Collins, Colorado; Colorado Springs, Colorado; and Minnesota" name="menudownloadbutton" width="142" height="24" border="0" id="menudownloadbutton" /></a>
<ul>
<li><a href="#"><em>Please pick your favorite Paninos:</em></a></li>
<li><a href="../online_menus_local_italian_food/Paninos_Menu_ColoradoSprings_Downtown.pdf">Color ado Springs Downtown: Tejon St. by Colorado College</a></li>
<li><a href="../online_menus_local_italian_food/Paninos_Menu_ColoradoSprings_Eighth_Street.pdf"> Colorado Springs: South Eighth St.</a></li>
<li><a href="../online_menus_local_italian_food/Paninos_Menu_Fort_Collins_Colorado.pdf">Fort Collins, Colorado, by CSU</a></li>
<li><a href="http://paninos.com/minnesota/">Minnesota (go to website)</a></li>
</ul>
</li>
<li><a href="../photo_gallery_pasta_dishes_pizza_italian_food.html"><img src="../images/img_main4nav_photo_gallery.png" alt="Photo Gallery of Local Italian Food including pizza and pasta" name="photogallery" width="56" height="24" border="0" id="photogallery" /></a> </li>
<li><a href="../pizza_coupons_and_special_deals_italian_food.html"><img src="../images/img_main4nav_specials.png" alt="Pizza Coupons and Specials" name="pizzacouponsandspecials" width="71" height="24" border="0" id="pizzacouponsandspecials" /></a> </li>
</ul>
<script type="text/javascript">
<!--
var MenuBar1 = new Spry.Widget.MenuBar("MainFourNav", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
//-->
</script>
<!-- TemplateBeginEditable name="HeaderPhotos" -->
<p class="headerphotos"><img src="../images/imgheader_lasagna_beef_hot_cheesey_coloradosprings_fortcollins_italian_res taurant.png" width="263" height="133" /><img src="../images/imgheader_spinach_salad_with_chicken.png" width="263" height="133" /><img src="../images/imgheader_big-t-pizza2.png" width="263" height="133" /></p>
<!-- TemplateEndEditable --></div>
</div><!--ENDS HEADERBOX DIV-->
<div id="bodybox"><!--BOX AROUND MAIN PAGE TEXT, FOR WHOLE PAGE BELOW HEADER AREA-->
<div id="pagetitle"><!-- TemplateBeginEditable name="MainPageHeader" --><img src="../images/img_title_press_reviews_italian_restaurant.png" width="307" height="38" /><!-- TemplateEndEditable --></div><!--ENDS PAGE TITLE-->
<div id="innerbdybox"><!--WRAPS ALL MAIN CONTENT BELOW BODYBOX TITLE, all 3 columns -->
<div id="content"><!--WRAPS MAINTEXT AND PHOTO SIDEBAR COLUMNS-->
<div id="maintext"><!--MAINTEXT OR BODY CONTENT OF P-->
<!-- TemplateBeginEditable name="BodyTextSection" -->
<a name="skiptomaincontent" id="skiptomaincontent"></a><!--ANCHOR FOR SCREENREADERS-->
<h1>A Tradition Food And Sports: <br />
CC & Panino’s Love of Hockey Runs From Colorado to Minnesota</h1>
<h4>Byline: By Jim Bainbridge, The Gazette</h4>
<p>No Colorado Springs business has had a deeper bond with the Colorado College hockey program during the past three decades than Panino’s Restaurant, a connection seen on its walls, in its clientele and in its bloodlines.<br />
Panino’s has been tied to the school’s hockey program since the restaurant was bought in 1974 by former CC All-America hockey player Tony Frasca. It’s still the place to be on game day a generation later with his son Mike running things. <a href="http://daily.gazette.com/Repository/ml.asp?Ref=VGhlR2F6ZXR0ZS8yMDA1LzAzLzI5I0FyMDMzMDI=&Mo de=HTML&Locale=english-skin-custom"><span class="smalltext">Click here to view entire article.</span></a><br />
<span class="smalltext">(Reprinted with permission of The Gazette)</span></p>
<!-- TemplateEndEditable --> </div>
<!--ENDS MAINTEXT DIV-->
<div id="photosidebar">
<!--STARTS PHOTO SIDEBAR DIV-->
<!-- TemplateBeginEditable name="PhotoSidebar" --><img src="../images/img_waiter1_pizza_lasagna.png" alt="Happy waiter serving Pizza and Lasagna" width="190" height="158" /> <br />
<img src="../images/img_panino_italian_grinder_sandwich.png" alt="Grinder Hot Italian Sandwich called a Panino" width="190" height="158" /><!-- TemplateEndEditable --></div>
<!--ENDS PHOTOSIDEBAR DIV-->
</div><!--ENDS #CONTENT DIV THAT ENCLOSES 2 COLUMNS- MAINTEXT AND PHOTOSIDEBAR-->
<!-- TemplateBeginIf cond="_document['LinksSidebar']" --><!-- TemplateBeginEditable name="EditRegion3" -->
<div id="linkssidebar"><!--START LEFT LINKSSIDEBAR DIV-->
<p>The Gazette<br />
The Coloradoan<br />
The North Forty News<br />
Colorado Springs Times</p>
</div><!--ENDS LINKSSIDEBAR DIV-->
<!-- TemplateEndEditable --><!-- TemplateEndIf -->
</div><!--ENDS INNERBODYBOX DIV THAT WRAPS ALL 3 COLUMNS BELOW THE HEADER -->
<div id="footer"> </div><!--CLEARS CONTENT BEFORE LOWER CONTENT BORDER-->
<br />
<br />
</div> <!--****ENDS BODYBOX DIV THAT ENCLOSES PAGE HEADER BELOW "HEADER" AREA,INNERBODYBOX (FOR ALL 3 COLUMNS OF CONTENT), and FOOTER DIV (TO CLEAR CONTENT) . MOVING THIS AFER THE LINKKSIDEBAR SEEMED TO MAKE IT ALGIN CORRECTLY. PUTTNG AFTER THE PHOTOSIDEBAR MADE THE MAINTEXT HAVE SCROLL BAR-->
</div><!--ENDS CENTRALPAGEBORDER DIV-->
</div><!--ENDS PAGEBG DIV-->
</div><!--ENDS WRAPPER TO MAKE PAGE LEFT JUSTIFY -->
</body>
</html>
CSS for Spry Menu Bar:
@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.MenuBarHorizontal2
list-style-type: none;
font-size: 100%;
cursor: default;
width: auto;
/*margin-top: -10px; */
margin-right: 0;
margin-bottom: 0;
margin-left: 0px;
padding-top: 0;
padding-bottom: 0;
/* 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.MenuBarHorizontal2 li
list-style-type: none;
font-size: 95%;
position: relative;
text-align: left;
cursor: pointer;
float: left;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
/* 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.MenuBarHorizontal2 ul
margin: 0;
padding: 0;
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.MenuBarHorizontal2 ul.MenuBarSubmenuVisible
left: auto;
/* Menu item containers are same fixed width as parent */
ul.MenuBarHorizontal2 ul li
width: 8.2em;
/* Submenus should appear slightly overlapping to the right (95%) and up (-5%) */
ul.MenuBarHorizontal2 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.MenuBarHorizontal2 ul.MenuBarSubmenuVisible ul.MenuBarSubmenuVisible
left: auto;
top: 0;
DESIGN INFORMATION: describes color scheme, borders, fonts
/* Submenu containers have borders on all sides */
ul.MenuBarHorizontal2 ul
border: 1px solid #9E2532;
/* Menu items are a light gray block with padding and no text decoration */
ul.MenuBarHorizontal2 a
display: block;
cursor: pointer;
padding: 0.5em 0.75em;
color: #F3E8CC;
text-decoration: none;
background-color: #663300;
/* Menu items that have mouse over or focus have a blue background and white text */
ul.MenuBarHorizontal2 a:hover, ul.MenuBarHorizontal2 a:focus
color: #FFF;
background-color: #663300;
/* Menu items that are open with submenus are set to MenuBarItemHover with a blue background and white text */
ul.MenuBarHorizontal2 a.MenuBarItemHover, ul.MenuBarHorizontal2 a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal2 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.MenuBarHorizontal2 a.MenuBarItemSubmenu2
background-image: url(SpryMenuBarDown.gif);
background-repeat: no-repeat;
background-position: 100% 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.MenuBarHorizontal2 ul a.MenuBarItemSubmenu2
background-image: url(SpryMenuBarRight.gif);
background-repeat: no-repeat;
background-position: 100% 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.MenuBarHorizontal2 a.MenuBarItemSubmenuHover
background-image: url(SpryMenuBarDownHover.gif);
background-repeat: no-repeat;
background-position: 100% 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.MenuBarHorizontal2 ul a.MenuBarItemSubmenuHover
background-image: url(SpryMenuBarRightHover.gif);
background-repeat: no-repeat;
background-position: 100% 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.MenuBarHorizontal2 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.MenuBarHorizontal2 li.MenuBarItemIE
display: inline;
f\loat: left;
background: #FFF;
JAVASCRIPT FILE FOR MENU BAR HORIZONTAL:
/* SpryMenuBar.js - Revision: Spry Preview Release 1.4 */
// Copyright (c) 2006. Adobe Systems Incorporated.
// All rights reserved.
// Redistribution and use in source and binary forms, with or without
// modification, are permitted provided that the following conditions are met:
// * Redistributions of source code must retain the above copyright notice,
// this list of conditions and the following disclaimer.
// * Redistributions in binary form must reproduce the above copyright notice,
// this list of conditions and the following disclaimer in the documentation
// and/or other materials provided with the distribution.
// * Neither the name of Adobe Systems Incorporated nor the names of its
// contributors may be used to endorse or promote products derived from this
// software without specific prior written permission.
// THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS"
// AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
// IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE
// ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT OWNER OR CONTRIBUTORS BE
// LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
// CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
// SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
// INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
// CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
// ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE
// POSSIBILITY OF SUCH DAMAGE.
SpryMenuBar.js
This file handles the JavaScript for Spry Menu Bar. You should have no need
to edit this file. Some highlights of the MenuBar object is that timers are
used to keep submenus from showing up until the user has hovered over the parent
menu item for some time, as well as a timer for when they leave a submenu to keep
showing that submenu until the timer fires.
var Spry;
if(!Spry)
Spry = {};
if(!Spry.Widget)
Spry.Widget = {};
// Constructor for Menu Bar
// element should be an ID of an unordered list (<ul> tag)
// preloadImage1 and preloadImage2 are images for the rollover state of a menu
Spry.Widget.MenuBar = function(element, opts)
this.init(element, opts);
Spry.Widget.MenuBar.prototype.init = function(element, opts)
this.element = this.getElement(element);
// represents the current (sub)menu we are operating on
this.currMenu = null;
var isie = (typeof document.all != 'undefined' && typeof window.opera == 'undefined' && navigator.vendor != 'KDE');
if(typeof document.getElementById == 'undefined' || (navigator.vendor == 'Apple Computer, Inc.' && typeof window.XMLHttpRequest == 'undefined') || (isie && typeof document.uniqueID == 'undefined'))
// bail on older unsupported browsers
return;
// load hover images now
if(opts)
for(var k in opts)
var rollover = new Image;
rollover.src = opts[k];
if(this.element)
this.currMenu = this.element;
var items = this.element.getElementsByTagName('li');
for(var i=0; i<items.length; i++)
this.initialize(items[i], element, isie);
if(isie)
this.addClassName(items[i], "MenuBarItemIE");
items[i].style.position = "static";
if(isie)
if(this.hasClassName(this.element, "MenuBarVertical"))
this.element.style.position = "relative";
var linkitems = this.element.getElementsByTagName('a');
for(var i=0; i<linkitems.length; i++)
linkitems[i].style.position = "relative";
Spry.Widget.MenuBar.prototype.getElement = function(ele)
if (ele && typeof ele == "string")
return document.getElementById(ele);
return ele;
Spry.Widget.MenuBar.prototype.hasClassName = function(ele, className)
if (!ele || !className || !ele.className || ele.className.search(new RegExp("\\b" + className + "\\b")) == -1)
return false;
return true;
Spry.Widget.MenuBar.prototype.addClassName = function(ele, className)
if (!ele || !className || this.hasClassName(ele, className))
return;
ele.className += (ele.className ? " " : "") + className;
Spry.Widget.MenuBar.prototype.removeClassName = function(ele, className)
if (!ele || !className || !this.hasClassName(ele, className))
return;
ele.className = ele.className.replace(new RegExp("\\s*\\b" + className + "\\b", "g"), "");
// addEventListener for Menu Bar
// attach an event to a tag without creating obtrusive HTML code
Spry.Widget.MenuBar.prototype.addEventListener = function(element, eventType, handler, capture)
try
if (element.addEventListener)
element.addEventListener(eventType, handler, capture);
else if (element.attachEvent)
element.attachEvent('on' + eventType, handler);
catch (e) {}
// createIframeLayer for Menu Bar
// creates an IFRAME underneath a menu so that it will show above form controls and ActiveX
Spry.Widget.MenuBar.prototype.createIframeLayer = function(menu)
var layer = document.createElement('iframe');
layer.tabIndex = '-1';
layer.src = 'javascript:false;';
menu.parentNode.appendChild(layer);
layer.style.left = menu.offsetLeft + 'px';
layer.style.top = menu.offsetTop + 'px';
layer.style.width = menu.offsetWidth + 'px';
layer.style.height = menu.offsetHeight + 'px';
// removeIframeLayer for Menu Bar
// removes an IFRAME underneath a menu to reveal any form controls and ActiveX
Spry.Widget.MenuBar.prototype.removeIframeLayer = function(menu)
var layers = menu.parentNode.getElementsByTagName('iframe');
while(layers.length > 0)
layers[0].parentNode.removeChild(layers[0]);
// clearMenus for Menu Bar
// root is the top level unordered list (<ul> tag)
Spry.Widget.MenuBar.prototype.clearMenus = function(root)
var menus = root.getElementsByTagName('ul');
for(var i=0; i<menus.length; i++)
this.hideSubmenu(menus[i]);
this.removeClassName(this.element, "MenuBarActive");
// bubbledTextEvent for Menu Bar
// identify bubbled up text events in Safari so we can ignore them
Spry.Widget.MenuBar.prototype.bubbledTextEvent = function()
return (navigator.vendor == 'Apple Computer, Inc.' && (event.target == event.relatedTarget.parentNode || (event.eventPhase == 3 && event.target.parentNode == event.relatedTarget)));
// showSubmenu for Menu Bar
// set the proper CSS class on this menu to show it
Spry.Widget.MenuBar.prototype.showSubmenu = function(menu)
if(this.currMenu)
this.clearMenus(this.currMenu);
this.currMenu = null;
if(menu)
this.addClassName(menu, "MenuBarSubmenuVisible");
if(typeof document.all != 'undefined' && typeof window.opera == 'undefined' && navigator.vendor != 'KDE')
if(!this.hasClassName(this.element, "MenuBarHorizontal") || menu.parentNode.parentNode != this.element)
menu.style.top = menu.parentNode.offsetTop + 'px';
if(typeof document.uniqueID != "undefined")
this.createIframeLayer(menu);
this.addClassName(this.element, "MenuBarActive");
// hideSubmenu for Menu Bar
// remove the proper CSS class on this menu to hide it
Spry.Widget.MenuBar.prototype.hideSubmenu = function(menu)
if(menu)
this.removeClassName(menu, "MenuBarSubmenuVisible");
if(typeof document.all != 'undefined' && typeof window.opera == 'undefined' && navigator.vendor != 'KDE')
menu.style.top = '';
menu.style.left = '';
this.removeIframeLayer(menu);
// initialize for Menu Bar
// create event listeners for the Menu Bar widget so we can properly
// show and hide submenus
Spry.Widget.MenuBar.prototype.initialize = function(listitem, element, isie)
var opentime, closetime;
var link = listitem.getElementsByTagName('a')[0];
var submenus = listitem.getElementsByTagName('ul');
var menu = (submenus.length > 0 ? submenus[0] : null);
var hasSubMenu = false;
if(menu)
this.addClassName(link, "MenuBarItemSubmenu");
hasSubMenu = true;
if(!isie)
// define a simple function that comes standard in IE to determine
// if a node is within another node
listitem.contains = function(testNode)
// this refers to the list item
if(testNode == null)
return false;
if(testNode == this)
return true;
else
return this.contains(testNode.parentNode);
// need to save this for scope further down
var self = this;
this.addEventListener(listitem, 'mouseover', function(e)
if(self.bubbledTextEvent())
// ignore bubbled text events
return;
clearTimeout(closetime);
if(self.currMenu == listitem)
self.currMenu = null;
// show menu highlighting
self.addClassName(link, hasSubMenu ? "MenuBarItemSubmenuHover" : "MenuBarItemHover");
if(menu && !self.hasClassName(menu, "MenuBarSubmenuVisible"))
opentime = window.setTimeout(function(){self.showSubmenu(menu);}, 250);
}, false);
this.addEventListener(listitem, 'mouseout', function(e)
if(self.bubbledTextEvent())
// ignore bubbled text events
return;
var related = (typeof e.relatedTarget != 'undefined' ? e.relatedTarget : e.toElement);
if(!listitem.contains(related))
clearTimeout(opentime);
self.currMenu = listitem;
// remove menu highlighting
self.removeClassName(link, hasSubMenu ? "MenuBarItemSubmenuHover" : "MenuBarItemHover");
if(menu)
closetime = window.setTimeout(function(){self.hideSubmenu(menu);}, 600);
}, false);It has to do with all of your absolutely positioned elements. What's happening is that the menu is falling behind the absolutely positioned elements on your page. Since there is nothing there, it's like trying to click a link that is outside your home while you are staring through a window. Personally with that page setup you have now I really don't see a need for absolutely positioned elements. But if you feel you will require them as part of your design you need to ensure the z-index of your menu layer is greater than that of the body elements positioned below it.
-
Menu bar not displaying inline with logo (Spry menu troubles - Extra Credit!)
Coding Brothers and Sisters!
Hope you all are well - would anyone please assist me to display inline the logo and menu bar at the following page?
http://gratefulcreative.com/Andre_Madiz/index.html
Superbonus, Adobe All-star points for help with my Spry Menu Bar, which is not showing submenus. I get an error message saying the following:
This document contains Javascript code for a widget that no longer exists. If you don't remove the code, the browser might display Javascript errors when loading the page. Would you like Dreamweaver to find all the
instances of the code for you?
Widget: var Menu Bar 1 = New.Spry.Widget.MenuBar ("MenuBar1"; {imgdown:"SpryAssets/SpryMenuBarDownHover.gif",imgRight:"SpryAssets/SpryMenuBarRightHover .gif"});
Thank you as always!
Ken D
Creative Director
Grateful Creative
www.gratefulcreative.comUse CSS floats. Posted here with inline styles for expediency. Ideally, you should set-up some re-usable classes for floats & clearing in your external style sheet.
<div style="float:left; width:250px">
<a href="http://www.andremadizmma.com"><img src="images/Bulldog_logo3.png" border="0"></a>
</div>
More on Floats:
http://css.maxdesign.com.au/floatutorial/
(='.'=)
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
http://alt-web.com/ -
Dreamweaver trouble with Spry Menu
It must be getting late, as I can't seem to get this to work.
I am experimenting with a spry menu for the school I work at.
The site I made earlier is www.wmes.ca
The school would like to have the site updated, so I figured I would do so by using a spry menu in place of the one I did in photoshop with the drop downs (see above link). Personally i liked this method and found it quite easy, however, it is now a depracated feature.
As said already, I am working with just a goofy template I've made to see if I can make the spry menu work on a site that is 760 px wide. The menu appears to work, but it is not 760 px long. Also, in IE, the drop down menus span horizontally on the page instead of vertically. I can't explain this either.
The last thing my tired eyes can't detect is the place to make the text on rollover bold.
The current site can be viewed at www.prestigeinteractive.com/wmems
I would appreciate a fresh set of eyes.
Thanks for your time,
Greg
files are attachedThe Spry menu customisation tutorial that David wrote may be of help to you: (this takes you to the width customisation page - but start at the beginning to understand all the style rules that apply to the menu).
http://foundationphp.com/tutorials/sprymenu/customize3.php
You need to specify a width in three places, so that IE doesn't show the submenus horizontally instead of vertically - explained in the tutorial link above. -
Having Trouble with Spry Menu Bar Hover Image
I added a hover image to the spry menu bar, however, whenever I roll my mouse over the buttons all, but one of the buttons' fonts grow in size, also increase the size of the button. Can someone please help me with this?
Hello,
the culprit must be in your (horizontal or vertical) "SpryMenuBar.........al.css". Please send us a link to your website in question, so we can better analyze.
BUT, and I quote from different contributions of the forum:
"Spry has been deprecated and is no longer officially supported by Adobe", “Adobe abandoned Spry late last year after CS6 came out. Future products will probably not contain any Spry so learning to use jQuery is a valuable skill to have for the future.” “The news was released in August last year: http://blogs.adobe.com/dreamweaver/2012/08/update-on-adobe-spry-framework-availability.htm l”.
I'd recommend you switch to a jQuery library for your further requirements.
If you have a budget to work with, look at PVII's Pop-Menu Magic3:
http://www.projectseven.com/products/menusystems/pmm3/index.htm
jQuery Superfish (free): http://users.tpg.com.au/j_birch/plugins/superfish/ aso.
Hans-Günter -
Trouble with IE7 & DW Spry Menu
I don't know what is happening, but for some reason IE 7
seems to be the only browser with this issue. If you view this
page:
http://www.parkwaygaming.com/index2.php
you will notice that the spry menu works, but the background
feature is not loading and it's just white. At first I thought it
might have been the z-index, so I messed with that to no avail.
Then I checked my paths to be sure, but then I asked myself, why
would Firefox, Safari and Camino all load the page fine and IE 7
not. The version I am using of IE 7 is 7.0.6000.16473 which is the
latest build on Windows Vista (x64 edition, although both the
32-bit and 64-bit versions of the browser render with the same
issue).
Does anyone know a workaround for this?Thank you for checking up on this. I honestly found the
resolution last night so I will now post what happened and what we
found to be the problem. There is a code at the very bottom of the
Spry code which looks like this:
@media screen, projection
ul.MenuBarHorizontal li.MenuBarItemIE
display: inline;
f\loat: left;
background: #FFF;
This is the default CSS for the SpryMenu CSS code. I updated
the background here to be transparent. What was happening with IE 7
was that it was reading both codes and because this one came second
it was always overriding the original CSS code that was being
written. Whereas the other browsers were just reading the top
portion and never seeing the bottom. IE 7, for the most part, tends
to handle code a lot cleaner than previous versions of IE and I
really don't think it needs some of these IE special codes as much
as they used to. However, without the background being marked as
transparent in that location, the default White background would
always show making my menu unreadable since the text was White and
then on rollover it showed Blue.
Hopefully Adobe can make updates to this code for all DW CS3
users so that more do not complain about the IE 7 bug caused by
this extra piece of code. If you need any further information
regarding this bug feel free to post back and I will try to help
however I can. -
Spry Menu Bar Colors and Pictures in Dreamweaver
I'm having some trouble changing the color of the spry menu
bars that I created in Dreamweaver. Whenever I preview them in a
browser they show up as grey with black text. What I want them to
show up as is blue with white text before the mouse goes over them
and highlights them. When the mouse goes over them I want them to
still be blue with white text and also my drop down menu options as
well.
What would be the fastest and easiest way to do this and if
there is what css code is required for me to change? I'm unfamiliar
with how css code works.
I'm also having some problems with copying and pasting
pictures and editing them too. what software can i download that is
free that i can use to edit my pictures.
I have the trial version mind you and I'm trying to get this
finished as fast as I can.> What would be the fastest and easiest way to do this and
if there is what
> css
> code is required for me to change?
Bring up your page and adjust the CSS in the
SpryMenuHorizontal.css or
SpryMenuVertical.css page that is attached. All the color
values are in
there.
>I'm unfamiliar with how css code works.
You need to change this. Without a thorough working knowledge
of HTML and
CSS (at the very least), you will never have great success in
either
Dreamweaver or web design. I first learned web design using
Notepad, typing
every single tag, and I am soo grateful now that I had that
solid coding
experience .. without it, this program would be very hard to
master.
> I'm also having some problems with copying and pasting
pictures and
> editing
> them too. what software can i download that is free that
i can use to edit
> my
> pictures.
Free? I'm not sure any more .. you can use either the 30 day
trial of
Fireworks or Photoshop (Fireworks would probably be easier to
pick up) but
if you're going to do a lot of this, you need to get some
good tools and
learn them well.
Nancy Gill
Adobe Community Expert
Author: Dreamweaver 8 e-book for the DMX Zone
Co-Author: Dreamweaver MX: Instant Troubleshooter (August,
2003)
Technical Editor: Dreamweaver CS3: The Missing Manual,
DMX 2004: The Complete Reference, DMX 2004: A Beginner's
Guide
Mastering Macromedia Contribute
Technical Reviewer: Dynamic Dreamweaver MX/DMX: Advanced PHP
Web Development -
Spry menu bar in firefox not telescoping main li horizontally
I am having trouble with my spry menu bar in firefox and chrome not telescoping horizontally. In IE8 they tile horizontally but in firefox(3.6.10) and chrome(6.0.472.63) they stay tiled vertically.
Example:
IE8
[menu1][menu2][menu3][menu4][menu5]
FF and Chrome
[menu1]
[menu2]
[menu3]
[menu4]
[menu5]
I do not think that it is the css due to it not telescoping when I view it in live view in dreamweaver cs4. SO I am thinking it is someting in the javascript that is just for IE.
ANy help or a push in the right direction would be great.
here is the css
/* 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: default;
width: 100%;
/* 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: 19.8%;
float: center;
z-index: 100;
/* 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;
float: none;
/* 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;
text-align: left;
ul.MenuBarHorizontal a.NoPadding
padding: 0.39em 0.75em;
*//* 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;
background-color:transparent;
/* 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:transparent;
color:#2A0000;
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: 100% 50%;
z-index:100;
/* 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%;
z-index:100;
/* 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%;
z-index:100;
/* 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%;
z-index:100;
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;
z-index:100;
#MenuBar1{
position:relative;
margin-top:-10px;
margin-bottom:0px;
z-index:1010;
***And the javascript***
var Spry; if (!Spry) Spry = {}; if (!Spry.Widget) Spry.Widget = {};
Spry.BrowserSniff = function()
var b = navigator.appName.toString();
var up = navigator.platform.toString();
var ua = navigator.userAgent.toString();
this.mozilla = this.ie = this.opera = this.safari = false;
var re_opera = /Opera.([0-9\.]*)/i;
var re_msie = /MSIE.([0-9\.]*)/i;
var re_gecko = /gecko/i;
var re_safari = /(applewebkit|safari)\/([\d\.]*)/i;
var r = false;
if ( (r = ua.match(re_opera))) {
this.opera = true;
this.version = parseFloat(r[1]);
} else if ( (r = ua.match(re_msie))) {
this.ie = true;
this.version = parseFloat(r[1]);
} else if ( (r = ua.match(re_safari))) {
this.safari = true;
this.version = parseFloat(r[2]);
} else if (ua.match(re_gecko)) {
var re_gecko_version = /rv:\s*([0-9\.]+)/i;
r = ua.match(re_gecko_version);
this.mozilla = true;
this.version = parseFloat(r[1]);
this.windows = this.mac = this.linux = false;
this.Platform = ua.match(/windows/i) ? "windows" :
(ua.match(/linux/i) ? "linux" :
(ua.match(/mac/i) ? "mac" :
ua.match(/unix/i)? "unix" : "unknown"));
this[this.Platform] = true;
this.v = this.version;
if (this.safari && this.mac && this.mozilla) {
this.mozilla = false;
Spry.is = new Spry.BrowserSniff();
// Constructor for Menu Bar
// element should be an ID of an unordered list (<ul> tag)
// preloadImage1 and preloadImage2 are images for the rollover state of a menu
Spry.Widget.MenuBar = function(element, opts)
this.init(element, opts);
Spry.Widget.MenuBar.prototype.init = function(element, opts)
this.element = this.getElement(element);
// represents the current (sub)menu we are operating on
this.currMenu = null;
this.showDelay = 250;
this.hideDelay = 600;
if(typeof document.getElementById == 'undefined' || (navigator.vendor == 'Apple Computer, Inc.' && typeof window.XMLHttpRequest == 'undefined') || (Spry.is.ie && typeof document.uniqueID == 'undefined'))
// bail on older unsupported browsers
return;
// Fix IE6 CSS images flicker
if (Spry.is.ie && Spry.is.version < 7){
try {
document.execCommand("BackgroundImageCache", false, true);
} catch(err) {}
this.upKeyCode = Spry.Widget.MenuBar.KEY_UP;
this.downKeyCode = Spry.Widget.MenuBar.KEY_DOWN;
this.leftKeyCode = Spry.Widget.MenuBar.KEY_LEFT;
this.rightKeyCode = Spry.Widget.MenuBar.KEY_RIGHT;
this.escKeyCode = Spry.Widget.MenuBar.KEY_ESC;
this.hoverClass = 'MenuBarItemHover';
this.subHoverClass = 'MenuBarItemSubmenuHover';
this.subVisibleClass ='MenuBarSubmenuVisible';
this.hasSubClass = 'MenuBarItemSubmenu';
this.activeClass = 'MenuBarActive';
this.isieClass = 'MenuBarItemIE';
this.verticalClass = 'MenuBarVertical';
this.horizontalClass = 'MenuBarHorizontal';
this.enableKeyboardNavigation = true;
this.hasFocus = false;
// load hover images now
if(opts)
for(var k in opts)
if (typeof this[k] == 'undefined')
var rollover = new Image;
rollover.src = opts[k];
Spry.Widget.MenuBar.setOptions(this, opts);
// safari doesn't support tabindex
if (Spry.is.safari)
this.enableKeyboardNavigation = false;
if(this.element)
this.currMenu = this.element;
var items = this.element.getElementsByTagName('li');
for(var i=0; i<items.length; i++)
if (i > 0 && this.enableKeyboardNavigation)
items[i].getElementsByTagName('a')[0].tabIndex='-1';
this.initialize(items[i], element);
if(Spry.is.ie)
this.addClassName(items[i], this.isieClass);
items[i].style.position = "static";
if (this.enableKeyboardNavigation)
var self = this;
this.addEventListener(document, 'keydown', function(e){self.keyDown(e); }, false);
if(Spry.is.ie)
if(this.hasClassName(this.element, this.verticalClass))
this.element.style.position = "relative";
var linkitems = this.element.getElementsByTagName('a');
for(var i=0; i<linkitems.length; i++)
linkitems[i].style.position = "relative";
Spry.Widget.MenuBar.KEY_ESC = 27;
Spry.Widget.MenuBar.KEY_UP = 38;
Spry.Widget.MenuBar.KEY_DOWN = 40;
Spry.Widget.MenuBar.KEY_LEFT = 37;
Spry.Widget.MenuBar.KEY_RIGHT = 39;
Spry.Widget.MenuBar.prototype.getElement = function(ele)
if (ele && typeof ele == "string")
return document.getElementById(ele);
return ele;
Spry.Widget.MenuBar.prototype.hasClassName = function(ele, className)
if (!ele || !className || !ele.className || ele.className.search(new RegExp("\\b" + className + "\\b")) == -1)
return false;
return true;
Spry.Widget.MenuBar.prototype.addClassName = function(ele, className)
if (!ele || !className || this.hasClassName(ele, className))
return;
ele.className += (ele.className ? " " : "") + className;
Spry.Widget.MenuBar.prototype.removeClassName = function(ele, className)
if (!ele || !className || !this.hasClassName(ele, className))
return;
ele.className = ele.className.replace(new RegExp("\\s*\\b" + className + "\\b", "g"), "");
// addEventListener for Menu Bar
// attach an event to a tag without creating obtrusive HTML code
Spry.Widget.MenuBar.prototype.addEventListener = function(element, eventType, handler, capture)
try
if (element.addEventListener)
element.addEventListener(eventType, handler, capture);
else if (element.attachEvent)
element.attachEvent('on' + eventType, handler);
catch (e) {}
// createIframeLayer for Menu Bar
// creates an IFRAME underneath a menu so that it will show above form controls and ActiveX
Spry.Widget.MenuBar.prototype.createIframeLayer = function(menu)
var layer = document.createElement('iframe');
layer.tabIndex = '-1';
layer.src = 'javascript:""';
layer.frameBorder = '0';
layer.scrolling = 'no';
menu.parentNode.appendChild(layer);
layer.style.left = menu.offsetLeft + 'px';
layer.style.top = menu.offsetTop + 'px';
layer.style.width = menu.offsetWidth + 'px';
layer.style.height = menu.offsetHeight + 'px';
// removeIframeLayer for Menu Bar
// removes an IFRAME underneath a menu to reveal any form controls and ActiveX
Spry.Widget.MenuBar.prototype.removeIframeLayer = function(menu)
var layers = ((menu == this.element) ? menu : menu.parentNode).getElementsByTagName('iframe');
while(layers.length > 0)
layers[0].parentNode.removeChild(layers[0]);
// clearMenus for Menu Bar
// root is the top level unordered list (<ul> tag)
Spry.Widget.MenuBar.prototype.clearMenus = function(root)
var menus = root.getElementsByTagName('ul');
for(var i=0; i<menus.length; i++)
this.hideSubmenu(menus[i]);
this.removeClassName(this.element, this.activeClass);
// bubbledTextEvent for Menu Bar
// identify bubbled up text events in Safari so we can ignore them
Spry.Widget.MenuBar.prototype.bubbledTextEvent = function()
return Spry.is.safari && (event.target == event.relatedTarget.parentNode || (event.eventPhase == 3 && event.target.parentNode == event.relatedTarget));
// showSubmenu for Menu Bar
// set the proper CSS class on this menu to show it
Spry.Widget.MenuBar.prototype.showSubmenu = function(menu)
if(this.currMenu)
this.clearMenus(this.currMenu);
this.currMenu = null;
if(menu)
this.addClassName(menu, this.subVisibleClass);
if(typeof document.all != 'undefined' && !Spry.is.opera && navigator.vendor != 'KDE')
if(!this.hasClassName(this.element, this.horizontalClass) || menu.parentNode.parentNode != this.element)
menu.style.top = menu.parentNode.offsetTop + 'px';
if(Spry.is.ie && Spry.is.version < 7)
this.createIframeLayer(menu);
this.addClassName(this.element, this.activeClass);
// hideSubmenu for Menu Bar
// remove the proper CSS class on this menu to hide it
Spry.Widget.MenuBar.prototype.hideSubmenu = function(menu)
if(menu)
this.removeClassName(menu, this.subVisibleClass);
if(typeof document.all != 'undefined' && !Spry.is.opera && navigator.vendor != 'KDE')
menu.style.top = '';
menu.style.left = '';
if(Spry.is.ie && Spry.is.version < 7)
this.removeIframeLayer(menu);
// initialize for Menu Bar
// create event listeners for the Menu Bar widget so we can properly
// show and hide submenus
Spry.Widget.MenuBar.prototype.initialize = function(listitem, element)
var opentime, closetime;
var link = listitem.getElementsByTagName('a')[0];
var submenus = listitem.getElementsByTagName('ul');
var menu = (submenus.length > 0 ? submenus[0] : null);
if(menu)
this.addClassName(link, this.hasSubClass);
if(!Spry.is.ie)
// define a simple function that comes standard in IE to determine
// if a node is within another node
listitem.contains = function(testNode)
// this refers to the list item
if(testNode == null)
return false;
if(testNode == this)
return true;
else
return this.contains(testNode.parentNode);
// need to save this for scope further down
var self = this;
this.addEventListener(listitem, 'mouseover', function(e){self.mouseOver(listitem, e);}, false);
this.addEventListener(listitem, 'mouseout', function(e){if (self.enableKeyboardNavigation) self.clearSelection(); self.mouseOut(listitem, e);}, false);
if (this.enableKeyboardNavigation)
this.addEventListener(link, 'blur', function(e){self.onBlur(listitem);}, false);
this.addEventListener(link, 'focus', function(e){self.keyFocus(listitem, e);}, false);
Spry.Widget.MenuBar.prototype.keyFocus = function (listitem, e)
this.lastOpen = listitem.getElementsByTagName('a')[0];
this.addClassName(this.lastOpen, listitem.getElementsByTagName('ul').length > 0 ? this.subHoverClass : this.hoverClass);
this.hasFocus = true;
Spry.Widget.MenuBar.prototype.onBlur = function (listitem)
this.clearSelection(listitem);
Spry.Widget.MenuBar.prototype.clearSelection = function(el){
//search any intersection with the current open element
if (!this.lastOpen)
return;
if (el)
el = el.getElementsByTagName('a')[0];
// check children
var item = this.lastOpen;
while (item != this.element)
var tmp = el;
while (tmp != this.element)
if (tmp == item)
return;
try{
tmp = tmp.parentNode;
}catch(err){break;}
item = item.parentNode;
var item = this.lastOpen;
while (item != this.element)
this.hideSubmenu(item.parentNode);
var link = item.getElementsByTagName('a')[0];
this.removeClassName(link, this.hoverClass);
this.removeClassName(link, this.subHoverClass);
item = item.parentNode;
this.lastOpen = false;
Spry.Widget.MenuBar.prototype.keyDown = function (e)
if (!this.hasFocus)
return;
if (!this.lastOpen)
this.hasFocus = false;
return;
else if (element.currentStyle)
value = element.currentStyle[Spry.Widget.MenuBar.camelize(prop)];
catch (e) {}
return value == 'auto' ? null : value;
Spry.Widget.MenuBar.getIntProp = function(element, prop)
var a = parseInt(Spry.Widget.MenuBar.getStyleProp(element, prop),10);
if (isNaN(a))
return 0;
return a;
Spry.Widget.MenuBar.getPosition = function(el, doc)
doc = doc || document;
if (typeof(el) == 'string') {
el = doc.getElementById(el);
if (!el) {
return false;
if (el.parentNode === null || Spry.Widget.MenuBar.getStyleProp(el, 'display') == 'none') {
//element must be visible to have a box
return false;
var ret = {x:0, y:0};
var parent = null;
var box;
if (el.getBoundingClientRect) { // IE
box = el.getBoundingClientRect();
var scrollTop = doc.documentElement.scrollTop || doc.body.scrollTop;
var scrollLeft = doc.documentElement.scrollLeft || doc.body.scrollLeft;
ret.x = box.left + scrollLeft;
ret.y = box.top + scrollTop;
} else if (doc.getBoxObjectFor) { // gecko
box = doc.getBoxObjectFor(el);
ret.x = box.x;
ret.y = box.y;
} else { // safari/opera
ret.x = el.offsetLeft;
ret.y = el.offsetTop;
parent = el.offsetParent;
if (parent != el) {
while (parent) {
ret.x += parent.offsetLeft;
ret.y += parent.offsetTop;
parent = parent.offsetParent;
// opera & (safari absolute) incorrectly account for body offsetTop
if (Spry.is.opera || Spry.is.safari && Spry.Widget.MenuBar.getStyleProp(el, 'position') == 'absolute')
ret.y -= doc.body.offsetTop;
if (el.parentNode)
parent = el.parentNode;
else
parent = null;
if (parent.nodeName){
var cas = parent.nodeName.toUpperCase();
while (parent && cas != 'BODY' && cas != 'HTML') {
cas = parent.nodeName.toUpperCase();
ret.x -= parent.scrollLeft;
ret.y -= parent.scrollTop;
if (parent.parentNode)
parent = parent.parentNode;
else
parent = null;
return ret;
Spry.Widget.MenuBar.stopPropagation = function(ev)
if (ev.stopPropagation)
ev.stopPropagation();
else
ev.cancelBubble = true;
if (ev.preventDefault)
ev.preventDefault();
else
ev.returnValue = false;
Spry.Widget.MenuBar.setOptions = function(obj, optionsObj, ignoreUndefinedProps)
if (!optionsObj)
return;
for (var optionName in optionsObj)
if (ignoreUndefinedProps && optionsObj[optionName] == undefined)
continue;
obj[optionName] = optionsObj[optionName];
Any help would be appreciated
RayUhh no, both issues are still occurring. Please look at the site http://appventurousllc.com in
Firefox and IE and you will see that the issues are still present. -
Spry Menu bar mouse-over?
Hi there,
I have created a spry menu bar and it's almost finished but I am having trouble with these 2 things:
1. Only the buttons that have submenus change when the mouse pointer moves over it. This happened when I applied a background image to the buttons.
2. I don't want the background image to be applied to the submenu items. I want those to have just 1 color and another color when the mouse pointer moves over it. (If this last part isn't possible, I would just like the first part to happen: I want it to have a color and not the background image that I applied)
Could you please have a look at my CSS and tell me what I did wrong? Or what I should add?
Thank you very very much.
EC
/* The outermost container of the Menu Bar, an auto width box with no margin or padding */
ul.MenuBarHorizontal
padding: 0;
list-style-type: none;
font-size: 155%;
cursor: default;
width: auto;
font: "Bell MT";
margin: 0;
/* 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: 90%;
position: relative;
text-align: left;
cursor: pointer;
width: 204.8px;
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: 204.8px;
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: 204.8px;
/* Submenus should appear slightly overlapping to the right (95%) and up (-5%) */
ul.MenuBarHorizontal ul ul
position: absolute;
margin: 0 0 0 0;
/* 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 #151515;
/* 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 2.5em;
color: #C3C2C2;
text-decoration: none;
background-image: url(Skyline/images/Background%20Menu%202.png);
background-repeat: repeat-x;
/* 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: #414040;
color: #C3C2C2;
/* 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: #414040;
color: #C3C2C2;
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(Skyline/images/Background%20Menu%202.png);
background-repeat: repeat-x;
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-repeat: no-repeat;
background-position: 95% 50%;
background-color: #414040;
/* 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(SpryAssets/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(SpryAssets/SpryMenuBarRightHover.gif);
background-repeat: no-repeat;
background-position: 95% 50%;http://foundationphp.com/tutorials/sprymenu/customize2.php
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
http://alt-web.com/
http://twitter.com/altweb -
How Do I Create an Editable Spry Menu as part of a Template?
I am having considerable trouble trying to work out an issue and hope you can help. I have been working on a webpage that I would like to be a template for a fundraiser we are doing. I used a horizontal spry menu and a vertical spry menu. I have two youtube videos that I would like embedded on the page, but I would like the flexibility to change them for different pages. I am trying to make my horizontal and vertical spry menus editable since I am going to be making pages for all items in the menus. I can't seem to set this up correctly. Can you tell me what I am doing wrong? I have been able to set up editable regions according to my template file, however, when I open the template, I am unable to edit the spry menus or edit the youtube videos. Setting up editable regions also seems to change the look of my page.
Here is what I would like all the pages to look like: http://www.ymimusic.com/shoppers_guide.html
But this is how it looks presently when I try to make a page from the template I created following the instructions from the course: http://www.ymimusic.com/test.html
Since I cannot get the template to work the way I would like, I have not created any links yet. I can send you the template and html page if this will help. Thank you for your help in advance./p>Murray,
I am just opening your responses now. I will try to clarify again. "There's the rub. This is not a wise choice. A completely different menu in each page will not only confuse your visitors, it will drive you insane. I strongly suggest you not do this." You were referring to "What throws us off the track is your wish to be able to have a different menubar in each page. In that case the menubar will need to be in an editable region."
What I am simply trying to do is this: If I create a menu that has the following links: About Us, Products, and Contact Us on one page, I want my customers to see the SAME menu on the About Us page, the Products page and the Contact Us page. I am NOT creating different menus on each page. I am trying to automate the format by creating a template that will show these links on each page without me redoing it every page.
When I attempted this, and created a page from the template, I could not get into the menu to assign links to different pages. Using the above example, If I created my About Us page as the template for the site, then created the Products page from the template, I need the ability to assign the links on the Products page to the About Us and Contact Us pages. The page created from the template does not allow me to do this. I cannot get in to assign the links in the Properties section of Dreamweaver. I even attempted to do the following action in the .dwt file I created:
Modify > Templates > Make Attribute Editable
I did this to make the links editable after creating the template. This obviously didn't work.
To summarize: I do NOT want to make different menus on each page. I simply want to create the two menus you see (one horizontal and one vertical) that will be part of the template. I am trying figure out when I assign the links and How. I will go back and read your notes as well as read the help section (F1) as you requested, however that is why I contacted you; I did not understand what I was doing wrong. I have been working with a course series in Lynda.com that has explained much of what to do up to my problem spot, I simply need to understand the concept.
Thank you for your assistance. -
Added a spry menu bar and site works in firefox but not in chrome or IE. Please help
Hello,
I'm a photographer by trade and have only picked up enough web design knowledge in order to build a website that isn't distracting to my photographs and is simple to update and mantain. Please breakdown any answers to my questions in very simple terms.
To start off here is a link to my site for reference. www.cechternach.com
1. My Biggest problem right now is that my site works in firefox but appears as a blank white page in chrome and in IE it only shows my background color.
I'm assuming that this has something to do with the spry menu bar I added. The galleries, banner, and footer were all part of a previous version of this website that didn't use the menu bar. I actually used png's exported from an illustrator as buttons. I've been wrestling with this menu bar for a few days now. I had an issue with the menubar forcing down the gallery below it. that was fixed by changing a position value from relative to absolute in the menubar css. Then I couldn't see the submenu over the galleries. I think I fixed that with a wmode change but I"m not sure if I did that right. I believe i needed to change that in the object and embed part of the code. One spot for certain browsers and the other spot for other browsers. I was a little confused on this because i also read that i needed to change the wmode in the javascript file in dreamweaver cs4 which is what i'm using. Whatever wmode I changed it seemed to work in firefox. The submenu background was showing up transparent but i fixed that in the menubar css.
2. I would like the submenu's to have a semi transparent blurred background effect. Is this possible with a spry menu bar?
3. How do I center my text in the submenu?
4. My menu bar buttons should be the same font as my name in my banner. It looks fine on my computer that has that font loaded but on other computers I was testing the site on the menubar buttons show up as a default font. How can i fix this?
5. Is there any way to get rid of the grey lines that show up around my slideshow pro galleries and menu bar buttons when they are clicked?
The last four questions aren't as important as the first one. I may be upsetting the flow of the forum as well. Please let me know if I'm not following procedure with any of my questions. Feel free to point out any other problems you see with my page. I'm trying to learn this as I go. Thanks in advance.Spry widgets, which includes the SpryMenuBar, in their original state do not pose any problem in any browser!
Widgets contain two parts
JavaScript which drives the widget
CSS which styles the widget to individual tastes
The most common reason for a widget to misbehave especially in IE is because the inexperienced web developer has upset the delicate balance of the CSS. I say delicate, because in the original, great care has been taken by the Spry team to ensure cross browser compatibility.
There are other reasons why a whole page can misbehave. In these cases, the culprit should be sought outside of the Spry framework.
When trouble shooting, I would first of all comment out all of the Spry Spry parts and test the page in IE. If it does work after that, then yes come back here and we will have a look at the SpryMenuBarHorizontal.css for you.
If it doesn't work after disabling Spry, then have a look at the coding and the CSS for your page and fix that.
I hope this helps.
Ben -
Spry Menu Giving the Blues with IE
I'm having trouble with my horizontal spry menu. I have added
it and it looks great in Firefox. No problems at all, exactly how I
like it. But when previewed in Internet Explorer it doesn't show at
all. There's nothing. I've inserted the "mark of the web." Nothing.
I don't really know where I'm going wrong. I'm relatively new to
Dreamweaver and am using CS4. Can someone please help? My .css for
the spry is:
/* 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: 10px;
cursor: default;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
color: #FFF;
background-color: #4F004F;
text-align: center;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
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;
background-color: #4F004F;
/* Menu item containers, position children relative to this
container and are a fixed width */
ul.MenuBarHorizontal li
margin: 1;
padding: 0;
list-style-type: none;
font-size: 10px;
position: relative;
text-align: center;
cursor: pointer;
width: 9.6em;
float: left;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-weight: bold;
color: #FFF;
background-color: #4F004F;
white-space: nowrap;
/* 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: 10em;
position: absolute;
left: -1000em;
background-color: #4F004F;
/* 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;
background-color: #4F004F;
/* Menu item containers are same fixed width as parent */
ul.MenuBarHorizontal ul li
background-color: transparent;
float: none;
/* Submenus should appear slightly overlapping to the right
(95%) and up (-5%) */
ul.MenuBarHorizontal ul ul
position: absolute;
margin: -5% 0 0 95%;
background-color: #4F004F;
/* 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;
background-color: #4F004F;
DESIGN INFORMATION: describes color scheme, borders, fonts
/* Submenu containers have borders on all sides */
ul.MenuBarHorizontal ul
border: 1px solid #CCC;
background-color: #4F004F;
width: inherit;
/* Menu items are a light gray block with padding and no text
decoration */
ul.MenuBarHorizontal a
display: block;
cursor: pointer;
background-color: #4F004F;
padding: 0.5em 0.75em;
color: #FFF;
text-decoration: none;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 10px;
font-weight: bold;
white-space: normal;
/* 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: #4F004F;
color: #FFF;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 10px;
font-weight: bold;
/* 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: #4F004F;
color: #FFF;
ul.MenuBarHorizontal a.MenuBarItemHover {
background-color: #690;
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%;
background-color: #4F004F;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 10px;
color: #FFF;
font-weight: bold;
/* 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%;
background-color: #4F004F;
/* 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%;
background-color: #690;
/* 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%;
background-color: #690;
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);
width: auto;
/* 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: none;
f\loat: left;
background: #FFF;I posted this message also in another forum. The menu bar seems to work fine in IE8, and other Firfox , Opera, Google Chrome but not in Internet Explorer 6 or 7. When you click on the drop down, it goes up instead of going down. The main page is at http://www.nchampion.com
Thank You for any assistance anyone can provide -
Added Spry menu in CS3, site is entirely blank in IE 6 or 7, fine in FF, mac
I've about had it. Built a site, posted here with some issues
with a P7 menu adding blue bar. I deleted all the P7 code...page
was back to normal, but without a navigation bar. So, I added one
of the new Spry bars in DW, set it all up, tested it on my Mac,
works fine.
I upload all pages to server, open it in Explorer 6 and 7 on
PC, and I get one blank white page! I downloaded Firefox for PC,
and the site is fine there. It's fine everywhere else. At first, I
had just the background tile in IE. Didn't panic yet. Did some
stuff, and then even that is gone.
I can not comprehend where to begin troubleshooting this. I
did not backup the site before I started screwing with this, so I'm
in trouble here.
the url is
http://www.auroratownship.org/proto
Do you guys see a plain white page too? If you have Firefox
or another browser, can you try it there as well to see what it is
supposed to look like? I even tried deleting all the Spry menu
stuff, didn't matter.
HELP!So far I've not spotted the problem for usre, but there is
one
validation error that you should fix, just in case.
<noscript>
<map>
Menu provided by f-source.com, All Rights Reserved. <a
href="
http://f-source.com">Web
menu</a>
</map>
</noscript>
remove that errant <map></map> tag and see what
happens.
E. Michael Brandt
www.divaHTML.com
divaGPS | divaFAQ
www.valleywebdesigns.com
JustSo PictureWindow
synterx wrote:
> I've about had it. Built a site, posted here with some
issues with a P7 menu
> adding blue bar. I deleted all the P7 code...page was
back to normal, but
> without a navigation bar. So, I added one of the new
Spry bars in DW, set it
> all up, tested it on my Mac, works fine.
>
> I upload all pages to server, open it in Explorer 6 and
7 on PC, and I get one
> blank white page! I downloaded Firefox for PC, and the
site is fine there. It's
> fine everywhere else. At first, I had just the
background tile in IE. Didn't
> panic yet. Did some stuff, and then even that is gone.
>
> I can not comprehend where to begin troubleshooting
this. I did not backup the
> site before I started screwing with this, so I'm in
trouble here.
>
> the url is
http://www.auroratownship.org/proto
>
> Do you guys see a plain white page too? If you have
Firefox or another
> browser, can you try it there as well to see what it is
supposed to look like?
> I even tried deleting all the Spry menu stuff, didn't
matter.
>
> HELP!
> -
I'm having trouble with a Spry Menu Bar not displaying
correctly in Internet Explorer, while it displays fine in every
other browser I have available. I've done some searching on these
boards, but the queries I've found with the same type of problem
each has a knowledgeable person editing the code for the
poster...and I can't seem to make heads or tails of it.
So, below is my link. What you'll see if viewed in Explorer
is that the "Clinics" listing and the "Services & Specialties"
listing are each on the same horizontal line, rather than vertical
like the rest of the menu. If anyone can help me in correcting this
problem, I'd be very appreciative.
Thanks in advance.
http://www.chambershospital.com/temp/about.htmlHello,
You might try removing all of the <div> tags you
inserted in the menu.
This can happen if you select text in design view and use the
"align" icons
in the properties window instead of using CSS to align
things.
For example:
<li>
<div align="left"><<****REMOVE THIS
<a href="clinics.html"
class="MenuBarItemSubmenu">Clinics</a>
<ul>
<li><a href="clinic.html">Chambers
Clinic</a></li>
<li><a href="clinic7.html">Scenic 7
Clinic</a></li>
</ul>
</div><<*** REMOVE THIS
</li>
So it looks like this:
<li><a href="clinics.html"
class="MenuBarItemSubmenu">Clinics</a>
<ul>
<li><a href="clinic.html">Chambers
Clinic</a></li>
<li><a href="clinic7.html">Scenic 7
Clinic</a></li>
</ul>
</li>
Repeat for all the other <div align="left"> and
</div> tags in the menu.
Take care,
Tim
"Zim74" <[email protected]> wrote in message
news:fv4vc0$r0t$[email protected]..
> I'm having trouble with a Spry Menu Bar not displaying
correctly in
> Internet
> Explorer, while it displays fine in every other browser
I have available.
> I've
> done some searching on these boards, but the queries
I've found with the
> same
> type of problem each has a knowledgeable person editing
the code for the
> poster...and I can't seem to make heads or tails of it.
>
> So, below is my link. What you'll see if viewed in
Explorer is that the
> "Clinics" listing and the "Services & Specialties"
listing are each on the
> same
> horizontal line, rather than vertical like the rest of
the menu. If
> anyone can
> help me in correcting this problem, I'd be very
appreciative.
>
> Thanks in advance.
>
>
http://www.chambershospital.com/temp/about.html
>
>
Maybe you are looking for
-
Using Loops with INDEX BY BINARY INTEGER
Hi, I have a little question with the next procedure: SET SERVEROUTPUT ON DECLARE TYPE dept_table_type IS TABLE OF hr.departments%ROWTYPE
-
Error in deploying a WebDynpro application
Hi All, I created a WebDynpro application and was unable to deploy it from NWDS. I had made all possible configurations like 1. setting the host name and IP address in the hosts file 2. Stating the server name instead of local host in the J2EE prefer
-
All, I'm looking for a Goods Receiving process that allows the receipt of multiple lines on a single PO. Currently we are using the FM 'BBP_CF_AUTOMATIC' which handles one line at a time and it seems when this is put in a loop the PO on the back en
-
Please post the ISO at the same time you post the fast track
Dear Microsoft, Please post the ISO at the same time you post the fast track. Your update downloads do not always go as planned (you upgrade the whole works, instead of just what changed) and it becomes necessary to wipe and reinstall with the curre
-
[svn:cairngorm3:] 16814: Migration to Flex 4.1 SDK.
Revision: 16814 Revision: 16814 Author: [email protected] Date: 2010-07-04 09:59:11 -0700 (Sun, 04 Jul 2010) Log Message: Migration to Flex 4.1 SDK. Modified Paths: cairngorm3/trunk/libraries/ModuleTest/.actionScriptProperties cairngorm