Spry iFrame Hack Problem - Resize Submenus

I'm trying to resize the submenus on the Spry Menu Bar
different sizes. It seems that when I make one submenu smaller than
the rest an iFrame sticks out of the side (with the width of the
rest of the submenus NOT the one I just resized). It of course
cannot be seen on FireFox but can be seen on IE. Any tips?

I see that you have fixed it.
Gramps

Similar Messages

IFrame hack for IE6 in Tooltip Widget

The iFrame, that is called up in IE6 to cover form elements
doesn't seem to get placed right.
Obviously, this issue has to be viewed with IE6 since that's
the only browser that uses the iFrame hack built into the Tooltip
Widget.
The following page shows some samples but the iFrame always
shows in the wrong place:
http://www.onuma.com/plan/test.html
The only way the iFrame almost matches, is when I place the
div tag containing the tooltip right behind the bold text:
http://www.onuma.com/plan/test2.html
I actually noticed that Adobe's
Sample
Page has the same problem but since the background is white and
the page is pretty long, one doesn't notice it. When you look at
the page with IE6 and you scroll over one of the tooltip texts, you
can notice the scroll bar on the right of the browser window
slightly moving. That's because the iFrame gets pushed into the
bottom of the page.
Is there any way to get this iFrame positioned correctly?
Thank you,
Thomas

