Spry menu and image viewer

Question

I am using a spry horizontal menu.
Two problems I am trying to fix:
1. The drop down menus shift to the right in IE7 on PC
instead of coming up directly below the parent menu item.
2. The drop down menus overlap an 'image viewer flash
element' area and struggle to stay on top when the slide show is
playing. Is there a way to make them drop down over the flash area
or will that always conflict?
I am very new to Dreamweaver--I stalled on switching over
from GoLive which I have used since 1997.
Thanks for any help. I feel like a newbie all over again!
Kate
site:
http://www.mtelliott.com/test

Answer 1

#comp_image {
background-image: url(../images/signs.jpg);
background-repeat: no-repeat;
position: relative;
height: 210px;
width: 745px;
Try making that rule like this -
#comp_image {
background-image: url(../images/signs.jpg);
background-repeat: no-repeat;
position: relative;
height: 210px;
width: 745px;
overflow:hidden;
Does that help?  I believe what's causing the gap is the top margin on the <h1> tag which will 'escape' the container.  By making the container a new block formatting context with the overflow style, you can prevent the margin from escaping.  Alternatively, just add this rule -
#comp_image h1 {
margin-top:0;