Spry horizontal menu font size question
OK so I got all the other quarks worked out on my menu but I can't figure out how to change the font sizes on the sub menus. I want the main menu text to be in 16px bold face. All of the dropdowns I would like in 12px normal. I have tried every varible in css and I can't just the sub menus to change, its eiter all of the menu options that change size of none of them. Please help. This should be a simple thing but nothing works. Thanks
Give your menu items a class as follows:
<li><a class="MenuBarItemSubmenu mainItem" href="#">Item 1</a>
<ul>
<li><a href="#" class="subItem">Item 1.1</a></li>
<li><a href="#" class="subItem">Item 1.2</a></li>
<li><a href="#" class="subItem">Item 1.3</a></li>
</ul>
</li>
then apply style rules for each class as follows:
<style type="text/css">
<!--
#MenuBar1 li .MenuBarItemSubmenu.mainItem {
font-size: 16px;
#MenuBar1 li ul li .subItem {
font-size: 10px;
-->
</style>
I hope this helps.
Ben
Similar Messages
-
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 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. -
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 menu's not displaying right in IE9
Presently I'm using Dreamweaver CS4. I have built a web site and placed a horizontal spry menu at the top of the web page. It is situated on the page just below a smaller non-spry horizontal menu. In IE9, the menu appears above and to the right of this smaller menu rather than in the location I want it to appear. What's more, in Dreamweaver the menu seems to float the upper right of the screen (I've attached a screen shot). When I review the web site in IE 7, Firefox, Chrome, Opera, and Safari, the menu is correctly placed.
Can anyone help solve this issue? When I view the web page in IE9 and put it into IE7 mode, all is well. Not so in IE9 (or IE8 for that matter).
I'd appreciate direct email as well as answering it here to help others with my quandry. My direct email address: [email protected].
Thank you!
This image shows you where the menu appears in Dreamweaver AND in IE9
This image shows you where the menu correctly displays in IE 7 (standard mode), Chrome, Firefox, Opera, and Safari.
The smaller navigation you see "Subscribe to Alerts" etc is controlled by the following code:
#secondarynav {
width: 475px;
margin: 0px 0px 0px 0px;
padding: 0px;
float: right;
/* height:20px; */
The entire page including these menus sits in a container (My Code):
#container {
width: 930px;
height:800px; /* changed from 775px */
margin: 0 auto;
border:1pt solid #c7a9a9;
background-color: #FFFFFF; /* added by WDM, 6/5/2012 to keep container white while page body is gray */
Control for Menu Bar: (My code)
#menubar1 ul{
z-index:5000;
margin:40px 20px 0px 0px;
LAYOUT INFORMATION: describes box model, positioning, z-order (Dreamweaver Code)
/* The outermost container of the Menu Bar, an auto width box with no margin or padding */
ul.MenuBarHorizontal
/* margin: 0; */
margin:-45px 0px 0px 200px;
padding: 0;
list-style-type: none;
font-size: 10pt; /* change from 100%, 12pt */
cursor: default;
width: auto;
float:left;
z-index: 5000;
/* Set the active Menu Bar with this class, currently setting z-index to accomodate IE rendering bug: http://therealcrisp.xs4all.nl/meuk/IE-zindexbug.html */
ul.MenuBarActive
z-index: 1000;
/* Menu item containers, position children relative to this container and are a fixed width */
ul.MenuBarHorizontal li
margin: 0;
padding: 0;
list-style-type: none;
font-size: 9pt; /* change from 100%, 12pt */
position: relative;
text-align: left;
cursor: pointer;
width: 15em; /* change from 8em */
float: left;
/* Submenus should appear below their parent (top: 0) with a higher z-index, but they are initially off the left side of the screen (-1000em) */
ul.MenuBarHorizontal ul
margin: 0;
padding: 0;
list-style-type: none;
font-size: 10pt; /* change from 100%, 12pt */
z-index: 1020;
cursor: default;
width: 13.0em; /* change from 8.2em/14.2 */
position: absolute;
left: -1000em;
/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to auto so it comes onto the screen below its parent menu item */
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible
left: auto;
/* Menu item containers are same fixed width as parent */
ul.MenuBarHorizontal ul li
width: 14.2em; /* change from 8.2em/14.2 */
/* Submenus should appear slightly overlapping to the right (95%) and up (-5%) */
ul.MenuBarHorizontal ul ul
position: absolute;
margin: 0 0 0 170px; /* change from -5% 0 0 80%; */
/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to 0 so it comes onto the screen */
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible ul.MenuBarSubmenuVisible
left: auto;
top: 0;I'm not sure where you attached files (I have not seen a way to do that in the Forum), But I will try to speak generally and work with what you have posted.
My suspicion is that the negative top margin you have applied is messing things up a bit.
I also note that it is usually better to apply margins to a CONTAINER of an unordered list (which is what menus are made of), than to apply the margins to the ul itself. So, restore the margin: 0; to the ul.MenuBarHorizontal style selector and create an enclosing element that bears the margin:-45px 0px 0px 200px; though I would still reconsider the use of negative top margin.
It is entirely possible that this simple change will help.
Please post the HTML for the top of the <body> section, including the menu code.
Beth -
Spry horizontal menu: submenu background problem in IE7
Hello,
I am using the Spry horizontal menu in this website: http://www.isis-papyrus.com
It works perfectly on all current version browsers, but in IE7 the white submenu background only shows behind the actual text for each link and not to the border of the submenu box.
I modified the css to allow for dynamic sizing for each submenu (see below).
Any suggestions would be greatly appreciated.
Best, Oliver
@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: 10px;
cursor: default;
width: auto;
font-family: Verdana, Geneva, sans-serif;
font-weight: normal;
/* 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: auto;
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: auto;
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: 100%;
clear:left;
float: none;
background-color: transparent;
color: #fff;
white-space: nowrap;
/* 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: 100%;
top: 0;
DESIGN INFORMATION: describes color scheme, borders, fonts
/* Submenu containers have borders on all sides */
ul.MenuBarHorizontal ul
border: 1px solid #339999;
/* Menu items are a light gray block with padding and no text decoration */
ul.MenuBarHorizontal a
display: block;
cursor: pointer;
background-color: #fff;
padding: 0.4em 0.8em;
color: #339999;
text-decoration: none;
white-space: nowrap;
/* 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: #fff;
color: #339999;
/* 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: #339999;
color: #fff;
/* 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;Thank you so much for your quick answer Beth!
You solved half my problem!
I added the bg-color to the li and ul styles of the submenus (css below) and now the white background shows correctly in IE7.
The only thing I still would like to resolve: The hover style for the menu items (inverse bg and text colors) only works for the actual text of the link and not for the entire width of the submenu box.
Any suggestions?
Thank you again.
Best, Oliver
@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: 10px;
cursor: default;
width: auto;
font-family: Verdana, Geneva, sans-serif;
font-weight: normal;
/* 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: auto;
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: auto;
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: 100%;
clear:left;
float: none;
background-color: #fff;
color: #fff;
white-space: nowrap;
/* 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: 100%;
top: 0;
DESIGN INFORMATION: describes color scheme, borders, fonts
/* Submenu containers have borders on all sides */
ul.MenuBarHorizontal ul
border: 1px solid #339999;
background-color: #FFF;
/* Menu items are a light gray block with padding and no text decoration */
ul.MenuBarHorizontal a
display: block;
cursor: pointer;
background-color: #fff;
padding: 0.4em 0.8em;
color: #339999;
text-decoration: none;
white-space: nowrap;
/* 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: #fff;
color: #339999;
/* 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: #339999;
color: #fff;
/* 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; -
(Spry) Horizontal Menu Alignment
I am currently working on designing my first web pages. Ever. I am having trouble making my Spry horizontal menu reach to both sides of my page, which is I have constrained to 720px wide. I have followed a few of the suggested answers to other threads, but to no avail. Any help would be appreciated, since there is obviously a ton that I don't know about this! The page is published to fivepinesphotography.com/index.php Thanks! I'm having a blast learning this stuff! Here's a screen shot if that helps...
You need to give the li items a fixed width. Since you have 8 items in a 720px menu, that means 90px each. Change the width property of ul.MenuBarHorizontal li from auto to 90px.
This will result in some of your menu items wrapping onto two lines. Fix this by changing padding in ul.MenuBarHorizontal a from 0.5em 0.75em to 0.5em 0.3em 0.5em 0.1em.
For the menu to look better, you need to choose slightly shorter labels for each menu item or make the font size slightly smaller.
While you're making the changes, get rid of that silly right-click blocker. Anyone who wants to look at your code or save your images can get around that blocker in seconds. -
Ok here is my problem. I am using the spry horizontal menu and am trying to make a list of drop down menus. Rather than having sub menus that have flyout child menus I just want to have a list of menus that have titles.
Basically What I want would be something like this
Header
Title
Link
Link
Link
Title2
Link
Link
Link
rather than:
Header
Title > Link
Link
Link
Title2 > Link
Link
Link
However, I can't figure out how to make my titles just be plain titles, rather than links. As it stands, when I hover over my titles, spry can't differentiate them from the actual links that will go to different pages.
I don't really care if they are still links, I can work around that. I guess my question is, is there a way to change the CSS so that some of the submenus look different then others
(ex. titles don't change font or background color but the rest of them highlight in blue)
Hope this makes sense,
Thanks in advanceSomething like this?
<ul id="MenuBar1" class="MenuBarVertical">
Title
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>
<ul id="MenuBar2" class="MenuBarVertical">
Title 1
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>
<script>
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
var MenuBar2 = new Spry.Widget.MenuBar("MenuBar2", {imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
</script>
I hope this helps.
Ben -
Spry Horizontal Menu straddles header
Problem: Spry Horizontal Menu straddles header
I created a new page using
"1 column elastic, centered, header and footer"
I add a Spry Horizontal Menu within the "header" div.
The menu does not display entirely within the grey header
area.
The menu straddles half in the header and half below the
header.
I believe this is because of the float i.e.
"ul.MenuBarHorizontal li" has "float: left;".
How do I make the menu stay entirely within the grey header
content area?
Thanks ahead of time.
<div id="header">
<ul id="MenuBar1" class="MenuBarHorizontal">
<li><a href="#">Home</a> </li>
<li><a href="#">People</a></li>
</ul>
</div>
.oneColElsCtrHdr #header {
background: #DDDDDD;
padding: 10px;
ul.MenuBarHorizontal li
margin: 0;
padding: 0;
list-style-type: none;
font-size: 100%;
position: relative;
text-align: left;
cursor: pointer;
width: auto;
float: left;Hi,
The original CSS has been very carefully composed so that it will work in all browsers. If you make any changes to the original and you do not know what you are doing, you are asking for problems.
When I look at your first set of rules and I see the following marked in red and a rules marked in green that are left out, then I know you will have a problem:
ul.MenuBarHorizontal
padding: 0;
list-style-type: none;
font-size: 100%;
cursor: default;
width: auto;
background-image: url(myImage.jpg); // rename the image to your own
background-repeat: repeat;
vertical-align: bottom;
float: none;
position: absolute;
margin: auto;
Keep in mind that the original stylesheet has no browser issues. Any changes that you make are for your account and have basically nothing to do with Spry.
My suggestion to you is, make a copy of the modified stylesheet for reference, then put back the original stylesheet. Consequently, make a new stylesheet called myStyles.css or similar, and put your changed rules in the newly created stylesheet eg.
ul.MenuBarHorizontal
background-image: url(myImage.jpg);
background-repeat: repeat;
Then attach this stylesheet to your document after the original stylesheet.
If you cannot get the required result, merely play around with the rules within myStyles.css.
I hope this helps.
Ben -
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 -
Cell column width using spry horizontal menu
Hi
Trying to set the cell column width using DWCS5.5 Spry Horizontal menu.
view-source:http://www.roatan.ws/spry-menu-bob
I used help to get directions and I think I did it correctly but I do not know for sure.
/* Menu item containers are same fixed width as parent */
ul.MenuBarHorizontal ul li
background-color: #356A68;
float: none;
background-color:transparent;
height: auto;
width: auto;
Trying to clean up my site and get things working an looking right.
Any suggestions appreciated
bobSpry menus do not contain any table columns or cells. They are just lists <ul> <li> tags styled with CSS.
ul.MenuBarHorizontal li
margin: 0;
padding: 0;
list-style-type: none;
font-size: 12px;
position: relative;
text-align: center;
cursor: pointer;
width: 8em; /**adjust top-menu width**/
float: left;
text-decoration: underline;
ul.MenuBarHorizontal ul
margin: 0;
padding: 0;
list-style-type: none;
font-size: 10px;
z-index: 1020;
cursor: default;
width: 8em; /**adjust sub-menu width**/
position: absolute;
left: -1000em;
background-color: #356A68;
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
http://alt-web.com/
http://twitter.com/altweb
http://alt-web.blogspot.com/ -
I am redesigning my current website:
redesign
and trying to implement an Spry Horizontal Menu but would like to
make the sub-menu orient horizontally below the main menu rather
than orient down vertically?
Sample: http:www.carreonphotography.com/index3.html
I have attached the code and any thoughts would be
appreciated greatly folks.
Thanks for your time and attention.
Ed CarreonHi,
The original CSS has been very carefully composed so that it will work in all browsers. If you make any changes to the original and you do not know what you are doing, you are asking for problems.
When I look at your first set of rules and I see the following marked in red and a rules marked in green that are left out, then I know you will have a problem:
ul.MenuBarHorizontal
padding: 0;
list-style-type: none;
font-size: 100%;
cursor: default;
width: auto;
background-image: url(myImage.jpg); // rename the image to your own
background-repeat: repeat;
vertical-align: bottom;
float: none;
position: absolute;
margin: auto;
Keep in mind that the original stylesheet has no browser issues. Any changes that you make are for your account and have basically nothing to do with Spry.
My suggestion to you is, make a copy of the modified stylesheet for reference, then put back the original stylesheet. Consequently, make a new stylesheet called myStyles.css or similar, and put your changed rules in the newly created stylesheet eg.
ul.MenuBarHorizontal
background-image: url(myImage.jpg);
background-repeat: repeat;
Then attach this stylesheet to your document after the original stylesheet.
If you cannot get the required result, merely play around with the rules within myStyles.css.
I hope this helps.
Ben -
Spry Horizontal Menu List Items crash IE6 browser
****Update*****
Apparently, it was width:100%; set on each hover over
background color for the list items in our default stylesheet that
was causing IE6 to crash.
Menus are in working order in all browsers now!
We have integrated the Spry Horizontal Menu with a website,
and added custom styling to SpryMenuBarHorizontal.css. The menu
works in Mozilla, Safari, and IE7. However, in IE6, after hovering
over the navigation, the drop down menu appears, but, as soon as
you move your mouse into the drop down to select an item from the
list, IE6 crashes. Every time. Various Computers.
We have tried reverting to the original
SpryMenuBarHorizontal.css file, however, the same problem occurs.
We haven't made any changes to the original js file
(SpryMenuBar.js).
Has anyone ever experienced this issue?
Here is our customized CSS:
@charset "UTF-8";
/* SpryMenuBarHorizontal.css - Revision: Spry Preview Release
1.4 */
/* Copyright (c) 2006. Adobe Systems Incorporated. All rights
reserved. */
LAYOUT INFORMATION: describes box model, positioning,
z-order
img#nfl {
background-image:url(/Images/slices/nfl.png);
background-repeat:no-repeat;
height:14px;
width:40px;
margin:7px auto auto 25px;
_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true,
sizingMethod=scale src="/Images/slices/nfl.png");
_background-repeat:no-repeat;
_background-image:none;
img#mlb {
background-image:url(/Images/slices/mlb.png);
background-repeat:no-repeat;
height:14px;
width:43px;
margin:7px 20px auto auto;
_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true,
sizingMethod=scale src="/Images/slices/mlb.png");
_background-repeat:no-repeat;
_background-image:none;
img#milb {
background-image:url(/Images/slices/milb.png);
background-repeat:no-repeat;
height:14px;
width:112px;
margin:7px auto auto auto;
_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true,
sizingMethod=scale src="/Images/slices/milb.png");
_background-repeat:no-repeat;
_background-image:none;
_margin:7px auto auto -10px;
img#ctown {
background-image:url(/Images/slices/ctown.png);
background-repeat:no-repeat;
height:14px;
width:114px;
margin:7px auto auto 50px;
_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true,
sizingMethod=scale src="/Images/slices/ctown.png");
_background-repeat:no-repeat;
_background-image:none;
_margin:7px auto auto 40px;
img#nba {
background-image:url(/Images/slices/nba.png);
background-repeat:no-repeat;
height:14px;
width:43px;
margin:7px auto auto 100px;
_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true,
sizingMethod=scale src="/Images/slices/nba.png");
_background-repeat:no-repeat;
_background-image:none;
_margin:7px auto auto 70px;
img#nhl {
background-image:url(/Images/slices/nhl.png);
background-repeat:no-repeat;
height:14px;
width:41px;
margin:7px auto auto 90px;
_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true,
sizingMethod=scale src="/Images/slices/nhl.png");
_background-repeat:no-repeat;
_background-image:none;
_margin:margin:7px auto auto 100px;
img#ncaa {
background-image:url(/Images/slices/ncaa.png);
background-repeat:no-repeat;
height:14px;
width:52px;
margin:7px auto auto 70px;
_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true,
sizingMethod=scale src="/Images/slices/ncaa.png");
_background-repeat:no-repeat;
_background-image:none;
_margin:7px auto auto 60px;
/* The outermost container of the Menu Bar, an auto width box
with no margin or padding */
ul.MenuBarHorizontal
list-style-type: none;
cursor: default;
width:950px;
height:32px;
background-image:url(/Images/slices/primaryNavSlice.png);
background-repeat:repeat-x;
margin:0px;
padding:0px;
vertical-align:middle;
border-bottom:1px solid #000;
/* 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: 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: 0px;
padding: 0px;
list-style-type: none;
font-size: 100%;
z-index: 1020;
cursor: default;
/*width: 8.2em;*/
width:auto;
position: absolute;
left: -1000em; /* without this all menus are visible without
hover */
/* 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; /* without this menus don't show up */
/* Menu item containers are same fixed width as parent */
ul.MenuBarHorizontal ul li
/*width: 8.2em;*/
width:auto;
DESIGN INFORMATION: describes color scheme, borders, fonts
/* Menu items are a light gray block with padding and no text
decoration */
ul.MenuBarHorizontal a
display: block;
cursor: pointer;
padding: 0.15em 0.15em;
text-decoration: none;
ul#teamsMenu table#teams {
font-family:Arial, Helvetica, sans-serif;
color:#000;
font-size:11px;
width:500px;
background-color:#fff!important;
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;
li.ncaa_list #teams.ncaa_table {
position:absolute;
left:-590px;
top:7px;
To center the tables in the screen
li.nfl_list #teams.nfl_table {
position:absolute;
top:7px;
li.mlb_list #teams.mlb_table {
position:absolute;
top:7px;
li.milb_list #teams.milb_table {
position:absolute;
left:-80px;
top:7px;
li.ctown_list #teams.ctown_table {
position:absolute;
top:7px;
li.nba_list #teams.nba_table {
position:absolute;
left:-200px;
top:7px;
li.nhl_list #teams.nhl_table {
position:absolute;
left:-190px;
top:7px;
li.ncaa_list #teams.ncaa_table {
position:absolute;
left:-590px;
top:7px;
}I am having the same problems in IE7. I'm using the latest
version of everything (Spry 1.6.1 and javascript file version 0.12)
and at first I was having the problem on my drop down menus
appearing horizontal with all the correct styles but when I changed
the rule ul.MenuBarHorizontal ul to position: relative; the drop
downs appear vertical now but I have no beige border around the
whole ul anymore and I'm getting white space inbetween list items.
http://www.wusf.usf.edu/Header_Nav_Footer_newStyleSheet.cfm
so if anyone has any advice I'd much appreciate it. Also i'm
using 1px width on my borders no decimals. -
Another SPRY horizontal menu problem with IE7
I posted this before, with no responses, but I think
I've narrowed it down to a CSS response problem with IE7.0. If you
view the attached link in Firefox or Opera, the menu background
color responds correctly on the drop downs. In IE7, the
background-color is ignored, causing the menu to be translucent
and, uh, ugly. Has anyone else had an issue with the
background-color CSS attribute in the SPRY horizontal menu css not
working?
HELLLLLP! and, uh, Thanks,
Karl
Prototype
link using spry, css, ajax sprites and other magic.>>
Regrettably, the silence from the forum has been deafening.
I'm not sure if folks are just wary of SPRY and AJAX issues right
now because they're so new or if it's the summer heat
>>
guess it´s all of that :-) But folks visiting these more
"general" Dreamweaver forums are not necessarily Spry experts
respectively might not even be interested in that -- you´ll
certainly get more response when posting Spry related questions in
the
Spry
forums @ Adobe Labs -
Spry Horizontal Menu Bar width problem in IE and Safari
Hi Everyone,
I am working on a template and have used Spry Horizontal Menu for quite a few sites now. This one is giving me problems though on the width of the navigation bar. It moves the last right menu item to the next row on the left in Safari and IE and Chrome, but looks perfect in Firefox. I'm using a googlefont for the text. As I have quite a few menu items I have them set to 'auto' width. Is there a fix to make all the others look like it does in Firefox or do I need to shorten my menu items by changing titles/reducing padding, etc.?
Working page can be viewed at www.ikanizi.com/index2.html
Many thanks.Anyone who increases their browser's text size will see the same thing. For wiggle room, reduce top-level links from 11 to no more than 7.
Nancy O.
Maybe you are looking for
-
Game Center doesn't work on iOS 6. It's crashing.
Game Center crashes every single time. On iPhone 4 it works fine. What can I do to make it work? Does it work for you?
-
Xmlns problem in XML manipulation
Hi I notice that if a xml (element having xmlns), and each time you assign, append or replace the child element you will always get xmlns in your child. For ex <a xmlns="http://www.w3.org/1999/xhtml"> <b/> </a> new element: <c> test </c> Appending
-
Hi All, I am into a support project. Customer is facing an issue, can any one suggest what needs to be done. In SAP Portal, customer clicks on Procurement Tab and then clicks on Shop. A pop up appears with Header as "Security Information" and the con
-
Buying & Installing Photoshop CC and Lightroom - Help
I Hate Adobe...Which I have always revered in the past. But this experience has been the worst software purchase & installation process in my life! This is most painful process I have ever been through trying to purchase and install software. User Fr
-
Mountain lion installation query
Friends, I have a MacBook Pro which came with snow leapord. Then I upgraded it to oS X Lion. This new installation happened over the existing OS, that was snow leapord. Now with new oS update which is coming today, I'm sure it will be installed on L