Spry submenu problem in IE7
Hi everyone,
I am having a problem with Dreamweaver CS3 where the spry
horizontal menu's submenus shift over to the right and level with
the bar rather than dropping down as a submenu should. This only
happens in IE7 however, not in Firefox or any other browser I have
tried. The website is
http://www.daytonlifepurpose.org/homePage.html
I tried the spry 1.5 js file "fix" but had no luck. Any help
at all would be greatly appreciated! Thanks!
Hi everyone,
I am having a problem with Dreamweaver CS3 where the spry
horizontal menu's submenus shift over to the right and level with
the bar rather than dropping down as a submenu should. This only
happens in IE7 however, not in Firefox or any other browser I have
tried. The website is
http://www.daytonlifepurpose.org/homePage.html
I tried the spry 1.5 js file "fix" but had no luck. Any help
at all would be greatly appreciated! Thanks!
Similar Messages
-
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; -
Hi,
I have created a Spry Accordion containing 7 sections, using CS4. It works perfectly in Firefox, however there is a strange bug in IE7. The top section requires the scrollbar and this is working ok. However, the other 6 sections all have the same problem (btw, none of these other 6 are needing the scrollbar as the text does not fill the content area) - the bottom line of text in each of the 6 other accordion sections is not displayed. All the other text in the 6 sections is ok (other than the fact that the top margin is non-existent - I assume that can be fixed fairly easily)
Has anyone else had this problem, and are there any know fixes?
many thanks for any help offeredSince the answer to your question requires some knowledge of Spry, you might want to post it in the Spry forum. Be prepared to post a URL to the problem page, if asked.
Mark A. Boyd
Keep-On-Learnin' :-) -
Hello,
I have created a spry menu for my website and am having problems making the submenu look the way I want it to. The menu item bar needs to stay invisible until it is hovered over...which I have done. However, once I hover over that menu item, I want the whole submenu background to change to the same color as my menu item background in the hovered state. Currently all I can achieve is to have each individual submenu item background changed when hovered over. I need the whole sub menu to have a background color to it. When I try and fix this by adding a property to the submenu, it changes the menu item background, and this I need to stay invisible in its normal state.
Any ideas on what I am missing or what I can do to fix this? Your help is greatly appreciated.
NateYou can change all the settings in your spry CSS
Free Dreamweaver video tutorials at http://www.helpvid.net
Stay Safe
Mark -
Another SPRY horizontal menu problem with IE7
I posted this before, with no responses, but I think
I've narrowed it down to a CSS response problem with IE7.0. If you
view the attached link in Firefox or Opera, the menu background
color responds correctly on the drop downs. In IE7, the
background-color is ignored, causing the menu to be translucent
and, uh, ugly. Has anyone else had an issue with the
background-color CSS attribute in the SPRY horizontal menu css not
working?
HELLLLLP! and, uh, Thanks,
Karl
Prototype
link using spry, css, ajax sprites and other magic.>>
Regrettably, the silence from the forum has been deafening.
I'm not sure if folks are just wary of SPRY and AJAX issues right
now because they're so new or if it's the summer heat
>>
guess it´s all of that :-) But folks visiting these more
"general" Dreamweaver forums are not necessarily Spry experts
respectively might not even be interested in that -- you´ll
certainly get more response when posting Spry related questions in
the
Spry
forums @ Adobe Labs -
Problems with Spry submenu appearing directly underneath parent in IE.
I've checked out a lot of forums but I can seem to find a solution to my spry issue. My spry submenu will not show up directly underneath the parent in Internet Explorer. Firefox and Safari look fine. I'm somewhat new to the Spry menu so any help would be appreciated. Here is my site: www.mattcreason.net. It's the portfolio tab.
Here is my SpryMenuBarHorizontal.css code:
@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;
background-repeat: no-repeat;
border-top-style: none;
border-right-style: none;
border-bottom-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
margin: 0;
padding: 0;
list-style-type: none;
font-size: 12pt;
position: relative;
text-align: left;
cursor: pointer;
width: 163px;
float: left;
background-repeat: no-repeat;
visibility: visible;
/* 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: 163px;
position: absolute;
left: -1000em;
height: 48px;
top: 48px;
/* 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
position: absolute;
width: 163px;
left: auto;
top: 48px;
/* Menu item containers are same fixed width as parent */
ul.MenuBarHorizontal ul li
width: 163px;
background-color: #8C0002;
/* 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;
border-top-width: thin;
border-right-width: thin;
border-bottom-width: thin;
border-left-width: thin;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
DESIGN INFORMATION: describes color scheme, borders, fonts
/* Submenu containers have borders on all sides */
ul.MenuBarHorizontal ul
/* Menu items are a light gray block with padding and no text decoration */
ul.MenuBarHorizontal a
display: block;
cursor: pointer;
padding: 0.5em 0.75em;
text-decoration: none;
font-size: 12px;
font-weight: bold;
font-family: Arial, Helvetica, sans-serif;
font-style: italic;
color: #FFFFFF;
/* 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: #B89B5C;
/* 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
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-repeat: no-repeat;
height: 48px;
width: 163px;
padding: 0px;
clear: none;
float: none;
margin: 0px;
background-image: url(../jpegs/PortfolioButton.jpg);
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
/* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal ul a.MenuBarItemSubmenu
background-repeat: no-repeat;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
/* 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-repeat: no-repeat;
background-position: 95% 50%;
background-image: url(../jpegs/PortfolioRollover.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 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;
Thank you!You not 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.
Gramps -
Weird Spry Submenu Effect in Internet Explorer
It looks like the first category item of a Spry submenu is stretching vertically to the same length of the Spry sub sub menu to the right. It works fine in Safari and Firefox. It is only doing this in IE 8 on a pc
Any idea why this might be happening?
Go here to see a photo of it.
http://www.advservices.biz/newsite/Photo015.jpg
To check out the site itself, go here
http://www.advservices.biz/newsite/newsiteindex.html
Thank you!I am not sure if the following is the cause of the problem but try it.
/* 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;
ul.MenuBarHorizontal ul li.MenuBarItemIE
display: inline;
f\loat: left;
The second set of rules should be deleted.
I hope this helps.
Ben -
Spry submenu is hidden by iframe on page
I normally do not use iframes but this particular site requires that i do.
I am using spry horizontal menu bar and the drop down submenu under products is hidden by the iframe. I have tried several variations with position and z-index but can't get the submenu to show on top of the iframe.
http://www.airpowerservicesinc.com/kaeser_aftercool_air.php
thank you for any help,
Jim BalthropI found out the problem is not with the iframe itself, but i was using the iframe to display a pdf file and
found out that browers do not support showing a pdf file on a web page. So I guess that is why the spry submenu will not show on top of the iframe, because it displays a pdf file. When i had the iframe display a php page, the spry submenu showed on top of the iframe.
Jim Balthrop -
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. -
I can´t see the Menu Spry submenu because a slideimages hide
I can´t see the Menu Spry submenu because a slideimages hide. The slide image is under the spry horizontal menu, so when a put the mouse over, the submenus open behind the slide images.
How can I repair.
Thanks a lot, I can´t continue my work because of this.
Sorry for may english.
Thank you.Assuming that the image slider is coded in JS and not Flash, there should be a z-index specified. Usually the value of the z-index is some absurdly high number. The challenge is to give the sub menu items of the menu bar a higher z-index value or to reduce the z-index of the image slider to a value lower than that of the menu bar.
The value of the z-index (1020) for the menu bar is located on or about line 48 of the SpryMenuBarHorizontal.css -
[svn:fx-trunk] 10817: Fix a deeplinking problem in IE7
Revision: 10817
Author: [email protected]
Date: 2009-10-02 09:20:31 -0700 (Fri, 02 Oct 2009)
Log Message:
Fix a deeplinking problem in IE7
QE Notes: None
Doc Notes: None
Bugs: SDK-17197
Reviewer: Corey
API Change: No
Is noteworthy for integration: No
tests: checkintests
Ticket Links:
http://bugs.adobe.com/jira/browse/SDK-17197
Modified Paths:
flex/sdk/trunk/templates/swfobject/history/history.js -
Hi,
I'm trying to finish a job and when i have cross checked the browsers it appears that i have a problem in ie7 only, as it is fine in ie8, Firefox, Safari etc. My left navigation bar is out of place. I'm not sure what is causing it any help would be appreciated. villa-sonshine.co.uk
Regards
StuIf all else fails you might want to fix up the structure to something more 'solid'
Floating left and right and having the 'content' sitting inbetween in 'thin air' is a highly flimsy construction.
Personally, as its a fixed width design I would float both left and right nav 'left'. I would encase your main content in a <div> of its own and float that left also and set its width to 496px. That's calculated by taking the sum of your left and right nav <divs> (each 152px wide) away from the 'main_ container' <div> (800px wide) gives you 496px.
If you do that then change the order in your html so the 'rightnav' <div> comes after the 'content'.
Also you would need to add clear: both; to your 'footer' <div> css to force that below the two floated <divs>
I can't see why this design should not work pretty much exactly the same in all browser if you get the base structure set up correctly. Of course there is dozens of ways to reach the end-result however in my experience some are more likely to fail than others.
Containers floated in the same direction is always a more solid foundation than ones floated left and right together. -
Spry submenu shows on top in ie
Help, I have tried everything. My product spry submenu works in every browser except ie. The address is www.timelessflooringdesign.com.
ThanksYou are not 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.
Gramps -
Spry horizontal menu: submenu background problem in IE7
Hello,
I am using the Spry horizontal menu in this website: http://www.isis-papyrus.com
It works perfectly on all current version browsers, but in IE7 the white submenu background only shows behind the actual text for each link and not to the border of the submenu box.
I modified the css to allow for dynamic sizing for each submenu (see below).
Any suggestions would be greatly appreciated.
Best, Oliver
@charset "UTF-8";
/* SpryMenuBarHorizontal.css - version 0.6 - Spry Pre-Release 1.6.1 */
/* Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. */
LAYOUT INFORMATION: describes box model, positioning, z-order
/* The outermost container of the Menu Bar, an auto width box with no margin or padding */
ul.MenuBarHorizontal
margin: 0;
padding: 0;
list-style-type: none;
font-size: 10px;
cursor: default;
width: auto;
font-family: Verdana, Geneva, sans-serif;
font-weight: normal;
/* Set the active Menu Bar with this class, currently setting z-index to accomodate IE rendering bug: http://therealcrisp.xs4all.nl/meuk/IE-zindexbug.html */
ul.MenuBarActive
z-index: 1000;
/* Menu item containers, position children relative to this container and are a fixed width */
ul.MenuBarHorizontal li
margin: 0;
padding: 0;
list-style-type: none;
font-size: 100%;
position: relative;
text-align: left;
cursor: pointer;
width: auto;
float: left;
/* Submenus should appear below their parent (top: 0) with a higher z-index, but they are initially off the left side of the screen (-1000em) */
ul.MenuBarHorizontal ul
margin: 0;
padding: 0;
list-style-type: none;
font-size: 100%;
z-index: 1020;
cursor: default;
width: auto;
position: absolute;
left: -1000em;
/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to auto so it comes onto the screen below its parent menu item */
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible
left: auto;
/* Menu item containers are same fixed width as parent */
ul.MenuBarHorizontal ul li
width: 100%;
clear:left;
float: none;
background-color: transparent;
color: #fff;
white-space: nowrap;
/* Submenus should appear slightly overlapping to the right (95%) and up (-5%) */
ul.MenuBarHorizontal ul ul
position: absolute;
margin: -5% 0 0 95%;
/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to 0 so it comes onto the screen */
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible ul.MenuBarSubmenuVisible
left: 100%;
top: 0;
DESIGN INFORMATION: describes color scheme, borders, fonts
/* Submenu containers have borders on all sides */
ul.MenuBarHorizontal ul
border: 1px solid #339999;
/* Menu items are a light gray block with padding and no text decoration */
ul.MenuBarHorizontal a
display: block;
cursor: pointer;
background-color: #fff;
padding: 0.4em 0.8em;
color: #339999;
text-decoration: none;
white-space: nowrap;
/* Menu items that have mouse over or focus have a blue background and white text */
ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus
background-color: #fff;
color: #339999;
/* Menu items that are open with submenus are set to MenuBarItemHover with a blue background and white text */
ul.MenuBarHorizontal a.MenuBarItemHover, ul.MenuBarHorizontal a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a.MenuBarSubmenuVisible
background-color: #339999;
color: #fff;
/* HACK FOR IE: to make sure the sub menus show above form controls, we underlay each submenu with an iframe */
ul.MenuBarHorizontal iframe
position: absolute;
z-index: 1010;
filter:alpha(opacity:0.1);
/* HACK FOR IE: to stabilize appearance of menu items; the slash in float is to keep IE 5.0 from parsing */
@media screen, projection
ul.MenuBarHorizontal li.MenuBarItemIE
display: inline;
f\loat: left;
background: #FFF;Thank you so much for your quick answer Beth!
You solved half my problem!
I added the bg-color to the li and ul styles of the submenus (css below) and now the white background shows correctly in IE7.
The only thing I still would like to resolve: The hover style for the menu items (inverse bg and text colors) only works for the actual text of the link and not for the entire width of the submenu box.
Any suggestions?
Thank you again.
Best, Oliver
@charset "UTF-8";
/* SpryMenuBarHorizontal.css - version 0.6 - Spry Pre-Release 1.6.1 */
/* Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. */
LAYOUT INFORMATION: describes box model, positioning, z-order
/* The outermost container of the Menu Bar, an auto width box with no margin or padding */
ul.MenuBarHorizontal
margin: 0;
padding: 0;
list-style-type: none;
font-size: 10px;
cursor: default;
width: auto;
font-family: Verdana, Geneva, sans-serif;
font-weight: normal;
/* Set the active Menu Bar with this class, currently setting z-index to accomodate IE rendering bug: http://therealcrisp.xs4all.nl/meuk/IE-zindexbug.html */
ul.MenuBarActive
z-index: 1000;
/* Menu item containers, position children relative to this container and are a fixed width */
ul.MenuBarHorizontal li
margin: 0;
padding: 0;
list-style-type: none;
font-size: 100%;
position: relative;
text-align: left;
cursor: pointer;
width: auto;
float: left;
/* Submenus should appear below their parent (top: 0) with a higher z-index, but they are initially off the left side of the screen (-1000em) */
ul.MenuBarHorizontal ul
margin: 0;
padding: 0;
list-style-type: none;
font-size: 100%;
z-index: 1020;
cursor: default;
width: auto;
position: absolute;
left: -1000em;
/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to auto so it comes onto the screen below its parent menu item */
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible
left: auto;
/* Menu item containers are same fixed width as parent */
ul.MenuBarHorizontal ul li
width: 100%;
clear:left;
float: none;
background-color: #fff;
color: #fff;
white-space: nowrap;
/* Submenus should appear slightly overlapping to the right (95%) and up (-5%) */
ul.MenuBarHorizontal ul ul
position: absolute;
margin: -5% 0 0 95%;
/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to 0 so it comes onto the screen */
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible ul.MenuBarSubmenuVisible
left: 100%;
top: 0;
DESIGN INFORMATION: describes color scheme, borders, fonts
/* Submenu containers have borders on all sides */
ul.MenuBarHorizontal ul
border: 1px solid #339999;
background-color: #FFF;
/* Menu items are a light gray block with padding and no text decoration */
ul.MenuBarHorizontal a
display: block;
cursor: pointer;
background-color: #fff;
padding: 0.4em 0.8em;
color: #339999;
text-decoration: none;
white-space: nowrap;
/* Menu items that have mouse over or focus have a blue background and white text */
ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus
background-color: #fff;
color: #339999;
/* Menu items that are open with submenus are set to MenuBarItemHover with a blue background and white text */
ul.MenuBarHorizontal a.MenuBarItemHover, ul.MenuBarHorizontal a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a.MenuBarSubmenuVisible
background-color: #339999;
color: #fff;
/* HACK FOR IE: to make sure the sub menus show above form controls, we underlay each submenu with an iframe */
ul.MenuBarHorizontal iframe
position: absolute;
z-index: 1010;
filter:alpha(opacity:0.1);
/* HACK FOR IE: to stabilize appearance of menu items; the slash in float is to keep IE 5.0 from parsing */
@media screen, projection
ul.MenuBarHorizontal li.MenuBarItemIE
display: inline;
f\loat: left;
background: #FFF; -
Renegade Spry submenu & sub-submenu tabs in IE7
In IE7, submenu tabs for a Spry horizontal menu open at the
top of the page, not adjacent to the menu tabs. Sub-submenu tabs
open at the far right, out of the visible page. No problems in
Firefox
Site is
http://www.broadwaterllc.com/Pages/about.html
Relevant code (admittedly sloppy, but this is my first
attempt) is:
<div align="center" class="style3 style6 style7">
<div align="right"><a href="#"
class="MenuBarItemSubmenu">Transactions</a>
<ul>
<li><a href="recenttransactions.html">Recent
Transactions</a></li>
<li><a href="Transactions.html">All
Transactions</a></li>
<li><a href="#"
class="MenuBarItemSubmenu">Transactions by Segment</a>
<ul>
<li><a href="newspapers.html">Newspaper
Publishing</a></li>
<li><a href="books.html">Book
Publishing</a></li>
<li><a href="eduprof.html">Educational &
Professional</a></li>
<li><a href="B2B_BIS.html">Business Media
& Information</a></li>
<li><a href="Digital.html">Digital
Media</a></li>
<li><a href="Misc.html">Other
Transactions</a></li>
</ul>
</li>
</ul>
</div>
</div>
</li>
<li>
Thanks in advanceThe best thing to do is to start a new page. Add a menu bar
to it. Set it up the way you need it. Then make a copy of the DW
generated CSS. Then open the non copy virsion. Inside you will see
a lot of comments that tell you what each is doing. It will also
point out the IE bug fixes. P.S. some are in the html code as well.
Work with this copy until you have it looking the way you want it
in the web browsers. Then copy and past it over your live copy on
the server. Use the back up if you make a change you do not like
and can not remember how to fix. Remember to do one or two changes
at a time. Then test.
Maybe you are looking for
-
Not able to save Objects in Oraganisational management
Dear Gurus, When i am creating Objects in OM system was given error message it is not saving objects, objects are creating in golden master server but unable to create objects in testing and quality. Please guide me how ti solve this issue.
-
How do I convert images I enter into a PDF into text?
Would you also happen to know how I convert images I enter into a PDF into text? (I can't use OCR if text already exists on that page of the document)
-
Communicate via serial port/ethernet from client app
Hi Is it possible to communicate between the client serial port and an Apex application? (or from the application to an ethernet device). I need to link an application to a weighing machine and send/receive information via an Apex application. The in
-
Hello,Can I show the result of a SELECT .. FROM.. WHERE.. into a procedure? For example: CREATE OR REPLACE PROCEDURE nuova_ricerca (p_Stringa VARCHAR2) AS BEGIN SELECT * FROM ArchivioSoluzioni WHERE Problema LIKE ConvertiPerLike(p_Stringa); END; why
-
How can I revert Firefox back to previous settings from 10 days ago?
The page is no longer showing some boxes on a webpage, like login boxes on some sites, drop down menus on others, nor the bar at the bottom that used to show weather, NoScripts status, etc. I do not know what I changed (or IF I changed anything) to g