Horizontal menu problem in IE

I am currently working on a website for a company that hired me and I am very new to web design. My problem is with IE. In firefox my menubar works just fine but in IE it is shifted to the left and I dont know how to fix it. the web site is http://gsbridge.com any and all help is appreciated

I think your best bet is to start all over. You have designed your page around apDivs, which is almost never a good idea and for someone new to design even worse. What usually happens is after spending frustrating hours aligning these elements, you look at it on another computer or in another browser only to find none of it is aligned. apDivs are not really designed to be used as a layout tool.
Second, you will want to name your divs instead of having them numbered. It becomes very difficult to try to remember which div is which when your only working with numbers. So a menu div is better named <div id="menu"> than a number.
Also you can remove the CSS rules such as "border-left-style: none;" If you dont have a border you dont really need to make it a rule.
Using
<p> </p>
<p> </p>
<p> </p>
<p> </p>
for alignment is also going to cause you a problem.
Your best bet is to readup on the use of <div> tags and CSS. Your design is pretty straight forward and to redesign it quickly using better methods should not take too much time.
Sorry
Gary

Similar Messages

Another SPRY horizontal menu problem with IE7

I posted this before, with no responses, but I think
I've narrowed it down to a CSS response problem with IE7.0. If you
view the attached link in Firefox or Opera, the menu background
color responds correctly on the drop downs. In IE7, the
background-color is ignored, causing the menu to be translucent
and, uh, ugly. Has anyone else had an issue with the
background-color CSS attribute in the SPRY horizontal menu css not
working?
HELLLLLP! and, uh, Thanks,
Karl
Prototype
link using spry, css, ajax sprites and other magic.

>>
Regrettably, the silence from the forum has been deafening.
I'm not sure if folks are just wary of SPRY and AJAX issues right
now because they're so new or if it's the summer heat
>>
guess it´s all of that :-) But folks visiting these more
"general" Dreamweaver forums are not necessarily Spry experts
respectively might not even be interested in that -- you´ll
certainly get more response when posting Spry related questions in
the
Spry
forums @ Adobe Labs

Spry horizontal menu problem in IE and Chrome

First I'd like to express my frustration with spry. I spend way too much time trying to "band-aid" spry to work in different browers. I'll admit that I'm new to the web game but I seem to spend a large percentage of my time simply trying different "fixes" to something that I don't think should be this much of a problem. Regardless ...
I've made a pretty simple web page, put a spry horizontal menu on it and it works and displays just like it's supposed to in FF but IE and Chrome both seem to have a problem with it. Currently there are no links attached to it but that's not my problem - getting it to display correctly is. Possibly this issuehas already been addressed but I couldn't find it in the forum. Webpage can be viewed here
I've put (what I believe to be) the relevant css on the Main Content section of the page. Any help will be much appreciated. Thanks in advance.

I am so glad that you started again, this is the best way to learn, trial and error.
To fix your woes to date, have a look at the following
.thrColFixHdr #header {padding:0;} /*remove the padding from the menubar container*/
ul.MenuBarHorizontal{width:auto;margin:0;} /*remove the fixed width and auto margin*/
ul.MenuBarHorizontal li{width:16.6667%;} /*spread the 6 items over the full width 6*16.6667% = 100%*/
ul.MenuBarHorizontal ul a{text-align:left;} /*Set the the alignment back to left for any menu item links that are in a sub menu*/
To add images to your menu items have a look at the following http://labs.adobe.com/technologies/spry/samples/menubar/MenuBarSample.html, you will find it at the bottom of the page.
I did not realise that SolidWorks still existed, started using it in the mid 1990's, excellent product, easy to use and promotes fast product development. I lost track of it when I went for retirement 10 years ago.
Gramps.

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

Horizontal Menu problem in Firefox and Safari

I have created a Spry Widget horizontal menu bar in my
template .dwt. This menubar worked fine at first in IE7, Firefox3,
and Safari 3 and 4, but now that all pages are in place, it
displays incorrectly in Firefox and Safari. Specifically, for each
dropdown menu, only the final item appears. While creating the
pages, I did not make any changes to the template, so I am not sure
what caused this error.
www.davidarbury.com

You 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.
Then, if you have a look near the bottom of SpryMenuBarVertical.css you will see that the white background colour has been specified for IE as in
@media screen, projection
    ul.MenuBarVertical li.MenuBarItemIE
    display: inline;
    f\loat: left;
    background: #FFF;
