Browser preview menu bar navigation problems
Hey everyone I have a very strange problem that I honestly have no idea at all how to handle.
Below is a template I've put together. It's for a pump repair business site (to provide clarity on any content).
Everything was going smoothly, until I previewed it in the browser (using Firefox and Chrome). I can jump from page to page about twice, but, after that, especially when I try to return to the home page, I recieve an error like this:
' No webpage was found for the web address:file:///C:/Users/John/Desktop/Design/Merit%20Pump%20Website/MeritPump_Template.dwt '
And I am also not able to access my submenus in the browser preview, and inevitably NOTHING will work after the first few jumps between pages.
My code is below. Thank you so much for any help- this is my last major roadblock before I am able to publish.
<!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>Untitled Document</title>
<!-- TemplateEndEditable -->
<style type="text/css">
<!--
body {
font: 100% Verdana, Arial, Helvetica, 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 */
color: #000000;
background-color: #CCC;
p {
font-size: 13px;
.oneColFixCtrHdr #container {
width: 780px; /* using 20px less than a full 800px width allows for browser chrome and avoids a horizontal scroll bar */
background: #FFFFFF;
margin: 0 auto; /* the auto margins (in conjunction with a width) center the page */
border: 1px none #000000;
text-align: left; /* this overrides the text-align: center on the body element. */
.oneColFixCtrHdr #header h1 {
margin: 0; /* using padding instead of margin will allow you to keep the element away from the edges of the div */
padding-top: 0px;
padding-right: 0;
padding-bottom: 0px;
padding-left: 0;
.oneColFixCtrHdr #mainContent {
padding: 0 20px; /* remember that padding is the space inside the div box and margin is the space outside the div box */
background: #FFFFFF;
font-family: Tahoma, Geneva, sans-serif;
.oneColFixCtrHdr #footer {
padding: 0 10px;
background-color: #CCC;
.oneColFixCtrHdr #footer p {
margin: 0; /* zeroing the margins of the first element in the footer will avoid the possibility of margin collapse - a space between divs */
padding: 10px 0; /* padding on this element will create space, just as the the margin would have, without the margin collapse issue */
.footer {
font-family: Calibri;
font-size: 11px;
color: #333;
font-style: normal;
font-weight: normal;
padding: 5px;
line-height: 1px;
.disclaimer {
font-size: 11px;
text-align: left;
-->
</style>
<script src="../SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<script src="../Scripts/swfobject_modified.js" type="text/javascript"></script>
<link href="../SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
<!-- TemplateBeginEditable name="head" -->
<!-- TemplateEndEditable -->
</head>
<body class="oneColFixCtrHdr">
<div id="container">
<div id="header">
<h1>
<object id="FlashID" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="781" height="200">
<param name="movie" value="../Merit Pump Site Images/Merit_Banner-02-01.swf" />
<param name="quality" value="high" />
<param name="wmode" value="opaque" />
<param name="swfversion" value="9.0.45.0" />
<!-- This param tag prompts users with Flash Player 6.0 r65 and higher to download the latest version of Flash Player. Delete it if you don’t want users to see the prompt. -->
<param name="expressinstall" value="../Scripts/expressInstall.swf" />
<!-- Next object tag is for non-IE browsers. So hide it from IE using IECC. -->
<!--[if !IE]>-->
<object type="application/x-shockwave-flash" data="../Merit Pump Site Images/Merit_Banner-02-01.swf" width="781" height="200">
<!--<![endif]-->
<param name="quality" value="high" />
<param name="wmode" value="opaque" />
<param name="swfversion" value="9.0.45.0" />
<param name="expressinstall" value="../Scripts/expressInstall.swf" />
<!-- The browser displays the following alternative content for users with Flash Player 6.0 and older. -->
<div>
<h4>Content on this page requires a newer version of Adobe Flash Player.</h4>
<p><a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" /></a></p>
</div>
<!--[if !IE]>-->
</object>
<!--<![endif]-->
</object>
</h1>
<!-- end #header --></div>
<ul id="MenuBar1" class="MenuBarHorizontal">
<li><a href="../MP-index.html">Home</a> </li>
<li><a href="../MP-Kobepumps.html" class="MenuBarItemSubmenu">Services</a>
<ul>
<li><a href="../MP-Kobepumps.html">KOBE Pumps</a></li>
<li><a href="../MP-Myerspumps.html">MYERS Pumps</a></li>
<li><a href="../MP-Industrial.html">Industrial</a></li>
<li><a href="../MP-Oilfield.html">Oil Field</a></li>
</ul>
</li>
<li><a href="../MP-Contact.html">Contact</a> </li>
<li><a href="../MP-About.html">About Us</a></li>
</ul>
<div id="mainContent">
<p> </p>
<!-- TemplateBeginEditable name="content" -->
<p>Merit Pump and Equipment is an authorized dealer for <b><font color="#900">Kobe, Weatherford and Myers</font></b> pumps supplying you with both pumps and parts. We are also a factory authorized pump service center for your pump repair needs.</p>
<p class="MsoNormalCxSpMiddle" style="line-height:normal;"> <b><font color="#900">Myers</font></b> offers a complete line of submersible sump, sewage, effluent, grinder, non-clog and wastewater pumps, controls, basins and accessories, reciprocating, self-priming and pumping systems for residential, agricultural, commercial, municipal and industrial applications.</p>
<p class="MsoNormalCxSpMiddle" style="line-height:normal;"><b><font color="#900">Myers Aplex</font></b> offers a complete line of high quality, medium to heavy duty reciprocating pumps for both intermittent and continuous duty.</p>
<p class="MsoNormalCxSpMiddle" style="line-height:normal;"> <b><font color="#900">Kobe</font></b> offers a unique vertical plunger pump, as well as the Weatherford horizontal design for high pressure applications. The "Kobe" pump is especially well suited for extreme pressure services up to 30,000 PSIG.</p>
<p align="center" class="disclaimer" style="line-height:normal;"> </p>
<p align="center" class="disclaimer" style="line-height:normal;"><em>Other Lines we carry include LMI metering pumps, Hydra-cell pumps, Vector Peristaltic pumps, Grinnell butterfly valves, Milliken Valves, All-Flo diaphragm pumps, Blancett flow meters, Pacer pumps, Proco Products expansion joints and others.</em></p>
<p align="center" class="MsoNormalCxSpMiddle" style="line-height:normal;"> </p>
<table id="Table_01" width="740" height="60" border="0" cellpadding="0" cellspacing="0">
<tr>
<td><a href="http://www.columbiantectank.com"><img src="../Merit Pump Site Images/Service1.jpg" alt="" width="195" height="60" border="0" /></a></td>
<td><img src="../Merit Pump Site Images/Service2.jpg" width="172" height="60" alt="" /></td>
<td><a href="http://www.femyers.com/"><img src="../Merit Pump Site Images/Service3.jpg" alt="" width="184" height="60" border="0" /></a></td>
<td><img src="../Merit Pump Site Images/Service4.jpg" width="189" height="60" alt="" /></td>
</tr>
</table>
<!-- TemplateEndEditable -->
<p align="center" class="MsoNormalCxSpMiddle" style="line-height:normal;"> </p>
</div>
<div id="footer">
<p><span class="footer">© 2006 Merit Pump & Equipment CO. All rights reserved. | Home | About | Contact | FE Myers | Kobe Triplex |</span></p>
<p><span class="footer">975 Lincoln Way West, Wooster, OH 44691 | PO Box 960</span></p>
<!-- end #footer --></div>
<!-- end #container --></div>
<script type="text/javascript">
<!--
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
swfobject.registerObject("FlashID");
//-->
</script>
</body>
</html>
Hi!
1. file:///C: /Users/John/Desktop/Design/Merit%20Pump%20Website/MeritPump_ Template.dwt '
1.1 Suspicious are always these strings starting with file:///, what means, "DW thinks that every file you have linked to is outside the local root folder":
1.2. Don't use spaces in folders/filenames. Spaces get converted %20, you could use underscores eg.
2. ../MP-Kobepumps.html
Where is this file located? Please control your path in DW, maybe you need ../../, maybe you can do without it, depending on which level the file is situated/nested.
... maybe you can post a link to your page, no matter how it looks like.Hans-G.
Similar Messages
-
while opening pdf files the menu bar, navigation bar cracks unobviously and also close and minimise buttons goes hidden..Facing the problem for last one month. Please help.
The latest Kaspersky software version is 15.0.1.415 or 15.0.1.415ab.
-
Spry Menu Bar Positioning Problem in IE
I have a Dreamweaver-created Spry Menu Bar drop down menu which works perfectly in every browser on my Mac and on my PC . . . EXCEPT Internet Explorer (who woulda thunk it?!!)
In all browsers except for IE, the 3 submenu items under "Door Systems" and "Gallery" appear exactly as they should in a vertical row, positioned just below the brown line below the navigation links and all the same width. But in IE they appear higher up and with different widths. IE is ignoring the rules for width and position.
<ul id="MenuBar2" class="MenuBarHorizontal">
<li><a class="MenuBarItemSubmenu" href="closet_doors_gallery.html">DOOR SYSTEMS</a>
<ul>
<li><a href="sliding_doors_nyc_nj.html">DOOR PROFILES</a></li>
<li><a href="bifold_doors_nyc_nj.html">PANELS COLORS</a></li>
<li><a href="room_dividers_nyc_nj.html">DOOR SYSTEM TYPES</a></li>
</ul>
</li>
</ul>
<ul id="MenuBar3" class="MenuBarHorizontal">
<li><a class="MenuBarItemSubmenu" href="#">GALLERY </a>
<ul>
<li><a href="#">SLIDING DOORS</a></li>
<li><a href="#">BI-FOLD DOORS</a></li>
<li><a href="#">ROOM DIVIDERS</a></li>
</ul>
</li>
</ul>
Here is the page where you can see the problem if you view it with IE, and see that it's fine in Safari, and Firefox, Chrome and Opera, Mac or PC:
http://2113web.com/indeco/index.html
I have a feeling it's a simple fix of the css, but I can't figure it out - I would really appreciate anyone's help with it - thank you!
Below is the CSS:
@charset "UTF-8";
/* SpryMenuBarHorizontal.css - version 0.6 - Spry Pre-Release 1.6.1 */
/* Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. */
LAYOUT INFORMATION: describes box model, positioning, z-order
/* The outermost container of the Menu Bar, an auto width box with no margin or padding */
ul.MenuBarHorizontal
margin: 0;
padding: 0;
list-style-type: none;
font-size: 100%;
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: left;
cursor: pointer;
width: auto;
float: left;
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: 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;
top: 63px; /*THIS POSITIONS THE SUBMENU BELOW THE TOP MENU*/
/* Menu item containers are same fixed width as parent */
ul.MenuBarHorizontal ul li
float: none;
background-color:#f5f5e8;
height:25px; /*THIS POSITIONS THE SUBMENUS HEIGHT*/
/* Submenus should appear slightly overlapping to the right (95%) and up (-5%) */
ul.MenuBarHorizontal ul ul
position: absolute;
margin-top: -5%;
margin-right: 0;
margin-bottom: 0;
margin-left: 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:none;
/* Menu items are a light gray block with padding and no text decoration */
ul.MenuBarHorizontal a
display: block;
cursor: pointer;
background-color: transparent;
padding: 0.5em 0.75em;
color: #59330d;
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: transparent;
color: #afa06f;
/* 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: #afa06f;
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;
PerryHi and thank you very much. It was a little confusing as to whether you meant to add the rules you suggested or to replace them, or a combination of both, but I puzzled it out. I created a new MenuBarHorizontal.css file in a blank page and then made the changes you suggested and it works! Yay! I had to do a bit of tweaking to get it to look just the way I wanted, but it now works correctly in ie 7 and 8 and still works fine in everything else.
Interestingly enough, I had to change the margin-top: 63px; rule in "ul.MenuBarHorizontal ul.MenuBarSubmenuVisible" to 40px to get it positioned properly vertically, and I had to get rid of the "border-bottom: solid 1px #EEE;" in "ul.MenuBarHorizontal ul li", which caused the submenu items to have quite a lot of vertical space between them - I'm not sure why!
I also had to get rid of all the syling rules in the "SUBMENU INDICATION: styles if there is a submenu under a given menu item" section, as well as the one you added: "ul.MenuBarHorizontal a.MenuBarItemSubmenu {
padding: 0.5em 2em 0.5em 0.75em;"
With that done, it works great in both ie7 and ie8, so thank you for the help. Below is the new css that works, in total.
Not being as familiar with the subtleties of CSS as you and many others obviously are, I'm REALLY curious as to exactly what is different that causes this to work now, and would be happy to hear your expanation, if you feel like taking the time to explain. If not, no problem - it works and that is the most important thing! So, thank you again -
Perry
@charset "UTF-8";
/* SpryMenuBarHorizontal.css - version 0.6 - Spry Pre-Release 1.6.1 */
/* Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. */
LAYOUT INFORMATION: describes box model, positioning, z-order
/* The outermost container of the Menu Bar, an auto width box with no margin or padding */
ul.MenuBarHorizontal
margin: 0;
padding: 0;
list-style-type: none;
font-size: 100%;
cursor: 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: 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;
margin-top: 40px;
/* Menu item containers are same fixed width as parent */
ul.MenuBarHorizontal ul li
display: block;
float: none !important;
width: auto;
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: 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: #f5f5e8;
padding: 0.5em 0.75em;
color: #333;
text-decoration: none;
/* Menu items that have mouse over or focus have a blue background and white text */
ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus
background-color: #f5f5e8;
color: #afa06f;
/* 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: #f5f5e8;
color: #afa06f;
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
/* 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
/* 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
/* 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
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);
background: transparent;
/* 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 Menu Bar Horizontal Problem in Internet Explorer
I'm having a problem with a spry menu bar. It works fine in Firefox and Google Chrome, but in Internet Explorer the submenus shift to the right.
And here's the code:
@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 auto; padding: 0; list-style-type: none; font-size: 100%; cursor: default; width: 54em; border-top-width: thick; border-right-width: thick; border-bottom-width: thick; border-left-width: thick; border-top-color: #00F; border-right-color: #099; border-bottom-color: #093; border-left-color: #0F9; top: 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: 18em; float: left; color: #F00; background-color: #0000FF;}/* 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: 18em; 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: 18em;}/* 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: #000; padding: 0.5em 0.75em; color: #C96; text-decoration: none; border: black;}/* 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: #900; color: #009; text-align: center;}/* 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: #900; color: #FFF; text-decoration: underline;}/***************************************************************************** ** 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%; text-align: center; font-family: "Lucida Console", Monaco, monospace; font-weight: bold; color: #FF0; border: 3px solid #039;}/* 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: fixed; 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; }}
WHAT DO I DO? HELP ME, THANKS.
Ummmmmmm HELLOO.
SOMEONE HELP ME.
....boy you guys are reallllly helpingOhhhh noooo now it looks like this.
I don't know what to do!!!!
Here, let me give you the css code and the html code.
<style type="text/css">
<!--
#apDiv1 {
position:absolute;
width:160px;
height:126px;
z-index:1;
left: 205px;
top: 424px;
margin: 0 auto;
-->
</style>
<style type="text/css">
#apDiv3 {
position:absolute;
width:254px;
height:206px;
z-index:2;
left: 123px;
top: 1529px;
#apDiv4 {
position:absolute;
width:250px;
height:194px;
z-index:3;
left: 381px;
top: 1528px;
#apDiv5 {
position:absolute;
width:256px;
height:200px;
z-index:4;
left: 636px;
top: 1529px;
#apDiv6 {
position:absolute;
width:349px;
height:205px;
z-index:5;
left: 889px;
top: 1530px;
</style>
<style type="text/css">
#apDiv7 {
position:absolute;
width:887px;
height:204px;
z-index:6;
left: 324px;
top: 905px;
#apDiv8 {
position:absolute;
width:1295px;
height:74px;
z-index:1;
left: 212px;
top: 668px;
</style>
<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
</script>
<style type="text/css">
#apDiv2 {
position:absolute;
width:209px;
height:197px;
z-index:2;
top: 1220px;
left: 171px;
#apDiv9 {
position:absolute;
width:331px;
height:97px;
z-index:3;
left: 385px;
top: 1218px;
#apDiv10 {
position:absolute;
width:292px;
height:199px;
z-index:4;
left: 724px;
top: 1218px;
#apDiv11 {
position:absolute;
width:200px;
height:115px;
z-index:1;
body {
background-color: #000;
background-image: url();
text-align: center;
color: #F00;
.none {
font-size: 80px;
font-family: "Times New Roman", Times, serif;
font-weight: bold;
#apDiv12 {
position:absolute;
width:991px;
height:60px;
z-index:5;
left: 198px;
top: 192px;
#apDiv13 {
position:absolute;
width:200px;
height:115px;
z-index:1;
left: 588px;
top: 322px;
</style>
<body onLoad="MM_preloadImages('images/WebConfroll.png','images/youthfootballroll.png','images/ statefbsweatshirt.png')">
<p align="center" class="none"><img src="images/footballtitle.png" width="941" height="183"></p>
<ul id="MenuBar2" class="MenuBarHorizontal">
<li><a class="MenuBarItemSubmenu" href="#">[Placeholder]</a>
<ul>
<li><a href="#">[Placeholder]</a></li>
<li><a href="#">[Placeholder]</a></li>
<li><a href="#">[Placeholder]</a></li>
</ul>
</li>
<li><a href="#" class="MenuBarItemSubmenu">[Placeholder]</a>
<ul>
<li><a href="#">[Placeholder]</a></li>
<li><a href="#">[Placeholder]</a></li>
<li><a href="#">[Placeholder]</a></li>
</ul>
</li>
<li><a class="MenuBarItemSubmenu" href="#">Videos</a>
<ul>
<li><a class="MenuBarItemSubmenu" href="#">2008 Videos</a>
<ul>
<li><a href="videos/2009 videos/Glenbard part one/partone.html">Glenbard South Game</a></li>
<li><a href="#">             &# 160;         [Placeholder]</a></li>
</ul>
</li>
<li><a href="#" class="MenuBarItemSubmenu">2009 Videos</a>
<ul>
<li><a href="#">[Placeholder]</a></li>
<li><a href="#">[Placeholder]</a></li>
</ul>
</li>
<li><a href="#" class="MenuBarItemSubmenu">2010 Videos</a>
<ul>
<li><a href="#">[Placeholder]</a></li>
<li><a href="#">[Placeholder]</a></li>
</ul>
</li>
</ul>
</li>
</ul>
<p align="center"> </p>
<p align="center"> </p>
<p align="center"> </p>
<p align="center"> </p>
<p align="center"> </p>
<p align="center"> </p>
<p align="center"> </p>
<p align="center"> </p>
<p align="center"> </p>
<p align="center"> </p>
<p align="center"> </p>
<p align="center"><span class="cent"><img src="images/bulldoghelmit.png" width="150" height="99" /></span></p>
<p align="center"> </p>
<p align="center"> </p>
<p align="center"> </p>
<p class="cent"> </p>
<div align="center">
<ul id="MenuBar1" class="MenuBarHorizontal">
<li> <a class="MenuBarItemSubmenu" href="#">Football Season 2008</a>
<ul>
<li><a href="http://page.bps101.net/web/t1350/Football2009/2008%20Defense%20Stats.pdf">Defense Stats</a></li>
<li><a href="http://page.bps101.net/web/t1350/Football2009/2008%20Offense%20Stats.pdf">Offense and Records</a></li>
<li><a href="http://page.bps101.net/web/t1350/BHS%20All%20Time%20Stats.pdf">AllTime Data</a></li>
<li><a href="http://page.bps101.net/web/t1350/Football2009/Western%20Sun%202009.pdf">Western Sun Final Standings</a></li>
</ul>
</li>
<li> <a href="#" class="MenuBarItemSubmenu">Football Season 2009</a>
<ul>
<li><a href="http://page.bps101.net/web/t1350/Football%202010/2009%20Banquet%20Record%20and%20Stats.pdf">Defense Stats</a></li>
<li><a href="http://page.bps101.net/web/t1350/Football%202010/2009%20Banquet%20Record%20and%20Stats.pdf">Record Book and Offense</a></li>
<li><a href="http://page.bps101.net/web/t1350/Football%202010/All-Time%20Data%202009.pdf">Alltime Data</a></li>
</ul>
</li>
<li> <a class="MenuBarItemSubmenu" href="#">Football Season 2010</a>
<ul>
<li><a href="http://page.bps101.net/web/t1350/Football%202011/2011%20Checklist.pdf">2010-2011 Offseason Checklist</a></li>
<li><a href="http://page.bps101.net/web/t1350/Football%202011/2010%20Defense%20Stats%20Final.pdf">Defense Stats</a></li>
<li><a href="http://page.bps101.net/web/t1350/Football%202011/2010%20Stats%20Packet.pdf">Record Book and Offense</a></li>
<li><a href="http://page.bps101.net/web/t1350/Football%202011/2010%20ALL%20TIME.pdf">Alltime Data</a></li>
</ul>
</li>
</ul>
</div>
<p align="center"> </p>
<p align="center"> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p align="center"> </p>
<p align="center"> </p>
<p align="center"> </p>
<p align="center"><img src="images/Batavia Youth football.png" alt="" width="869" height="200" /></p>
<p align="center"> </p>
<p align="center"> </p>
<p align="center"> </p>
<p align="center"><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image4','','images/WebConfroll.png',1)"></a></p>
<div align="center">
<div align="center"></div>
<div align="center"><a href="http://www.athletics2000.com/upstate8/" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image7','','images/WebConfroll.png',1)"><img src="images/WebConf.png" name="Image7" width="206" height="194" border="0" id="Image7" /></a><a href="http://www.bataviayouthfootball.org/" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image6','','images/statefbsweatshirt.png',1)"><img src="images/statefbsweatshirt.jpg" name="Image6" width="375" height="199" border="0" id="Image6" /></a><a href="http://www.bataviayouthfootball.org/" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image8','','images/youthfootballroll.png',1)"><img src="images/youth football.png" name="Image8" width="329" height="197" border="0" id="Image8" /></a></div>
</div>
<p align="center"> </p>
<p align="center"> </p>
<p align="center"><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image5','','images/youthfootballroll.png',1)"></a></p>
<p align="center"> </p>
<p align="center"> </p>
<p align="center"> </p>
<p align="center"> </p>
<p align="center"> </p>
<p align="center"> </p>
<p align="center"> </p>
<p align="center"> </p>
<p align="center"> </p>
<p align="center"> </p>
<p align="center"> </p>
<p align="center"> </p>
<p align="center"> </p>
<p align="center"><img src="images/Logos.png" width="1167" height="199" /></p>
<script type="text/javascript">
var MenuBar2 = new Spry.Widget.MenuBar("MenuBar2", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
</script>
@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 0;
padding: 0;
list-style-type: none;
font-size: 100%;
cursor: default;
width: 54em;
border-top: thick solid #00F;
border-left: thick solid #00F;
border-right: thick solid #00F;
border-bottom: thick solid #00F;
height: 2.2em;
/* Set the active Menu Bar with this class, currently setting z-index to accomodate IE rendering bug: http://therealcrisp.xs4all.nl/meuk/IE-zindexbug.html */
ul.MenuBarActive
z-index: 1000;
/* Menu item containers, position children relative to this container and are a fixed width */
ul.MenuBarHorizontal li
margin: 0;
padding: 0;
list-style-type: none;
font-size: 100%;
position: relative;
cursor: pointer;
width: 18em;
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: 18em;
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: 18em;
/* 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: #000;
padding: 0.5em 0.75em;
color: #C96;
text-decoration: none;
text-align: center;
height: 1.2em;
/* 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: #900;
color: #009;
/* 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: #900;
color: #FFF;
text-decoration: underline;
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%;
color: #FF0;
font-family: "Lucida Console", Monaco, monospace;
/* 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;
DON'T GIVE UP ON ME. PLEASE. -
Spry Menu Bar transparency problem - one solution
Like many other people I have spent several frustrating days trying to solve the problem of Spry Menu Bar sub-menus appearing to be transparent (text, etc. underneath the sub-menus shows above/through the sub-menu items). This problem manifested itself in IE7, but not in Netscape, Safari or Firefox.
I thought it must be the dreaded IE z-index problem.
I have been through most other people's questions and replies on the Adobe forums, tried all kinds of z-index changes and various other mods to my own CSS and/or the Spry CSS's - all to no avail.
My situation:
I have a Spry Menu Bar above a clicktrail and a text block. Both the clicktrail and the text block showed through the sub-menu items, which drop-down over them.
All three items are located in relative-positioned divs, necessary because the whole page design is contained in a self-centralizing container div and absolute-positioned divs screw up the whole page layout when the screen size or browser window size changes.
(Sorry, I can't upload the files to a website at the moment.)
The solution that works for me in Dreamweaver CS4:
I selected the divs for the clicktrail and the text block, one at a time, and selected Modify > Arrange > Send to Back in Dreamweaver CS4.
I then selected these two items again and selected Modify > Arrange > Bring to Front.
Finally I selected the div containing the Spry Menu Bar and selected Modify > Arrange > Bring to Front. The thought behind this was that this would put the Spry Menu Bar on top of everything else - and it works!
This solution works in all four browsers, but don't ask me how! I can't see any change in any CSS, nor in my template code. All I can see is a strange, flashing vertical line (like an enormous cursor - about 10 cm [3"] high) in the middle of the template page only (and only in Dreamweaver) if I click on the page background. I can neither find an explanation for this nor anything in the coding which might cause it. By the way; the z-index for the menu div =2, the z-index for the clicktrail div is not defined and the z-index for the div for the text block is set to auto. I haven't tried other values and to be honest I'm not sure what they were set to before I applied the above 'solution'.
But hey - who the hell cares - my site works!
I hope this helps someone else out of an absolute hell-hole...if someone out there can explain where to find the code that had been changed or added by doing this I'd like to know. I don't like things I can't explain - even if they do work!This is where the browser is told to supply a white background
ul.MenuBarHorizontal a
display: block;
cursor: pointer;
background-color: #fff;
padding: 0.5em 0.75em;
color: #333;
text-decoration: none;
Vhange the value to transparent.
Also the last line int the CSS should be removed as in
filter: "alpha(opacity=60)";
Gramps -
Horizontal Menu Bar Placement Problem in IE
I am having problem determining which CSS rule is causing a
horizontal menu bar to show correctly in the Dreamweaver Design
view, correctly in Firefox, but incorrectly in IE7. I have a
background image in the header, but the menu bar cover it up on the
left side in IE7. Any thoughts?
And while we are at it, any reason that the button hover
color touches the header logo in Firefox (as desired) but is
dropped down several pixels in IE?
I have attached a link to the site for viewing. I have also
attached the CSS code that the menu is using.
www.swcdc.grohse.com
Thanks for any help or ideas!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. -
Spry Menu Bar (horizontal) - Problems with uneveness (height variance) between adjacent items
Hello:
Like many I will confess that I am new to the spry experience and attempting to catch up. I am trying to design a horizontal menu bar that employs a background image (repeating GIF gradient bar repeated along the the x-access) to create a beveled/rounded edge effect. I have another with a different hue that is used on focus and mouse over, etc. While this works well with the drop downs, there appears to be a "boxiness" between adjacent top level menu items and they appear to have slightly different height. This seems to be determined by the text forms the content of any link or menu item. In effect it creates other differences in appearance as the outer most (top and bottom edges) of the GIF appear to be cut off from one menu item to the next. This leaves a very undesirable look to the page as it juts up and then falls back as it the top level item moves across the web page.
The other point I should make is that this problem, although it exists in all browsers to some extent, is most pronounced in IE6 and below. Unfortunately many of the anticipated visitors to this site are forced by their IT department to use IE6.
My question is: can you set a variable that overrides or determines the height of the background of the menu items? Alternatively is there some other way of addressing the problem so that I can get a uniform look as the menu items transition to each other.
Thanks in advance for any help that can be offered.
Steve.Announcement: New to Spry, or the Spry forums?
Hide Details
Before you post a topic please verify that:
You are using the latest Spry files
The latest version of the Adobe Spry Framework is 1.6.1, this is the same version that ships with Dreamweaver CS4. If you use Dreamweaver CS3 (uses Spry 1.4), its wise to upgrade your files to the latest version. This can easily be done using the Spry Updater that can be found here.
Your question was not asked before
Using the search functionality on forums you can easily find out if your question has been answered before. While you are in search, you can specify the search locations. The Spry forum can be found under:
Adobe Labs > Spry Framework for Ajax
Your question can not be found in the existing documentation
Spry provides you with allot of documentation this can found on different locations. In the sidebar of this forum you can find a small summary of resources that will help you on your way.
If these options do not apply to your question, please be so kind to also supply the following information in your topic together with a clear description of your issue:
What browsers does this issue occure:
example: Internet Explorer 8 on Window 7 and Firefox 3.0 on Mac OSX
What version of Spry are using:
example: Spry 1.6.1 ( the version number can be found in license header of the .css and .js files )
What is the url of your website or page in issue:
example: http://www.example.com/page/in/issue.html
Step to reproduce the issue:
example: Scroll down till you find the header "help", there you will see a Spry Accordion. When you click on it it will not open or close.
So users can provide you with a better answer, without having to ask you for further details. -
I'm using the Spry menu bar and have several menu items on my home page that have sub-items under them. For example, I have a "browse" menu item on the home page and under "browse" have "view inventory" and "wish list". I want users to be able to access the sub items through the "browse" menu item but not allow users to open "browse:"
I'd appreciate any suggestions.
Thanks
Iain<li><a href="#" class="MenuBarItemSubmenu">About Us</a>
<ul>
<li><a href="../_pages/hours.html" title="Hours of Operation">Hours</a></li>
<li><a href="../_pages/find.html" title="Find Us">Find Us</a></li>
<li><a href="../_pages/contact.html" title="Contact Us">Contact Us</a></li>
</ul>
</li>
or
<li><a class="MenuBarItemSubmenu">About Us</a> <ul>
<li><a href="../_pages/hours.html" title="Hours of Operation">Hours</a></li>
<li><a href="../_pages/find.html" title="Find Us">Find Us</a></li>
<li><a href="../_pages/contact.html" title="Contact Us">Contact Us</a></li>
</ul>
</li>
Gramps -
What kind of menu bar navigation should i do for my website
My website to start off is a giant tree that i created in Illustrator and i want to put the navigation dispersed throughout the tree an idea i had was a tag like the kind they used to tie to your luggage with twine made out of paper I don't really want the words to just be sitting in the tree either it looks too boring. I tried doing larger leafs but i don't like that idea either it just looks out of place. what kind of Menu bar should i do for the website?
design decisions, like beauty, is your call. but, if you like the idea of leaves and a navigation system that's not particularly easy to use, create some leaves in your tree that stand-out some way. they need not be large and certainly not large enough to display their text. but on mouseover they could enlarge and display their text.
-
Hi All
I am using Side Bar Navigation in My Pages.The problem is Link names are Big.
So whe page renders along with Side Bar Navigation ,Link get Wrapped up and appears in two line which looks weard. I dont want this to happen.One Link should come in one line only.
Any Idea to how to control this??
Regards
NaveenNo way to control this, this is a standard widget and users have no control over this.
Thanks
Tapash -
Spry Menu Bar display problem on the MAC
Hello!
I'm having issues with spry menu bar not displaying properly
on the mac browser.
i474.photobucket.com/albums/rr104/nastasia_20/DSC02618.jpg
it should look like this
s3.amazonaws.com/sitevista/c356ba1e-7f66-4cec-9b41-bc90b86455ee1773886_IE7.png
You can find the page here : www.
siia-design.com/eco_totes/modern_mums.html
Any ideas what is wrong?
Thank youNot an issue any more. I re-loaded the site w/o the menu bar
after I made the original post (as you saw) because of the
incompatibility issue I was having between Spry and IE6 & 7.
Before that, I first updated Spry, re-loaded the page with Spry
menu and still had the same IE 6 & 7 issue. Frankly, I simply
gave up on Spry, due to time constraints in getting a new site
layout operational (today was my deadline). From what I've read on
these and and other forums, Spry does not play well with IE,
especially IE7. Unfortunately for me, I don't use IE at all, so
rely on Dreamweaver's compatibility check to tell me if all is
well. Why Spry works so well on Safari, Firefox and Netscape, and
not on IE, is beyond me. Thanks, anyway for your comment. Much
appreciated. -
I'm not exactly sure when this happened, but I have noticed that on the top menu bar on my Mac (MacBook Pro, Early 2011 running 10.9.1) has started displaying incorrectly. Here's what it looks like
I have tried verifying/repairing permissions, looking through the community forums to try and find people with similar problems and, so far, haven't come across any.
Any ideas?Hi
Try this: System Preferences > Language & Region > Advanced > Times > Restore Defaults -
CVI 2009 menu bar resize problem
In CVI 2009, if you have the 'scale contents on resize' attribute set for a panel with a menu bar on it, the menu bar font resizes with the panel.
Unfortunately, there is a rather severe bug in this. If you do the following repeatedly:
(a) Load a panel with 'scale contents on resize' set and a menu bar
(b) Enlarge it
(c) Display it
(d) Hide it
(e) Discard it
then the menu bar font gets progressively bigger and bigger each time the panel is displayed. Below is an example from the test project attached to this posting (four successive display iterations). To say this is inconvenient is understating the truth: It actually breaks many of my applications. Is there any way to stop this behaviour?
Martin
Certified CVI Developer
Attachments:
TestMenu.zip 6 KBHello Martin -
I'm very sorry for the inconvenience this bug has caused. Another workaround that may be a little simpler would be to update the font of the menubar with a newly created metafont immediately before showing the panel (and after resizing). This also has the added benefit of the menu retaining it's original size instead of being scaled. You could accomplish this with code similar to the following:
int hNewPanel, hMenuBar;
hNewPanel = LoadPanel (0, "TestMenu.uir", MENUPANEL);
hMenuBar = GetPanelMenuBar (hNewPanel);
SetPanelSize (hNewPanel, 600, 800);
CreateMetaFontEx ("NewMenuMetaFont", "NIMenuMetaFont", 13, 0, 0, 0, 0, 0);
SetMenuBarAttribute (hMenuBar, 0, ATTR_MENU_BAR_FONT, "NewMenuMetaFont");
I also just wanted to add why the behavior of scaling menus with "Scale Contents On Resize" changed in LabWindows/CVI 2009. The problem was that when using scale contents on resize, all fonts are supposed to scale proportionately to the scaling of the panel. However, menu fonts did not scale, and this led to the problems seen in this forum. Because of the inconsistenty and to fix the bug reported on that forum, bug report 134165 was created and then fixed in LabWindows/CVI 2009.
Once again, I'm sorry for the inconvenience this has caused,
NickB
National Instruments -
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. -
Spry menu bar vertical problem in IE
Hi,
I try to use the spry menu in my website, but results are so different between FF and IE.
It works perfectly on FF and a real mess on IE8, as you can see here :
http://www.lesdecales.com/indexJP.htm
On IE, my vertical menu placed basically on the left, is replaced by a white emplty space...and the menu is on the bottom right of the page.
You can have a look to my css file here :
http://www.lesdecales.com/SpryAssets/SpryMenuBarVertical.css
is there a way to display it properly on IE ?
thanks for your help and your timeAdd/modify the following
ul.MenuBarVertical{width: 8em;}
@media screen, projection{
ul.MenuBarVertical li.MenuBarItemIE{background:transparent;}
Gramps
Maybe you are looking for
-
I even re-installed the new Aperture 3, and upgraded to the most current version, updated, still having problem. Activity monitor states Aperture not responding.
-
Button in region's items - submit
I create a button using "Create a button displayed among this region's items" with style = image. I want to call javascript from this button and i am able to do that.. but then it submits also. I check the source and there is a html code for submit.
-
CD DVD option does not appear in Sys Prefs panel "sharing"
Want to use CD sharing on my MacBook Air. In System Panel "sharing" the option CD/DVD is not listed, so can't activate the option. How to get this option in "sharing"?
-
ZGWSAMPLE_SRV/$metadata not found
Hi All, I am trying to consume the ZGWSAMPLE_SRV service via SAP gateway. When i run my app i am getting the attached incomplete output along with the error related to the metadata file error. Please help me to resolve the same. TIA. Regards, Sumit J
-
i have moved alot closer to my exchange and bt say my line is alot shorter but my speeds have dropt from 4mg to 2mg, my old address was a high rise flat on the 10th floor, so why have my speeds dropt so bad my new line has only been activated 2 days