IE7 menu problems (margin/padding)

[Jeff]

I am working on a website and I have the menu looking the way I want it in FF but the menus don't line up in IE7 (and possibly other IE versions). Can anyone let me know what is causing my issues?

http://spartacrc.org/index.php?page=worship

[BenedictPorter]

I've been having a look at this; I assume the bit you don't want is the gap that appears below your tabs?

Try the following:

Get rid of which appears after your ul#primary-nav. This will close up the gap in IE7 but will throw out the layout in FF.
To solve that FF issue, simply add height: 35px; to you #menuwrapper element.

Hope this makes sense, let me know how you get on.

[Jeff]

Because no one knew how to solve my problem.

I decided to go with background images that you see. I know about the gap in IE7, but am not that worried about it. If they are using IE7 then they don't know what it looks like in FF. So they will think it is suppose to be like that.

Thanks,
Jeff

[Dr.CSS]

I have found I need to sometimes add this to my templates, it could go in the css if you want...

{literal}
#primary-nav li {margin-bottom: -3px;}
#primary-nav li.menuparent:hover {margin-bottom:-4px;} /* a HACK!!! for IE7 */{/literal}