Background nav image not displaying in some browsers...

Question

Hi,
   I'm in the process of building a website template - still ironing out some bugs, but just discovered that the bacground image in my navigation bar isn't displaying on some browsers (including some versions of IE). It works in IE8 where my primary testing takes place (on both my local drive and from the temporary "live" server, but in most other browsers, doesn't show up...
below is a link to my test page:
http://home.roadrunner.com/~jgigandet/trinity/
and here is the css with the applicable code in red:
/*Menu Outer Wrapper*/
.p7PMMh04 {
width: auto;
height: 20px;
margin: 0 auto;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: bold;
background-image: url(img/new_bk.gif);
background-repeat: repeat-x;
background-color: #000;
text-align: left;
line-height: normal;
/*Hide Sub-Menu in Design View
Compensate for LI padding on Sliding Doors themes*/
.p7PMMh04 ul div {
display: none;
TOP LEVEL MENU
.p7PMMh04 ul {
margin: 0;
padding: 0;
.p7PMMh04 li {
list-style-type: none;
float: left;
width: 120px;
/* Hide from IE5 Mac \*/
.p7PMMh04 li {
width: auto;
/*Top Level Links*/
.p7PMMh04 a {
display: block;
text-decoration: none;
padding: 2px 14px 3px 14px !important;
color: #ffc42a !important;
/*border-right: 1px solid #8184e6;  */
text-align: left;
/*Link hover when no drop down is present */
.p7PMMh04 a:hover {
color: #df8f04 !important;
/*background-color: #DFDFDF;*/
Syntax for special classes programatically assigned to first and last links and also LIs
See user guide for more information
.p7PMMh04 ul a.pmmfirst {
border-left: 1px solid #df8f04;
.p7PMMh04 ul ul a.pmmfirst {
border-left: 0;
.p7PMMh04 ul a.pmmlast {
.p7PMMh04 ul li.pmmfirst {
.p7PMMh04 ul li.pmmlast {
/*First Sub Level*/
.p7PMMh04 ul ul {
z-index: 10000;
background-color: #333;
width: 150px;
background-image: url(img/pmm_carbon_subs.jpg);
background-repeat: repeat-x;
border-right: 1px solid #000;
border-bottom: 1px solid #000;
.p7PMMh04 ul ul li {
float: none;
background-color: #000;
background-image: none;
.p7PMMh04 ul ul a {
padding: 4px 12px !important;
color: #ffc42a !important;
border-right: 0;
text-align: left;
overflow: hidden;
/* rollover on 1st level rollovers  */
.p7PMMh04 ul ul a:hover {
background-color: #333; !important; 
color: #df8f04 !important;
/*Third Level (Flyouts in horizontal menu)*/
.p7PMMh04 ul ul ul {
border-top: 1px solid #df8f04;
border-right: 1px solid #333;
border-bottom: 1px solid #333;
border-left: 1px solid #df8f04;
SPECIAL IMAGE-BASED RULES
.p7PMMh04 img {
border: 0;
.p7PMMh04 .p7PMM_img {
padding: 0px;
border: 0;
background-image: none;
background-color: transparent;
TRIGGERS and CUURENT MARK RULES
The Closed state relates to trigger items when their child menus are not showing
The Open state relates to trigger items when their child menus are showing
Selectors appended with _left Automatically change arrow position and orientation
if sub levels are set to fly out to the left
/*Sub Level*/
.p7PMMh04 ul a.trig_closed, .p7PMMh04 ul a.trig_closed_left {
background-image: url(img/pmm_south_medium.png);
background-repeat: no-repeat;
background-position: right center;
.p7PMMh04 ul a.trig_closed_up {
background-image: url(img/pmm_north_medium.gif);
background-repeat: no-repeat;
background-position: right center;
.p7PMMh04 ul a.trig_open, .p7PMMh04 ul a.trig_open_up {
color: #000 !important;
background-color: #DFDFDF !important;   /* This is background color of main dropdown rollover */
.p7PMMh04 ul ul a.trig_closed {
background-image: url(img/pmm_east_dark.png);
background-repeat: no-repeat;
background-position: right center;
.p7PMMh04 ul ul a.trig_closed_left {
background-image: url(img/pmm_west_dark.gif);
background-repeat: no-repeat;
background-position: left center;
.p7PMMh04 ul ul a.trig_open {
color: #FFF !important;
background-color: #424242 !important;
/*The Current Marker (You are here) links*/
.p7PMMh04 .current_mark {
font-weight: bold;
color: #60c3d1 !important;
.p7PMMh04 ul ul .current_mark {
color: #FFF !important;
Utility Rule used for Clearing floats in Horizontal Menus
.p7pmmclearfloat {
clear: both;
height: 0;
line-height: 0;
font-size: 0;
Thanks in advance for any advice,
Jesse

Answer 1

You have applied a height of "auto"to your menubar container, which gives it no height at all in some browsers. If you have a clue what height you would like to display for your menubar, give it, instead of:
    <div style="height: auto;" id="p7PMM_1" class="p7PMMh04">
Better yet, leave it in the CSS file, where you will find it when you go looking for it. You already assign a height there:
.p7PMMh04 {
    width: auto;
    height: 20px;
    margin: 0 auto;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
    font-weight: bold;
    background-image: url(http://home.roadrunner.com/~jgigandet/trinity/img/new_bk.gif);
    background-repeat: repeat-x;
    background-color: #000;
    text-align: left;
    line-height: normal;
Because your inline style of height:auto; has more proximity (is closer) to the element being styled, it overrides the style in the stylesheet and applies the height: auto; instead of allowing the height: 20px;
Beth