Spry menu problems in IE
I recently changed my menu on my site to be a spry menu. My problem is that in IE the menu messes up after the drop down menu. Everything after the drop down moves underneath the menu bar and changes to just hyperlinked text. The menu works fine in all other browsers, The site is corinth-baptist.net any help would be greatly appreciated!!
Your markup is screwed up. Compare yours with the following
<ul id="MenuBar1" class="MenuBarHorizontal">
<li><a href="index.html">Home</a></li>
<li><a class="MenuBarItemSubmenu" href="#">About Us</a>
<ul>
<li><a href="about us.html">About Us</a>
<li><a href="calendar.html">Calendar</a></li>
<li><a href="bus ministry.html">Bus Ministry</a></li>
<li><a href="subscribe.html">Newsletter</a></li>
</ul>
</li>
<li><a href="directions.html">Directions</a>
<li><a href="sermons.html">Sermons</a></li>
<li><a href="contacts.html">Contacts</a></li>
<li><a href="gallery.html">Gallery</a></li>
</ul>
Gramps
Similar Messages
-
Spry menu problem - CS6 Dreamweaver
I wonder if anyone can help me with my spry menu problem which I have with a fixed 960px wide horizonal menu bar that has 8 items in it. The sub-menus don't seem to display properly when you click on them in that some of the submenus only show up at the end of the menu bar itself in Explorer browsers 8/9. Does anyone know of any code I can apply to fix this problem? I am new to spry menu features and so any help would be very much appreciated.
Also validate the rest of the code in your pages to see if you have any critical errors that need fixing. For example, a missing doc type declaration might explain Spry failures.
CSS - http://jigsaw.w3.org/css-validator/
HTML - http://validator.w3.org/
As an FYI, Adobe abandonded the Spry Framework late last year, after CS6 was released because Spry drop-menus don't hold up well on touch screen devices. If you can't get satisfaction with Spry, try jQuery Superfish. It's a better menu system.
http://users.tpg.com.au/j_birch/plugins/superfish/
Nancy O. -
Spry Menu problem with using a transparent background image
Hi- I'm new to CS5 and Dreamweaver. I just finished the beginning webpage tutorial and I have started to work on a personal project. The Problem: when I use a transparent png image as a backgroun-image for my spry menu it shows up fine in live view, but doesn't work in browser view (safari), in fact the menu reverts to it's original grey and blue boredom. Does anyone have a solution for me? Does this mean it will be grey and blue when it goes live? Thanks, Ruth333333
Please supply a link to your site.
Gramps -
when I try to place a horz. spry menu into a div, it hops outside the container.
I went back to the thread but could not figure out how to respond.
The site was originally built using AP Divs (including a spry menu bar). It appeared that the new menu “hopped” because the absolute position was still within the code – is that possible?
I created a new spry asset folder and started over. As you can see, it’s in the div just fine, but the buttons (font size, hover, etc.) are all messed up and I can’t figure out how to fix the problem.
http://www.hoistco.com/test3.html
Thanks for your help. -
Spry menu problems. Please help.
Hello,
I am new to web design so please try and be patient with me .
I am trying to create a horizontal spry menu bar into a new page. Even though I select horizontal, the menu is vertical. I have read through many previous posts and FAQ'q, but cannot find the answer. It is not just in IE, it is in every browser and dreamweaver itself. I am using 5.5.
UPDATE-- If I create the spry into a new blank HTML document, it works just fine. So I imagine it is something to do with the template?
Heres the code:
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: 8em;
float: none;
/* Submenus should appear below their parent (top: 0) with a higher z-index, but they are initially off the left side of the screen (-1000em) */
ul.MenuBarHorizontal ul
margin: 0;
padding: 0;
list-style-type: none;
font-size: 100%;
z-index: 1020;
cursor: default;
width: 8.2em;
position: absolute;
left: -1000em;
/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to auto so it comes onto the screen below its parent menu item */
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible
left: auto;
/* Menu item containers are same fixed width as parent */
ul.MenuBarHorizontal ul li
width: 8.2em;
/* Submenus should appear slightly overlapping to the right (95%) and up (-5%) */
ul.MenuBarHorizontal ul ul
position: absolute;
margin: -5% 0 0 95%;
/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to 0 so it comes onto the screen */
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible ul.MenuBarSubmenuVisible
left: auto;
top: 0;
DESIGN INFORMATION: describes color scheme, borders, fonts
/* Submenu containers have borders on all sides */
ul.MenuBarHorizontal ul
border: 1px solid #CCC;
/* Menu items are a light gray block with padding and no text decoration */
ul.MenuBarHorizontal a
display: block;
cursor: pointer;
background-color: #EEE;
padding: 0.5em 0.75em;
color: #333;
text-decoration: none;
/* Menu items that have mouse over or focus have a blue background and white text */
ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus
background-color: #33C;
color: #FFF;
/* Menu items that are open with submenus are set to MenuBarItemHover with a blue background and white text */
ul.MenuBarHorizontal a.MenuBarItemHover, ul.MenuBarHorizontal a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a.MenuBarSubmenuVisible
background-color: #33C;
color: #FFF;
SUBMENU INDICATION: styles if there is a submenu under a given menu item
/* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal a.MenuBarItemSubmenu
background-image: url(SpryMenuBarDown.gif);
background-repeat: no-repeat;
background-position: 95% 50%;
/* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal ul a.MenuBarItemSubmenu
background-image: url(SpryMenuBarRight.gif);
background-repeat: no-repeat;
background-position: 95% 50%;
/* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal a.MenuBarItemSubmenuHover
background-image: url(SpryMenuBarDownHover.gif);
background-repeat: no-repeat;
background-position: 95% 50%;
/* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal ul a.MenuBarItemSubmenuHover
background-image: url(SpryMenuBarRightHover.gif);
background-repeat: no-repeat;
background-position: 95% 50%;
BROWSER HACKS: the hacks below should not be changed unless you are an expert
/* HACK FOR IE: to make sure the sub menus show above form controls, we underlay each submenu with an iframe */
ul.MenuBarHorizontal iframe
position: absolute;
z-index: 1010;
filter:alpha(opacity:0.1);
/* HACK FOR IE: to stabilize appearance of menu items; the slash in float is to keep IE 5.0 from parsing */
@media screen, projection
ul.MenuBarHorizontal li.MenuBarItemIE
display: inline;
f\loat: left;
background: #FFF;
ul.MenuBarHorizontal {
width:8em;
margin: auto;
And this is the HTML for the menu bar when insterted into a page:
InstanceBeginEditable name="Header" -->
<div class="Header">
<ul id="MenuBar1" class="MenuBarHorizontal">
<li><a class="MenuBarItemSubmenu" href="#">Item 1</a>
<ul>
<li><a href="#">Item 1.1</a></li>
<li><a href="#">Item 1.2</a></li>
<li><a href="#">Item 1.3</a></li>
</ul>
</li>
<li><a href="#">Item 2</a></li>
<li><a class="MenuBarItemSubmenu" href="#">Item 3</a>
<ul>
<li><a class="MenuBarItemSubmenu" href="#">Item 3.1</a>
<ul>
<li><a href="#">Item 3.1.1</a></li>
<li><a href="#">Item 3.1.2</a></li>
</ul>
</li>
<li><a href="#">Item 3.2</a></li>
<li><a href="#">Item 3.3</a></li>
</ul>
</li>
<li><a href="#">Item 4</a></li>
</ul>
</div>
<!-- InstanceEndEditable --><!-- InstanceBeginEditable name="Main Content" -->
Thank you for any and all help!
NickOk so I decided to make a nice menu through fireworks.
This confuses me even further, how did you make a SpryMenuBar through FW?
It now works, but the links to the drop down menu are not horizontal in the drop down menu.
So it doesn't work
And this is only when trying to enter it into the template, into a new HTML it works fine..So it does work
Unforuntely I cannot post the website
Well, our worries are over, there is no need to correct the problem, no one will ever see the website.
Yes, I am being facetious.
In all seriousness, you can upload the website to a temporary location. This way we will be able help you.
Have a happy New Year!
Gramps -
Dreamweaver Vertical Spry Menu Problem in IE7
I just finished setting up a vertical, 3-level spry menu in
Dreamweaver CS3, and when I preview it in IE7, several pixels have
been added in between the buttons, which spreads the menu out and
looks terrible. The problem disappears after I clear the ActiveX
warning, and it doesn't occur in FF. Could someone please tell me
how to fix this??
Here's my SpryMenuBarVertical.css file:
@charset "UTF-8";
/* SpryMenuBarVertical.css - Revision: Spry Preview Release
1.4 */
/* Copyright (c) 2006. Adobe Systems Incorporated. All rights
reserved. */
LAYOUT INFORMATION: describes box model, positioning,
z-order
/* The outermost container of the Menu Bar, a fixed width box
with no margin or padding */
ul.MenuBarVertical
margin: 0;
padding: 0;
list-style-type: none;
font-size: 0.8em;
cursor: default;
width: 150px;
/* 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 same fixed width as parent */
ul.MenuBarVertical li
margin: 0;
padding: 0;
list-style-type: none;
font-size: 100%;
position: relative;
text-align: left;
cursor: pointer;
width: 150px;
/* Submenus should appear slightly overlapping to the right
(95%) and up (-5%) with a higher z-index, but they are initially
off the left side of the screen (-1000em) */
ul.MenuBarVertical ul
margin: -5% 0 0 95%;
padding: 0;
list-style-type: none;
font-size: 100%;
position: absolute;
z-index: 1020;
cursor: default;
left: -1000em;
top: 0;
/* Submenu that is showing with class designation
MenuBarSubmenuVisible, we set left to 0 so it comes onto the screen
ul.MenuBarVertical ul.MenuBarSubmenuVisible
left: 0;
/* Menu item containers are same fixed width as parent */
ul.MenuBarVertical ul li
background-image:url(../images/topnav-up-165.gif);
background:#FFFFFF;
DESIGN INFORMATION: describes color scheme, borders, fonts
/* Menu items are a light gray block with padding and no text
decoration */
ul.MenuBarVertical a
display: block;
cursor: pointer;
background-color: #FFFFFF;
background-image:url(../images/topnav-up.gif);
padding: 0.3em 0.3em;
color: #333;
text-decoration: none;
/* Menu items that have mouse over or focus have a blue
background and white text */
ul.MenuBarVertical a:hover, ul.MenuBarVertical a:focus
background-color: #FFFFFF;
color: #333;
/* Menu items that are open with submenus are set to
MenuBarItemHover with a blue background and white text */
ul.MenuBarVertical a.MenuBarItemHover, ul.MenuBarVertical
a.MenuBarItemSubmenuHover, ul.MenuBarVertical
a.MenuBarSubmenuVisible
background-color: #FFFFFF;
color: #333;
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.MenuBarVertical a.MenuBarItemSubmenu
background-image: url(../images/topnav-up.gif);
background-repeat: no-repeat;
background-position: 95% 50%;
background-color: #038203;
border-bottom-width: 2px;
border-bottom-style: solid;
border-bottom-color: #666666;
border-top-width: 2px;
border-top-color: #FFFFFF;
border-right-width: 2px;
border-left-width: 2px;
border-top-style: solid;
border-right-style: solid;
border-left-style: solid;
border-right-color: #666666;
border-left-color: #FFFFFF;
/* 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.MenuBarVertical a.MenuBarItemSubmenuHover
background-image: url(../images/topnav-dn.gif);
background-repeat: no-repeat;
background-position: 0% 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.MenuBarVertical iframe
position: absolute;
z-index: 1010;
/* HACK FOR IE: to stabilize appearance of menu items; the
slash in float is to keep IE 5.0 from parsing */
@media screen, projection
ul.MenuBarVertical li.MenuBarItemIE
display: inline;
f\loat: left;
background: #FFF;I just finished setting up a vertical, 3-level spry menu in
Dreamweaver CS3, and when I preview it in IE7, several pixels have
been added in between the buttons, which spreads the menu out and
looks terrible. The problem disappears after I clear the ActiveX
warning, and it doesn't occur in FF. Could someone please tell me
how to fix this??
Here's my SpryMenuBarVertical.css file:
@charset "UTF-8";
/* SpryMenuBarVertical.css - Revision: Spry Preview Release
1.4 */
/* Copyright (c) 2006. Adobe Systems Incorporated. All rights
reserved. */
LAYOUT INFORMATION: describes box model, positioning,
z-order
/* The outermost container of the Menu Bar, a fixed width box
with no margin or padding */
ul.MenuBarVertical
margin: 0;
padding: 0;
list-style-type: none;
font-size: 0.8em;
cursor: default;
width: 150px;
/* 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 same fixed width as parent */
ul.MenuBarVertical li
margin: 0;
padding: 0;
list-style-type: none;
font-size: 100%;
position: relative;
text-align: left;
cursor: pointer;
width: 150px;
/* Submenus should appear slightly overlapping to the right
(95%) and up (-5%) with a higher z-index, but they are initially
off the left side of the screen (-1000em) */
ul.MenuBarVertical ul
margin: -5% 0 0 95%;
padding: 0;
list-style-type: none;
font-size: 100%;
position: absolute;
z-index: 1020;
cursor: default;
left: -1000em;
top: 0;
/* Submenu that is showing with class designation
MenuBarSubmenuVisible, we set left to 0 so it comes onto the screen
ul.MenuBarVertical ul.MenuBarSubmenuVisible
left: 0;
/* Menu item containers are same fixed width as parent */
ul.MenuBarVertical ul li
background-image:url(../images/topnav-up-165.gif);
background:#FFFFFF;
DESIGN INFORMATION: describes color scheme, borders, fonts
/* Menu items are a light gray block with padding and no text
decoration */
ul.MenuBarVertical a
display: block;
cursor: pointer;
background-color: #FFFFFF;
background-image:url(../images/topnav-up.gif);
padding: 0.3em 0.3em;
color: #333;
text-decoration: none;
/* Menu items that have mouse over or focus have a blue
background and white text */
ul.MenuBarVertical a:hover, ul.MenuBarVertical a:focus
background-color: #FFFFFF;
color: #333;
/* Menu items that are open with submenus are set to
MenuBarItemHover with a blue background and white text */
ul.MenuBarVertical a.MenuBarItemHover, ul.MenuBarVertical
a.MenuBarItemSubmenuHover, ul.MenuBarVertical
a.MenuBarSubmenuVisible
background-color: #FFFFFF;
color: #333;
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.MenuBarVertical a.MenuBarItemSubmenu
background-image: url(../images/topnav-up.gif);
background-repeat: no-repeat;
background-position: 95% 50%;
background-color: #038203;
border-bottom-width: 2px;
border-bottom-style: solid;
border-bottom-color: #666666;
border-top-width: 2px;
border-top-color: #FFFFFF;
border-right-width: 2px;
border-left-width: 2px;
border-top-style: solid;
border-right-style: solid;
border-left-style: solid;
border-right-color: #666666;
border-left-color: #FFFFFF;
/* 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.MenuBarVertical a.MenuBarItemSubmenuHover
background-image: url(../images/topnav-dn.gif);
background-repeat: no-repeat;
background-position: 0% 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.MenuBarVertical iframe
position: absolute;
z-index: 1010;
/* HACK FOR IE: to stabilize appearance of menu items; the
slash in float is to keep IE 5.0 from parsing */
@media screen, projection
ul.MenuBarVertical li.MenuBarItemIE
display: inline;
f\loat: left;
background: #FFF; -
Spry menu problem suggestions?
My horizontal spray menu on my website at www.goodimage.com under images/kids or images/pets shows kids and pets on same line. This appears correct when looking at the source layout, the live view layout but when put on my site it looks bad with both kids and pets on the same menu line.
Any suggestions? HLowerThere are a few problems with the main stylesheet - and in the spry menu stylesheet:
http://jigsaw.w3.org/css-validator/validator?profile=css21&warning=0&uri=http%3A%2F%2Fwww. goodimage.com%2F
When you moved the css from the head of the document you also included the style tags: The code in red should be removed from the mygoodimage.css.
<style type="text/css">
all the styles here
</style>
ALSO:
body {
font: 100% Verdana, Arial, Helvetica, sans-serif;
background: #; <-------------------- an empty selector here. you need to specifiy a color or remove the it altogether.
SPRY MENU STYLESHEET:
the IE Hack comment isn't closed - you need to add the bit in red to close off the comment - and the menu should work correctly in IE.
/* 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;
width: auto;
background-image: url(../images/background_slate.gif);
PS: Some of these errors could also contribute to the template problem... I've a template not work correctly due to errors either in the html or the css, so if you fix these and see how you go with the menu and then try the template again. -
Dreamweaver CS5 Spry Menu problem;
Hi, I'm doing a web-site project for my Web Design class, and I ran into a problem. In Dreamweaver my spry menu only shows one part of the menu, but when I go to preview it, its perfectly normal. When I turned it into my teacher he sees the spry menu just like the one in Pic 2. I can't really upload it to a public domain/website because I can't at school. The way we see websites is by transfering folders into the teachers folders and click the index.html. Is there any way to fix this?
Code if needed:
<!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>Kelsey's Page</title>
<style type="text/css">
body {
background-color: #EBF2FE;
</style>
<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
</head>
<body>
<table width="800" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td align="center"> </td>
</tr>
<tr>
<td align="center"><img src="asdasdawe.jpg" width="907" height="331" /></td>
</tr>
<tr>
<td width="100" align="center"><ul id="MenuBar1" class="MenuBarHorizontal">
<li><a href="index.htm">Home</a> </li>
<li><a href="#" class="MenuBarItemSubmenu">Portfolio</a>
<ul>
<li><a href="enterport1.html">Personal</a> </li>
<li><a href="enterport2.html">New PRHS</a> </li>
<li><a href="enterport3.html">Performance</a> </li>
<li><a href="enterport4.html">Teacher</a> </li>
</ul>
</li>
<li><a class="MenuBarItemSubmenu" href="#">Schedule</a>
<ul>
<li><a href="enterweb.html">Web Design</a> </li>
<li><a href="enterani.html">Animation</a></li>
<li><a href="enterlatin.html">Latin 4</a></li>
<li><a href="enterapush.html">APUSH</a></li>
</ul>
</li>
<li><a href="derp.htm">Derp</a></li>
</ul></td>
</tr>
<tr>
<td align="center"> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td><img src="bigpic2.jpg" width="910" height="510" /></td>
</tr>
</table>
<script type="text/javascript">
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
</script>
</body>
</html>We can't view or "fix" your teacher's folder.
Why not be a rebel, find yourself some free hosting,
upload all your files and post a link for us. -
When inserting spry accordion and spry collapsible menus from
dreamweaver cs3 in a blank html page i get a javascript error and
continue to get them making the use of these spry menus unworkable.
The error says" While executing inspectSelection in
spry_accordion.htm, a Javascript error occured." Does anyone know
of a fix to this problem?Hi Lucaandluna,
Well the website page I have linked was done in Dreamweaver
MX (think thats version 8) and I used the Pop Up Menu behaviour in
that program. Its a great little tool and you can change the sub
menu text and box size and much more. BUT I can not easily copy
this to other pages as when I do copy it looses all the information
on the Drop down menu. Thus for every page on my website I have to
change each Drop Down menu by hand which is a very time consuming
process. Thus I want to use a CSS menu system so I only have to
updage the Drop Down menu once for the whole site.
So I have the same problem with the sub menu text, I can't
seem to figure out how to make the colour different from the main
menu. For the look of my Spry Menu I have been altering the Spry
CSS file. IF you don't want thos little arrows then look in the CSS
file for something called Submenu Indication. There you will find
the Gif files for the arrows, delete the ones u don't want. -
Another spry menu problem with ie
I dont know, but i have tried everything to getie to render the spry menu for my site : http://www.jtltours.com/proofing/, but no luch to date. As you may have seen , it works perfectly with firefox and chrome, but no luch for ie. It does'nt even seem to be rendering any css for the menu. Any help in the right direction is appreciated.
Are you sure the issue is created by Spry? I have check out the source and there seems to be allooot of JavaScript includes. Which could potentially generate IE errors them selfs and make Spry MenuBars stop working.
I haven't got IE on my machine so I can't verify it. But it might be worth looking at. -
Dreamweaver CS4 SPRY Menu Problems in IE
I am trying to have a drop-down menu on my site using the SPRY option in Dreamweaver CS4. In all browsers it looks exactly like it should. Unofrtunately in IE it pops out to the side instead of down. Anyone know a fix around this. The site is http://mtltechnologies.com/
Here is the SPRY 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: 12px;
cursor: default;
width: auto;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
/* 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: 154px;
float: left;
height: 25px;
/* 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;
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: 154px;
/* Menu items are a light gray block with padding and no text decoration */
ul.MenuBarHorizontal a
display: block;
cursor: pointer;
padding: 5px;
color: #FFF;
text-decoration: none;
background-image: url(../images/button_bg.jpg);
text-align: center;
/* Menu items that have mouse over or focus have a blue background and white text */
ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus
color: #FFF;
background-image: url(../images/button_bg_down.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-image: url(../images/button_bg.jpg);
/* 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(../images/button_bg_down.jpg);
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(../images/button_bg_down.jpg);
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;
Anyone know a fix?
Thanks,The code is too long. Let's do it this way, did you change anything on the default css of the SPRY menu?
just my thought, why don't you remove it from the table? That might be the cause. Try to think of an alternative way like using divs and css. -
Spry menu problem - extra border
I have used a spry menu bar vertical on my site. When the
menu opens to the right upon rollover all links are there, however,
there appears to be an extra border or box behind the pop out menu.
I can email a screen shot of what it is doing. I appreciate any
help!!!Well, you are changing the right style selector.
I suggest you use the vertical image element as a background image in the menu items themselves, then they will be harmoniously positioned with the menu.
You can give each menu item its own width (in the stylesheet), if you need to, but for heaven's sake, get rid of those huge padding measurements. Pad enough on the right to disclose the vertical image, but try centering the text in each button instead of using padding to move it around.
Beth -
Hello everyone!
I am having a tricky question, I need your help with!
I want to insert a spry menu into my webpage. I want the colors of the menu and sub menu to change when I hover over them depending on how many sub menus exist.
All in all I have at most two submenus.
That means, I need to assign three colors. One for the menu without submenu, one for the menu with one submenu, and a third for the menu with 3 submenus.
So far it is working with two colors.
Who could help me?
Heartly regards!
This is what I got:
@charset "UTF-8";
/* SpryMenuBarVertical.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, a fixed width box with no margin or padding */
ul.MenuBarVertical
margin: 0;
padding: 0;
list-style-type: none;
font-size: 100%;
cursor: default;
width: 8em;
/* 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 same fixed width as parent */
ul.MenuBarVertical li
margin: 0;
padding: 0;
list-style-type: none;
font-size: 100%;
position: relative;
text-align: left;
cursor: pointer;
width: 8em;
/* Submenus should appear slightly overlapping to the right (95%) and up (-5%) with a higher z-index, but they are initially off the left side of the screen (-1000em) */
ul.MenuBarVertical ul
margin: -5% 0 0 95%;
padding: 0;
list-style-type: none;
font-size: 100%;
position: absolute;
z-index: 1020;
cursor: default;
width: 8.2em;
left: -1000em;
top: 0;
/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to 0 so it comes onto the screen */
ul.MenuBarVertical ul.MenuBarSubmenuVisible
left: 0;
/* Menu item containers are same fixed width as parent */
ul.MenuBarVertical ul li
width: 8.2em;
DESIGN INFORMATION: describes color scheme, borders, fonts
/* Outermost menu container has borders on all sides */
ul.MenuBarVertical
border: 0px solid #CCC;
/* Submenu containers have borders on all sides */
ul.MenuBarVertical ul
border: 0px solid #CCC;
/* Menu items are a light gray block with padding and no text decoration */
ul.MenuBarVertical a
display: block;
cursor: pointer;
background-color: ##FFFFFF;
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.MenuBarVertical a:hover, ul.MenuBarVertical a:focus
background-color: #0FF;
color: z;
/* Menu items that are open with submenus are set to MenuBarItemHover with a blue background and white text */
ul.MenuBarVertical a.MenuBarItemHover, ul.MenuBarVertical a.MenuBarItemSubmenuHover, ul.MenuBarVertical a.MenuBarSubmenuVisible
background-color: #0FF;
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.MenuBarVertical 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.MenuBarVertical a.MenuBarItemSubmenuHover
background-image: url(SpryMenuBarRightHover.gif);
background-repeat: no-repeat;
background-position: 95% 50%;
background-color: #F0F;
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.MenuBarVertical a.MenuBarItemSUBSubmenu
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.MenuBarVertical a.MenuBarItemSUBSubmenuHover
background-image: url(SpryMenuBarRightHover.gif);
background-repeat: no-repeat;
background-position: 95% 50%;
background-color: #FF0;
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.MenuBarVertical 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.MenuBarVertical li.MenuBarItemIE
display: inline;
f\loat: left;
background: #FFF;As is the case with any styling, all you need is an identifyer to apply style rules to it.
Hence, if you want to change the colour of a main menu item housing two sub-menu items, simply add a class name as in
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<link href="SpryMenuBarVertical.css" rel="stylesheet" type="text/css">
<style>
ul.MenuBarVertical a.three-subs {
background-color: yellow;
ul.MenuBarVertical a.two-subs {
background-color: red;
</style>
</head>
<body>
<ul id="MenuBar1" class="MenuBarVertical">
<li><a class="MenuBarItemSubmenu three-subs" href="#">Item 1</a>
<ul>
<li><a href="#">Item 1.1</a></li>
<li><a href="#">Item 1.2</a></li>
<li><a href="#">Item 1.3</a></li>
</ul>
</li>
<li><a href="#">Item 2</a></li>
<li><a class="MenuBarItemSubmenu two-subs" href="#">Item 3.1</a>
<ul>
<li><a href="#">Item 3.1.1</a></li>
<li><a href="#">Item 3.1.2</a></li>
</ul>
</li>
<li><a href="#">Item 4</a></li>
</ul>
<script type="text/javascript">
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
</script>
</body>
</html> -
I'm using DW SpryMenubarHorizontal.css. Because my drop-down menu didn't work correctly with IE I made some changes and it works on all browsers. But when I'm in Split or Design view the drop-down menu covers my text and it is quite difficult to work on the document. How can I change my sprymenu CSS so that I can see the text? Thanks for your help.
Here a screenshot of the problem:
And here my 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
list-style-type: none;
font-size: 12px;
cursor: default;
width: 960px;
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
padding-top: 10px;
padding-right: 5px;
padding-bottom: 10px;
padding-left: 5px;
/* 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: 12px;
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;
z-index: 1020;
cursor: default;
width: auto;
position: absolute;
left: -1000em;
/* this piece of coding is added because without it, IE will show the submenu horizontally instead of vertically. Paolo */
ul.MenuBarHorizontal li ul li{
clear: left;
/* 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
display: block;
float: none;
width: auto;
white-space: nowrap;
border-bottom: solid 1px #EEE;
font-size: 10px;
/* 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 : border: 1px solid #CCC; I have set it to 0 (zero because of IE*/
ul.MenuBarHorizontal ul
border: 0px;
background-color: #0CF;
/* Menu items are a light gray block with padding and no text decoration */
ul.MenuBarHorizontal a
display: block;
cursor: pointer;
background-color: #0CF;
color: #333;
text-decoration: none;
padding-top: 8px;
padding-right: 8px;
padding-bottom: 4px;
padding-left: 4px;
/* 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: #0CF;
color: #FFF;
/* Menu items that are open with submenus are set to MenuBarItemHover with a blue background and white text */
ul.MenuBarHorizontal a.MenuBarItemHover, ul.MenuBarHorizontal a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a.MenuBarSubmenuVisible
background-color: #33C;
color: #FFF;
SUBMENU INDICATION: styles if there is a submenu under a given menu item
/* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal a.MenuBarItemSubmenu
background-image: url(../../Templates/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(../../Templates/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(../../Templates/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(../../Templates/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;Nothing in the CSS that will cause the problem.
Gramps -
Spry menu problems with Internet explorer
Hi everyone
I'm having ongoing problems with my horizontal menus and
internet explorer. They work fine in other browsers and with the
generous help of others at these forums I've managed to sort out
most of the problems. But I've hit a real wall with this one. The
menus drop down showing the links OK but you cannot highlight or
click on the options that drop down, they just appear as text. Any
help would be appretiated. My appologies for posting in other
threads also but just hoping for a response.
I am very new to this side of design so simple answers would
be very helpful. Thanks
BobI have 2 similar problems to the prior posts:
1) I run IE7 and FF and the positioning of my submenus are
skewed in IE only.
2) I am not sure, but I believe I have a problem with my
iframe appearing in my IE7 browser behind all of my submenus. Well,
I know I have a problem with something, but whether or not it's the
iframe I don't know. What I do know is that the box shows up like a
border around my submenus and I can't get rid of it. I suspect that
it may be caused by the fact that my menu buttons are imported
gif's in the shape of rounded rectangles which allows for the
corners to be visible. I actually just thought about it and my
gif's are set to have a white index transparency, but maybe If I
export the gifs without transparency, then that issue will be
resolved. Well I will try that part and see, but any and all
suggestions are welcome. Oh and I just remembered, that problem
with the border around my submenus also has another problem with
the word "false" inside of that border behind my submenus. This
problem again is only in my IE browser, and it is hard to see it,
but I have no idea why that is there or what it's from. I ran a
search in my SpryMenuHorizontal.css page and in my html page for
the word 'false' but nothing turned up. The only document related
to this issue that contains the word 'false' is the
'SpryMenuBar.js' document.
CSS
Layout file
HTML Demo
link
Thank you,
Danny
Maybe you are looking for
-
Backing up 41.4 GB on 930 GB internal drive to a NAS with 5.1 MB used on 929 GB drive.
-
How can i change the proposed item category in Inbound Delivery?As it is defaulted from the delivery type,it will be in a display mode.As i got susbstitutes for it can you please let me know how can i make the field item category as input? Thanks KV
-
Internet speed when just joined bt
Hello,i was just wondering if it is normal that my speed is very slow at the start of the bt service,i have just signed up and my speed has been less than 1meg for about four hours,any help appreciated,richard.
-
As we all know we can use both Program and report at the beginning of a ABAP program, I want to ask is there any difference between them? When to use program and when to use report?
-
How can I set roles in Forms?
I have a user granted with diferents roles, is there any posibility when he log on to the application( IN FORMS) to force him to choose with which role he would wants to work and start the application as if he had been granted only with this role?