Change the value to #CCC and it will have fixed that part of the problem.
When you upgrade to the later version of Spry, make sure to keep a copy of the CSS file as a reference to modifying the new CSS file.
Gramps

Spry Horizontal Menu problem in IE

I am a new Dreamweaver user and utilized the Spry horizontal
menu in a site that I am redesigning. The menus look great in
firefox, but do not load properly in internet explorer. I am hoping
to be able to resolve this problem as the menus look so good in
firefox.
You can view the page at
http://www.greenlevel.abcchicagolimo.com

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 / Template

When I'm editing the multi-level horizontal spry menu in my
template (which is not an editable region in my documents), if I
make the mistake of not clicking off the menu bar control panel -
when I switch over to an html file that is based on that template,
the menu is open with no ability to close it within the open file.
I have to go back to the template, make sure I click on an
editable area (thus having my cursor off the menu altogether), and
then go back to working in the html file to continue what I was
doing. This hasn't happened in earlier versions of DW that used
spry menus.

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

I switched to version 2 of the Spry Menubar due to sub-menu problems associated with iPads. Now I am having problems with sub-menus within IE8. It is not possible to *quickly* scroll down the menu without the sub-menu disappearing. Here is an example:
http://gerberanalytics.com/tennis/tennis_header_test.php
It works ok with CS6 in the design view, but not on the local test server or on the production server. Any ideas?
Thanks in advance for your help.

Gramps,
I appreciate you providing this. I took a closer look at the errors and I made a few changes but this validator service continued to kick out errors. In fact if you put Adobe's own web site into this application (http://www.adobe.com), it comes up with 44 errors. As I mentioned before, the Adobe Widget Browser application for Spry Menubar 2 is essentially creating my code so I doubted that this was an actual problem.
While I have been interacting with you, I have also been awaiting an update from Adobe's senior technology staff for a solution. I heard from them today. Here is what Adobe said: Spry Menubar 2 has problems with IE 8 and IE 9 (which I already knew). The first person with whom I spoke at Adobe suggested that my customers running the IE 8 and IE 9 browsers should switch to a different browser, such as Chrome. I explained that asking users to switch was not a solution -- that's about 35% of my users. I then asked to speak with a manager / supervisor.
My conversation with the supervisor went a bit better. He told me that those running IE 8 and IE 9 on a Windows XP machine are ok. Vista is a problem. Windows 7 is also iffy. My machine is a Vista and my wife's machine is a Windows 7. It does not work on either machine for us.
I told him that Spry Menubar 2 should be withdrawn from their site or there should be a warning to insure that people are aware of the problems. He didn't say that they would do that. He suggested that I should check back with him in a couple of weeks. I did not get a warm and fuzzy feeling that this was a priority item for them.
At this point, I'm bailing on Spry Menubar 2. I may return to Spry Menubar 1.6 which requires a "double tap" on the nav buttons to work on an iPad. I may also check out jQuery.
Thanks for the suggestions but it looks like Adobe has some serious issues. If your customers are using iPads (and they are), Spry Menubar 2 is not a solution to fix the problems encountered in Spry 1.4 and Spry 1.6.
Scott

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 Horizontal Menu problem with YouTube

I am trying to place YouTube videos in my website.
With a YouTube video embedded, the dropdown menu is behind YouTube and most of the links are note accessible.: http://gigharborrealestate.com/youtube/
Is there a way to have the Spry menu dropdown on top of the YouTube video?
Here is an example of the dropdowns working when I inserted a flash video: http://gigharborrealestate.com/782/
Thank you very much for your help,
Mike

Hi Arnout,
Thank you for responding to my question. I am not using a flash movie, I am embeding a Youtube video. Is it possible to add wmode="transparent" to a Youtube video? It would be great if you could give me a bit more info.
Thank you,
Mike

Spry horizontal menu alignment problem