Has anybody used the Tooltip Widget and tested it with IE6
with the standard SpryTooltip.js and SpryTooltip.css? Would it be
possible to show some examples?
I'm having difficulties with the position of the iframe that
is displayed to cover certain form fields in IE6. This becomes
especially apparent when the background isn't white and/or the
trigger is a bit wider since the iframe seems to get positioned
always in the same relative position to where I add the div tag (or
at the bottom of the page if I don't use absolute positioning).
If anybody can provide me with a sample of the Tooltip Widget
being used on a page with non-white background or even with form
fields it would be very much appreciated.
I'd much rather ignore IE6's buggy behavior too but too many
users are still using it...

Hacker problems so I reloaded Snow Leopard. Afterwards, Mac had to delete 798 items. Now looping on 4 items to delete for the past 2 weeks. Can't reboot, reload, or restart. I have to let the battery run down for it to turn off. How to fix this, please?

I had hacker problems so I reloaded Snow Leopard. Afterwards, Mac had to delete 798 items. Now it is looping on 4 items to delete for the past 2 weeks. I can't reboot, reload, or restart. I have to let the battery run down for it to turn off. I think a big part of the problem is that someon one the internet (the hacker) was mirroring my hard drive. It seems to have locked up my system. I could be wrong about this guess, though. All I do know is that it is now looping on the last 4 iems, and I can't do anything.
Well, I can get it to turn on, but all it does is continously try to delete the last 4 items. When I try to reload Snow Leopard, it tells me my hard drive is full and that I need to delete items.
Can anyone help? I am so lost without my Mac. I am back on the PC, and though it works, I'm sure many of you will understand when I say it's just not a Mac.
Thanks.

I installed Snow Leopard using my Apple external Superdrive. I followed directions I found on the Apple site. Here is the article info: Mac OS X v10.6 Snow Leopard: How to Erase and Install
                 Article HT3910
                 located at: http://support.apple.com/kb/HT3910
Everything was going smoothly until I got to the reinstall part. I had to choose to reinstall on a hard drive or network drive. I've never used a network drive; just the hard drive. It seems that's where the troubles began. I selected the hard drive. It seemed to go well, and then I got the message that I needed to delete some files because I was out of space. I chose to get rid of my music files, but, there were only 636. I don't know what the rest of the files were. I was using the Secure Empty Trash command.
That was my first time doing an erase and install. I tried to do it again, but I now get a continuous error telling me that my hard drive is full and I must delete files. Only I can't delete files because 4 files are still being deleted and my computer won't let me stop the process.
I found out about the hackers mostly by the fact that whenever I used to watch something like Hulu or Netflix, I never had problems with internet connection or speed. Lately, I had internet connection problems. I went in to check my settings for my internet provider and found out the settings had been changed to public and all these extra computers were connected to my network.

Problem resizing Viewport with WebDeveloper in WinXP and Vista

I'm having a problem resizing the Viewport with WebDeveloper running in FF10 & FF11 on my WinXP and Vista machines. Quite simply, I'm trying to resize the Viewport to 320x420pixels (to represent an iPhone) but can't get it to go below 510px.
There's no problem in FF1 on Win7. I have contacted Chris Pederick, the developer of WebDeveloper, and he says his code is tha same in all cases, and pretty basic JS. So possibly the fault lies in the browser. I've not noticed this problem in earlier versions of FF (i.e around 3.5)

Try to hide all toolbars or open a second window and hide them there to see if that allows to make the window smaller.

Problem resizing objects

I really think I may have lost it on this one. I am having
problems resizing any object inside of illustrator. Normally when i
use my selection tool, There is a box around the whole object that
I can click and drag to resize. It's not there, and consequently, I
can resize anything without going to
Object>Transform> Scale... and that's just too much.
Is there a setting I somehow messed with that did this? I am
completely lost. I dont even have a clue what is goin on anymore.
Any help would be much appreciated!

You may have hit CTRL+SHIFT+B which hides the bounding box
around objects. so hit CTRL+SHIFT+B again to see if that fixes the
issue. You can also find it view/ under "Show
Rulers"
Sorry Dreamweaverites for replying to an Illustrator question
in a Dreamweaver forum.
I had to help a brother out. You Know,
Shane

Problem Resizing Regions

I'm having a problem resizing regions.
On some regions, I can make the region shorter, but I cannot lengthen it.
On other regions, I can make the region longer, but there is not silence in the added length - instead, the first notes of the region repeat (this happens using the little ruler symbol, not the the little circular arrow symbol)
Does it make any difference if the region is a copied region? Can you only lengthen original regions and not copied regions? I tried changing the resolution as per a prior post about this problem and that did not help.
Thanks for your suggestions.

On some regions, I can make the region shorter, but I cannot lengthen it.
you can not make an audio ("real") region longer then it's total length.
On other regions, I can make the region longer, {but} the first notes of the region repeat (this happens using the little ruler symbol
by "ruler" do you mean the Right bracket? something like <]>
what type of region?

SPRY Vertical Menu Problem (IE Hack?)

I'm having a problem with the Spry vertical menu bar. The one
I created works fine in Firefox and in Safari, but not in Internet
Explorer. In IE the sub-menu containers open AT THE TOP of the menu
bar, and not next to the selected menu item. I'm not sure how to
fix it. Any help is appreciated.
You can see the problem here (view in IE and roll over any of
the menu items in the middle or lower part of the menu bar):
http://southerncharmgifts.net/thesouthernsportsman/html/ssarchery.html

I downloaded the Spry update but it didn't fix the problem.
It changed my menu box to white, when it should have remained
black. Hopefully I can fix it. But still the same problem with IE.
This is really bad! Any way to reverse the update?
quote:
Originally posted by:
SnakEyez02
First your Spry is out of date. Please click on the following
link below to get the Spry Updater. It will be inside the package
as an Extension. Then next time you start up DW click on Sites and
then you will see an option at the bottom to update Spry in your
site.
http://labs.adobe.com/technologies/spry/home.html
Looking at your page it appears to validate except for one
thing. All images need alt tags assigned to them.
See if updating the Spry helps.
Also there is a Spry forum that Adobe does check in case
there are bugs. The link to the forum is on that page and I will
also link it below:
http://www.adobe.com/go/labs_spry_pr1_forum
With regards to Pitmaster you can check the above links but
depending on the issue it could be something else. So if you need
further assistance post a link to your page.

Spry Menu Bar problem in IE

I am using a spry menu bar, which looks perfect in firefox, but in IE (version 6.0) I cannot get the font right for when an item on the menu bar has been visited. The font should stay white, but goes to a light purple colour which is hard to read. The site is www.binscombe.net and the CSS code is below. Any help really appreciated.
Many thanks,
Martin Brunet
@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;
    float: none;
/* 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: 11pt;
    position: relative;
    text-align: left;
    cursor: pointer;
    float: left;
    background-color: #716BA3;
    font-family: Verdana, Geneva, sans-serif;
    color: #FFF;
    width: white-space
: now;
/* 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: 11pt;
    z-index: 1020;
    cursor: default;
    width: auto;
    position: absolute;
    left: -1000em;
    color: #FFF;
    border-right-width: 2px;
    border-right-style: groove;
/* 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
    float: none;
    background-color: transparent;
/* Submenus should appear slightly overlapping to the right (95%) and up (-5%) */
ul.MenuBarHorizontal ul ul
    position: absolute;
    margin: -5% 0 0 95%;
    border-right-style: none;
    border-top-style: none;
    border-bottom-style: none;
    border-left-style: none;
/* 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-right-width: 2px;
    border-top-style: none;
    border-right-style: groove;
    border-bottom-style: none;
    border-left-style: none;
    border-top-color: #CCC;
    border-right-color: #CCC;
    border-bottom-color: #CCC;
    border-left-color: #CCC;
/* Menu items are a light gray block with padding and no text decoration */
ul.MenuBarHorizontal a
    display: block;
    cursor: pointer;
    background-color: #716BA3;
    color: #FFF;
    text-decoration: none;
    font-style: normal;
    font-weight: bold;
    border-right-style: groove;
    border-right-color: #006;
    padding-top: 0.5em;
    padding-right: 0.75em;
    padding-left: 0.75em;
    padding-bottom: 0.6em;
    border-right-width: 2px;
    list-style-type: none;
/* Menu items that have mouse over or focus or visited have a blue background and white text */
ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus, ul.MenuBarHorizontal a:visited
    background-color: #716BA3;
    color: #FFF;
    font-weight: bold;
/* Menu items that are open with submenus are set to MenuBarItemHover with a blue background and white text */
ul.MenuBarHorizontal a.MenuBarItemHover, ul.MenuBarHorizontal a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a.MenuBarSubmenuVisible
    background-color: #006;
    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%;
    background-color: #716BA3;
    color: #FFF;
/* 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;
#Comment_label {
    font-weight: bold;
    color: #FFF;ul.MenuBarHorizontal a:visited {
    /*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;
#Comment_label {
    font-weight: bold;
    color: #FFF;}

Hi mjw133,
There is already a topic about this problem
here.
You can also check out this
tech
note

Spry Horizontal Menu problem in Safari Mac/Windows

Hello!
Has anyone run into a problem using a horizontal spry menu and it showing up corectly in Safari? The menu is centered but I cannot get the table to center underneath. I then wrapped the table in a div and center aligned it, after addeding a <br/> (just trying stuff to no avail.)
Here is a link to a site I am working on.
http://tesibridal.com/NEW/index.html
So far I have found it does not work in Safari 3.2.1/Mac & Safari 3.2.2 and gives me a whole new set of spacing problems in Explorer (which I will address all of those next).
Thank you in advance for your time.
~TMC
P.S. - Here is the CSS for the menu:
@charset "UTF-8";
/* SpryMenuBarHorizontal.css - Revision: Spry Preview Release 1.4 */
/* Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. */
LAYOUT INFORMATION: describes box model, positioning, z-order
/* The outermost container of the Menu Bar, an auto width box with no margin or padding */
ul.MenuBarHorizontal
padding: 0;
list-style-type: none;
cursor: default;
width: 55em;
margin: auto;
/* Set the active Menu Bar with this class, currently setting z-index to accomodate IE rendering bug: http://therealcrisp.xs4all.nl/meuk/IE-zindexbug.html */
ul.MenuBarActive
    z-index: 1000;
/* Menu item containers, position children relative to this container and are a fixed width */
ul.MenuBarHorizontal li
    margin: 0;
    padding: 0;
    list-style-type: none;
    font-size: 11px;
    font-family:Verdana, Arial, Helvetica, sans-serif;
    color:#000000;
    background-color:#FF0000;
    text-align:center;
    position: relative;
    text-align: center;
    cursor: pointer;
    width: 8em;
    float: left;
/* Submenus should appear below their parent (top: 0) with a higher z-index, but they are initially off the left side of the screen (-1000em) */
ul.MenuBarHorizontal ul
    margin: 0;
    padding: 0;
    list-style-type: none;
    font-size: 11px;
    color:#000000;
    background-color:#FF0000;
    text-align:center;
    z-index: 1020;
    cursor: default;
    width: 10.1em;
    position: absolute;
    left: -1000em;
/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to auto so it comes onto the screen below its parent menu item */
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible
    left: auto;
/* Menu item containers are same fixed width as parent */
ul.MenuBarHorizontal ul li
    width: 10.1em;
/* Submenus should appear slightly overlapping to the right (95%) and up (-5%) */
ul.MenuBarHorizontal ul ul
    position: absolute;
    margin: -5% 0 0 95%;
/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to 0 so it comes onto the screen */
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible ul.MenuBarSubmenuVisible
    left: auto;
    top: 0;
DESIGN INFORMATION: describes color scheme, borders, fonts
/* Submenu containers have borders on all sides */
ul.MenuBarHorizontal ul
    border:#000000;
    border-style:solid;
    border-width:1px;
/* Menu items are a light gray block with padding and no text decoration */
ul.MenuBarHorizontal a
    display: block;
    cursor: pointer;
    background-color: #FF0000;
    color: #000000;
    text-decoration: none;
    border:#000000;
    border-style:solid;
    border-width:1px;
    padding-top: 1em;
    padding-right: 0em;
    padding-bottom: 1em;
    padding-left: 0em;
/* Menu items that have mouse over or focus have a blue background and white text */
ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus
    background-color: #FF0000;
    color: #FFF;
/* Menu items that are open with submenus are set to MenuBarItemHover with a blue background and white text */
ul.MenuBarHorizontal a.MenuBarItemHover, ul.MenuBarHorizontal a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a.MenuBarSubmenuVisible
    background-color: #FF0000;
    color: #FFF;
SUBMENU INDICATION: styles if there is a submenu under a given menu item
/* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal a.MenuBarItemSubmenu
    background-image: url(SpryMenuBarDown.gif);
    background-repeat: no-repeat;
    background-position: 95% 50%;
/* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal ul a.MenuBarItemSubmenu
    background-image: url(SpryMenuBarRight.gif);
    background-repeat: no-repeat;
    background-position: 95% 50%;
/* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal a.MenuBarItemSubmenuHover
    background-image: url(SpryMenuBarDownHover.gif);
    background-repeat: no-repeat;
    background-position: 95% 50%;
/* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal ul a.MenuBarItemSubmenuHover
    background-image: url(SpryMenuBarRightHover.gif);
    background-repeat: no-repeat;
    background-position: 95% 50%;
BROWSER HACKS: the hacks below should not be changed unless you are an expert
/* HACK FOR IE: to make sure the sub menus show above form controls, we underlay each submenu with an iframe */
ul.MenuBarHorizontal iframe
    position: absolute;
    z-index: 1010;
/* HACK FOR IE: to stabilize appearance of menu items; the slash in float is to keep IE 5.0 from parsing */
@media screen, projection
    ul.MenuBarHorizontal li.MenuBarItemIE
        display: inline;
        f\loat: left;
        background: #FF0000;
Message was edited by: TMCDesign
Message was edited by: TMCDesign

Hi clead16,
What do you mean by "do not load properly in internet
explorer"? I checked the site in IE6 and IE7 and it the menus
render OK.
You may want to also take a look at the
Menu
Samples and
centering
a horizontal menu
on Adobe labs.
-- Florin

Spry Horizontal Menu problem in IE7

Hello all,
Just wondered if one can help with this problem?
I have the horizontal manu bar pull down going across the
page
www.martinbleasby.co.uk
The problem can be seen in the aircraft pulldown.
Many thanks Martin.
Here is a copy of my CSS file.
@charset "UTF-8";
/* SpryMenuBarHorizontal.css - Revision: Spry Preview Release
1.4 */
/* Copyright (c) 2006. Adobe Systems Incorporated. All rights
reserved. */
LAYOUT INFORMATION: describes box model, positioning,
z-order
/* The outermost container of the Menu Bar, an auto width box
with no margin or padding */
ul.MenuBarHorizontal
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: 12pt;
position: relative;
text-align: left;
cursor: pointer;
width: 120px;
float: left;
font-family: Georgia, "Times New Roman", Times, serif;
height: auto;
/* 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: 12px;
z-index: 1020;
cursor: default;
position: absolute;
left: -1000em;
font-family: Georgia, "Times New Roman", Times, serif;
color: #E4E4E4;
background-color: #E4E4E4;
/* 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: #969fa0;
color: #E4E4E4;
text-decoration: none;
padding-top: 0.5em;
padding-right: 0.75em;
padding-bottom: 0.5em;
padding-left: 0.75em;
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 12px;
/* 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: #696077;
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: #3D466D;
color: #FFF;
SUBMENU INDICATION: styles if there is a submenu under a
given menu item
/* Menu items that have a submenu have the class designation
MenuBarItemSubmenu and are set to use a background image positioned
on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal a.MenuBarItemSubmenu
background-image: url(SpryMenuBarDown.gif);
background-repeat: no-repeat;
background-position: 95% 50%;
/* Menu items that have a submenu have the class designation
MenuBarItemSubmenu and are set to use a background image positioned
on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal ul a.MenuBarItemSubmenu
background-image: url(SpryMenuBarRight.gif);
background-repeat: no-repeat;
background-position: 95% 50%;
/* Menu items that are open with submenus have the class
designation MenuBarItemSubmenuHover and are set to use a "hover"
background image positioned on the far left (95%) and centered
vertically (50%) */
ul.MenuBarHorizontal a.MenuBarItemSubmenuHover
background-image: url(SpryMenuBarDownHover.gif);
background-repeat: no-repeat;
background-position: 95% 50%;
/* Menu items that are open with submenus have the class
designation MenuBarItemSubmenuHover and are set to use a "hover"
background image positioned on the far left (95%) and centered
vertically (50%) */
ul.MenuBarHorizontal ul a.MenuBarItemSubmenuHover
background-image: url(SpryMenuBarRightHover.gif);
background-repeat: no-repeat;
background-position: 95% 50%;
BROWSER HACKS: the hacks below should not be changed unless
you are an expert
/* HACK FOR IE: to make sure the sub menus show above form
controls, we underlay each submenu with an iframe */
ul.MenuBarHorizontal iframe
position: absolute;
z-index: 1010;
/* HACK FOR IE: to stabilize appearance of menu items; the
slash in float is to keep IE 5.0 from parsing */
@media screen, projection
ul.MenuBarHorizontal li.MenuBarItemIE
display: inline;
f\loat: left;
background: #FFF;
}

