Webmaster Forum / HTML, CSS, Scripts / CSS / April 2008

I am building a website for a school, but running into a display problem
between IE and CSS.  (The site is http://stmary-stthomas.org/ )

The main horizontal menu bar looks just fine on Mac and PC with most
browsers.

But on the PC with IE7, the menu bar winds up about 20 pixels too high.

The menu is drawn in a DIV with class "navbar", which is inside a DIV
with class "navcontainer":

  #navcontainer {
     position:absolute;
     top:115px;  /*  This works on most browsers,
                     but would have to be 135 for IE7 */
     }

  #navbar {
     height: 32px;
     padding: 0px 0px 0px 0px;
     margin: 0;
     position: relative;
     z-index: 900;
     float: none;
     width: 100%;
     font: 14px "Lucida, Verdana, sans-serif;
  }

Help!  Does anyone have any idea of what's wrong, *OR* how I can tweak
this to make the "top" of the menu position come out correctly on IE7?

THANKS!!!!

Kevin Killion