-
1. Re: Problem endering Spry Horizontal Menu Bar in IE7...help.
I am pretty sure that Microsoft does not consider it a bug...it has to do with the way their Internet Explorer browsers interpret absolute positioning and layering order. I have not found it possible to simply re-assign z-order and have it work in IE browsers.
As I was not able to link over on your provided link, I am surmising here, but if you designed your page using Absolute Positioning divs (apDivs), you will need to invoke the divs that you want to "lay back" under the menus BEFORE you invoke the menubar.That should be pretty simple if you are using apDivs; just call them at the beginning of the page (the beginning of the BODY of the page, of course).
Microsoft stacks the layers in the order they are called in the page code, not according to where they sit on the page, and seemingly totally disregarding any Z-Order you might set up.
This wisdom is the result of many hours of empirical labor...I have spent hours this week trying to get menus to cooperate vis-a-vis apDivs and videos.
Best,
Beth
-
2. Re: Problem endering Spry Horizontal Menu Bar in IE7...help.
Beth:
Thanks for your insight. I will give this a try.
Bruce Roemmich
B.O. Box 880875
Steamboat Springs, CO 80488
970-846-7521
www.impactimagedirect.com
-
3. Re: Problem endering Spry Horizontal Menu Bar in IE7...help.
Still no luck. I cannot figure out how to change the order of when elements
load. The menu is in the first row of a table. www.ridedesigns.com/newsite/.
It is apparent when viewing the home page with IE7.
Bruce
www.impactimagedirect.com
-
4. Re: Problem endering Spry Horizontal Menu Bar in IE7...help.
I've got it working, but I have to go to bed as it is now after midnight!
First, put the menubar in a div that is the same width as your table, but positioned above it. That, in and of itself, might work.
I will go in tomorrow morning and see how little change I can get away with.
As it stands now, I have changed many things, and I think that most of them don't need changing. We'll see.
Best,
Beth
-
5. Re: Problem endering Spry Horizontal Menu Bar in IE7...help.
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
-
6. Re: Problem endering Spry Horizontal Menu Bar in IE7...help.
Beth:
I have implemented the code as I understood it. The dropdown still falls
behind the image using IE 7. No problem with IE 8. I created an experimental
index page to work with.
To view the site: www.ridedesigns.com/newsite/ and then navigate to
index_spry.html. I believe the code corrections should be viewable. Is there
a better way to present my code for review?
Bruce
-
7. Re: Problem endering Spry Horizontal Menu Bar in IE7...help.
Bruce, that's the perfect way to present a page for review. I can save the page as a complete web page, and it saves the css files as well as the js files along with it. So when I open it in Dreamweaver, it's all there (including the images).
I notice that you have still put your menubar into a small table, albeit separate from the rest of the layout. I suggest taking out the table coding there; you don't need it, and that may be what is keeping the layering from working.
Of course, maybe not.
Seems to me that one surefire way for the menus to fall over the content (if the above tweak doesn't work) is to have the menus appear later in the code. You can do that by putting them in an (ARGH!) absolutely positioned div positioned relative to the whole content container, but putting the code for it after the code for the content. Because absolute positioning takes the material thus positioned out of the normal flow of the page, it should then appear atop the stacking order...stacked last, seen first, that sort of thing.
If taking the table markup out of the menu div works out, disregard the second fix. If it does not, check back in; I'll try to walk through it with you.
Beth
-
8. Re: Problem endering Spry Horizontal Menu Bar in IE7...help.
Beth:
I attempted not inserting in a table and the CSS style were no longer
applied.
I guess I don't know how to pull the other suggestion off. When I place the
menu div after the image, that's where it displays live.
How can I display the menu at the top yet place the code section after the
image?What am I missing?
Bruce
-
9. Re: Problem endering Spry Horizontal Menu Bar in IE7...help.
Sure.
It's sleight of hand. I'm just rushing off; I'll catch up on this in the morning, and code up your page to show you what I mean.
Beth