What kind of problem are you having? I'm using IE 6 and don't
see a problem. I was looking because I'm having a problem with the
drop down getting scrambled and rendering as a horizontal structure
sometimes and working right others.

Spry Menubar-background problem

Hi,
I have tried to search for this problem, and though I have
found others with the same problem, there have been no answers
(probably so obvious I missed it and they figured it out.) And I
did update the Spry Menubar to the latest version.
The Spry Horizontal menubar works fine on Firefox, but on IE
7 the background is white as well as the submenus, not the intent.
The alignment and size is fine, just the designed background colors
don't work (on the menu itself, I want a transparent background, on
the submenus it is #777079.)
Website:
September
Entertainment Website
Style Sheet spry:
Spry
CSS
Thank you in advance for any help you can give me.
Cheers,
Janell

Hi,
Just found the problem for anyone that is having the same
thing happen. It is the hack at the bottom of
"SpryMenuBarHorizontal.css":
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;
Where it says: "background:fff;" change it to whatever you
need, in my case, "background: transparent;"
Voila!!
Cheers,
Janell

Spry Drop Down Problem in Internet Explorer

I have built my spry drop down and it is working in all browsers except for IE. I really need help with this. Attached is my code or you can view it at roemtech.com/menubarattempt.html. It is rendering it vertically and stacking the buttons on top of each other. Check it out in Internet explorer to see what I mean. Thanks so much for the help.
JBelsher
<!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>Template Model</title>
<link href="webelements.css" rel="stylesheet" type="text/css" />
<link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<style type="text/css">
.BulletAlignment { text-align: left;
</style>
</head>
<body>
<div class="container">
<div class="header">
    <div align="right" class="FirstNameText"><strong><em>The First Name in Classroom Audio Systems</em></strong></div>
    <div style="background-color:#000; width:1024px; float: left;">
      <div>
<ul id="DropDown" class="MenuBarHorizontal">
                    <li><a href="index.html">Home</a></li>
          <li><a href="Classroom-Audio-Systems.html" class="MenuBarItemSubmenu">Products</a>
            <ul>
              <li><a href="classroom-audio-amplifiers.html">Amplifiers</a></li>
              <li><a href="classroom-audio-speakers.html">Speakers</a></li>
              <li><a href="classroom-audio-accessories.html">Accessories</a></li>
            </ul>
          </li>
          <li><a href="classroom-audio-specs.html">Specs</a> </li>
          <li><a href="classroom-audio-tips.html">Tech Tips</a></li>
          <li><a href="classroom-audio-contacts.html">Contacts</a></li>
        </ul>
      </div>
    </div>
    <div style="height:30px;"></div>
</div>

</div>

<div class="footer"><span style="padding-top:10px; font-size: 12px;">© 2010 Roemtech LLC, All Rights Reserved 1491 N. Kealy Ave. Suite 8, Lewisville, Texas 75057</span></div>
</div>
<script type="text/javascript">
var MenuBar1 = new Spry.Widget.MenuBar("DropDown", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
</script>
</body>
</html>

It needs to be versions 6 and higher of Internet Explorer. I will attach my CSS below. Just note all of the notes are still in there from dreamweaver. Thanks for looking at this.
James
@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: 120%;
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: 120px;
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%;
cursor: default;
width: 8.5em;
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.5em;
/* 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
/* 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: #09F;
text-decoration: none;
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
background-color: #000;
color: #09F;
font-size: 100%;
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: #333;
color: #09F;
text-align: center;
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: repeat-x;
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: none;
background: #FFF;

Spry menu IE Problems, shifting submenu to the right

ok haveing trubble with the menu shifting to the right of the drop down, it works in all other but IE... any ideas ?
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
          list-style-type: none;
          font-size: 105%;
          cursor: default;
          width: auto;
          margin-top: -32px;
          margin-right: 0%;
          margin-bottom: 0px;
          margin-left: 5em;
          height: auto;
          float: left;
          border-bottom-style: none;
          font-weight: normal;
          line-height: normal;
          font-style: normal;
          color: #000;
          padding-top: 0px;
          padding-right: 0%;
          padding-bottom: 0px;
          padding-left: 0%;
          text-align: center;
          border-top-style: none;
          border-right-style: none;
          border-left-style: none;
/* 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
          padding: 0;
          list-style-type: none;
          font-size: 100%;
          position: relative;
          text-align: center;
          cursor: pointer;
          width: auto;
          float: left;
          margin-top: 10px;
          margin-right: 0;
          margin-bottom: 0;
          margin-left: 0;
          visibility: inherit;
/* 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: 110%;
          z-index: 1020;
          cursor: default;
          width: 12em;
          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;
          -khtml-opacity: 0.9;
          background-color: #666;
/* Menu item containers are same fixed width as parent */
ul.MenuBarHorizontal ul li
          width: 11em;
/* Submenus should appear slightly overlapping to the right (95%) and up (-5%) */
ul.MenuBarHorizontal ul ul
          position: absolute;
          margin-right: 0;
          margin-bottom: 0;
          width: 12em;
          margin-left: 12em;
/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to 0 so it comes onto the screen */
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible ul.MenuBarSubmenuVisible
          left: auto;
          top: 0;
          background-color: #666;
DESIGN INFORMATION: describes color scheme, borders, fonts
/* Submenu containers have borders on all sides */
ul.MenuBarHorizontal ul
          border: 1.5px solid #fff;
          font-size: 12px;
          padding-top: 0px;
/* Menu items are a light gray block with padding and no text decoration */
ul.MenuBarHorizontal a
          display: block;
          cursor: auto;
          background-color: opacity
:0.4;
          color: #FFFFFF;
          text-decoration: none;
          font-size: 100%;
          padding-top: 0em;
          padding-right: 2em;
          padding-bottom: 0em;
          padding-left: 0em;
/* Menu items that have mouse over or focus have a blue background and white text */
ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus
          color: #F69;
          background-color: transparent;
/* Menu items that are open with submenus are set to MenuBarItemHover with a blue background and white text */
ul.MenuBarHorizontal a.MenuBarItemHover, ul.MenuBarHorizontal a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a.MenuBarSubmenuVisible
          background-color: transparent;
          color: #FF6699;
SUBMENU INDICATION: styles if there is a submenu under a given menu item
/* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal a.MenuBarItemSubmenu
          background-image: url(SpryMenuBarDown.gif);
          background-repeat: no-repeat;
          background-position: 95% 50%;
/* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal ul a.MenuBarItemSubmenu
          background-image: url(SpryMenuBarRight.gif);
          background-repeat: no-repeat;
          background-position: 95% 50%;
/* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal a.MenuBarItemSubmenuHover
          background-image: url(SpryMenuBarDownHover.gif);
          background-repeat: no-repeat;
          background-position: 95% 50%;
/* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal ul a.MenuBarItemSubmenuHover
          background-image: url(SpryMenuBarRightHover.gif);
          background-repeat: no-repeat;
          background-position: 95% 50%;
BROWSER HACKS: the hacks below should not be changed unless you are an expert
/* HACK FOR IE: to make sure the sub menus show above form controls, we underlay each submenu with an iframe */
ul.MenuBarHorizontal iframe
position: absolute;
z-index: 1010;
/* HACK FOR IE: to stabilize appearance of menu items; the slash in float is to keep IE 5.0 from parsing */
ul.MenuBarHorizontal li.MenuBarItemIE
          display: inline;
          f\loat: left;
          background-color: #FFF;
          filter:alpha(opacity=0);
          /* [disabled]-moz-opacity:0.; */
          -khtml-opacity: 0.;
          opacity: 0.;

There are so many (unnecessary) changes made to the SpryMenuBarHorizontal.css that I have given up.
Please have a look here http://www.dwcourse.com/dreamweaver/ten-commandments-spry-menubars.php#one and start again.
Gramps

Spry menu bar not showing submenus

I am having a problem with my spry vertical menu bar. It works just fine on my machine, but on the live server the submenus will not display. The website in question is www.staffords-catalog.com. The company I work for uses asp, so I pasted the following code into the <head> of the default.asp page.
<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<link href="SpryAssets/SpryMenuBarVertical.css" rel="stylesheet" type="text/css" />
I pasted the following code in the <body> where the menu goes.
<ul id="MenuBar1" class="MenuBarVertical">
What am I doing wrong?

The following code is in my index page, but not in the default.asp page. It's at the bottom of the page, right after the code for the image maps and the table which contains the ads. There is some code after it, for the contact information and the list of linked keywords at the bottom of the page.
<script type="text/javascript">

</script>

Horizontal Spry Submenu Alignment Problems

I am experiencing a massive emotional low with not being able to figure this problem out.
I have incorporated a Spry menu in the site I'm building, but I'm having trouble getting the
drop down submenu to align properly in Firefox/ Chrome AND IE8
What seems to be the heart of the problem is the CSS for the Spry class "ul.MenuBarHorizontal ul.MenuBarSubmenuVisible"
By default, it's set to this:
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible
left: auto;
If I leave it like this, the submenus drop down where I want them to (upon rollover) - with the left edge
of the submenu aligned with the parent button (ul li item). However this only works properly in Chrome / Firefox.
If I use IE8 to look at the site. The submenus drop down such that the left edge of submenu aligns
with the the center of the partent button (ul li item) upon rollover.
I can get IE to overcome this alignment issue by adding "position:relative" to the CSS for "ul.MenuBarHorizontal ul.MenuBarSubmenuVisible"
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible
left: auto;
position:relative
After making this addition, IE8 works fine, and the submenus align to the left. But now, if I browse in Chrome
or Firefox, the 1px border of the submenus do not appear on the left, right and bottom edges. It's only there
for the top edge???!!!??
It seems that the property listed below gets compromised and does not work if I add the "position:relative" attribute
to "ul.MenuBarHorizontal ul.MenuBarSubmenuVisible"
/* Submenu containers have borders on all sides */
ul.MenuBarHorizontal ul
border: 1px solid #CCC;
If anyone can offer and explanation to this I would be hugely appreciative.
Thanks so much,
Hosanna_Bizarre

Please find the html and css attached.
Yes, I have used text-align: center on the main menu.
Like I say, adding position:relative to the css for "ul.MenuBarHorizontal ul.MenuBarSubmenuVisible"
fixes the problem for IE and it displays left justified submenu items underneath a center-aligned
main menu button.
Problem is the submenu borders do not display properly any more for Chrome / Firefox.
Thanks
H

Spry iFrame Hack Problem - Resize Submenus

Similar Messages

Maybe you are looking for