Hi everyone!

I thought I'd drop in and see if anyone could help me out. I have made a display block which appears when someone hovers over the navigation. It works perfectly in Firefox & Safari (I am working on a mac) but when I check it in Internet Explorer - the hover box appears in the wrong place.

The hover box is supposed to align directly under the navigation - approximately in line with "seasonal services".

The URL to my site is www.srpenterprises.ca/gardenYard.html

The css that controls the span in the navigation is:

div#navcontainer a span {display: none;}

div#navcontainer a:hover span {display: block;
position: absolute; top: 460px; width: 150px;
padding: 5px; margin: -10px; z-index: 100;
color: #F9F8DF; background-color: #999F52;
font: 14px Verdana, sans-serif; text-align: center;}

If you feel like helping me - feel free to be really specific. I'm pretty new at this.........

Thanks
Hopeful Newbie

1 - Set your #navcontainer to position:relative - that makes sure that the absolutely positioned span is positioned relative to #navcontainer and not the body.

2 - set your left position by adding left: 0; to the a:hover span styles.
You may have to add conditional comments and a separate CSS file with just the fixes needed for IE in it to combat IE's problems.

LadynRed:

Web GODDESS!!!!!!!!!

It worked! I spent about 6 hours yesterday struggling with that hover thing.

Thank you!Thank you!Thank you!
Merridith

You're welcome