There is an issue I am dealing with that is causing problems.
I am trying to avoid having the borders double up in thickness, anywhere within the menu.
I have achieved this by using the left and bottom border everywhere I can and then adding class or id tags where appropriate and adding my own top and right borders.
Works fine everywhere except at the top of the dropdown section of the submenus where it connects with the main horizontal menu.
I would like that top box of the submenu to align perfectly with the main horizontal menu bar so that there is a clean single pixel line.
A clean contiuous line around all menu objects.
When I add a top border on that top box of the submenu, I can adjust the placement a little but it always seems to either over ride the main horizontal menu, which causes me to either lose the border or double up on it.
if I have a border completely around both the horizontal menu and the submenu, then when I align them so that the borders sit on top of each other, I get an artifact at the corners of the lines that appear as a gap. It is NOT clean.
I can edit the position of the submenu in the CSS code below, I have done this with the margin-top statement. I have adjusted that between 0 and -1, and will inlcude images of the problem. Hopefully this will work.
I want a very clean continous line around the menu boxes that does NOT leave gaps, does NOT double up in thickness or leave any strange looking artifacts anywhere.
Any help would be greatly appreciated!
ul.MenuBarHorizontal ul
    margin: 0;
    padding: 0;
    list-style-type: none;
    z-index: 1020;
    cursor: default;
    width: auto;
    position: absolute;
    left: -1000em;
margin-top: 0px;
    margin-left: 0px;

Posting screenshots only demonstrates the problem. For anyone to troubleshoot it for you, they need to see the actual menu. Upload the problem page to a public website, and post the URL here. Then someone can have a look at it for you.

Horizontal Menu Bar Placement Problem in IE

I am having problem determining which CSS rule is causing a
horizontal menu bar to show correctly in the Dreamweaver Design
view, correctly in Firefox, but incorrectly in IE7. I have a
background image in the header, but the menu bar cover it up on the
left side in IE7. Any thoughts?
And while we are at it, any reason that the button hover
color touches the header logo in Firefox (as desired) but is
dropped down several pixels in IE?
I have attached a link to the site for viewing. I have also
attached the CSS code that the menu is using.
www.swcdc.grohse.com
Thanks for any help or ideas!

Anyone who increases their browser's text size will see the same thing. For wiggle room, reduce top-level links from 11 to no more than 7.
Nancy O.

Spry Horizontal Menu Bar width problem in IE and Safari

Hi Everyone,
I am working on a template and have used Spry Horizontal Menu for quite a few sites now. This one is giving me problems though on the width of the navigation bar. It moves the last right menu item to the next row on the left in Safari and IE and Chrome, but looks perfect in Firefox. I'm using a googlefont for the text. As I have quite a few menu items I have them set to 'auto' width. Is there a fix to make all the others look like it does in Firefox or do I need to shorten my menu items by changing titles/reducing padding, etc.?
Working page can be viewed at www.ikanizi.com/index2.html
Many thanks.

Anyone who increases their browser's text size will see the same thing. For wiggle room, reduce top-level links from 11 to no more than 7.
Nancy O.

Spry 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;

Problem endering Spry Horizontal Menu Bar in IE7...help.

I have created a horizontal menu bar in DW CS4 using Spry. When I view using live view, everything is working. When I test in Firefox and Nomad, everything renders as expected. I have tested the page www.ridedesigns/newsite/index.htm using IE7 on both a Windows XP and Vista platform. The problem is that the dropdown menu items fall on a layer behind the company logo (or so it appears) and are only partially visible behind that jpg.
What have I done incorrectly, or is this a known bug?

Here's how I changed the top of your page. Add these two divs:
#menudiv {
    width: 868px;
    margin-top: 0px;
    margin-right: auto;
    margin-bottom: 0px;
    margin-left: auto;
    text-align: center;
#maintable {
    width: 868px;
    margin-top: 0px;
    margin-right: auto;
    margin-bottom: 0px;
    margin-left: auto;
    clear: both;
And use them this way:
<BODY>
<PRE> </PRE>
<div id="menudiv">all of your menu markup here, as you have it now</div>
<div id="maintable">
<TABLE width="868" border="0" align="center" cellpadding="5" cellspacing="0" id="template">
    <TBODY>
      <TR valign="bottom">
        <TD height="68" colspan="5" align="left"><IMG src="./index_files/web_banner.gif" width="648" height="73" alt="Ride Designs"></TD>
      </TR>
...rest of table as it is now, followed by
</div>
In my analysis, by placing the menubar in the table, it was sinking into the universe of the table and could not rise above it with z-index. In fact, in IE, the list items in the submenus were taking on the height of the <tr> as well as falling down behind lower table rows.
By putting both the menubar and the table into identically-positioned divs...centered by using the margin: auto; on both sides...they will sit adjacent to each other and not interfere. It did not function correctly with both menubar and table in the same div.
Thanks for letting me dig this through you.
Beth

Horizontal menu problem in IE

Similar Messages

Maybe you are looking for