I have a page using CSS; the header div displays properly in IE and FF, but when I add the menu_l div, it displays correctly in IE, but not FF. The menu is a table I created on a separate .htm page and add it in with a php include. The menu.htm does not have anything on it but the table html. When I view the menu.htm page alone, the table displays perfectly in both browsers, but when I add it to my page, FF does not display all the text; it appears as though it is there, but is white. I cannot locate the conflict and have worked on this for several days now. Hope someone can help.
I have tried both these doctypes:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
the results are the same.
Here is the code for the positioning of the divs:
#header {position:relative;height:110px; top:0px; left: 0px; z-index:1;}
#menu_l {position:relative; width:160px; float:left; z-index:1;}
Here is the code for the menu_l div:
table#menu {
width: 100%;
align: top;
border-collapse:collapse;
}
.menubar {
background-image:url(../images/navbar.jpg);
width:100%;
font-family:Arial;
font-size:10pt;
color:#fff;
font-weight:bold;
}
.sub {
font-family:Arial;
font-size:10pt;
color:#7A0026;
font-weight:bold;
}
.menuitem {
font-family:Arial;
font-size:8pt;
}
.menuitem a:link,a:visited {
font-family:Arial;
font-size:8pt;
color:#7A0026;
text-decoration:none;
}
.menuitem a:hover,a:active {
font-size:10pt;
font-weight:bold;
}
Here is a sample of the html for the menu table:
<table id="menu">
<tr><td class="menubar">Category</td></tr>
<tr><td class="menuitem"><a href="link">Item</a></td></tr>
<tr><td class="sub">Subcategory</td></tr>
<tr><td class="menuitem"><a href="link">Subcategory Item</a></td></tr>
<tr><td class="menuitem"><a href="link">Subcategory Item</a></td></tr>
<tr><td class="menuitem"><a href="link">Subcategory Item</a></td></tr>
<tr><td class="menuitem"><a href="link">Subcategory Item</a></td></tr>
<tr><td class="sub">Subcategory</td></tr>
<tr><td class="menuitem"><a href="link">Subcategory Item</a></td></tr>
<tr><td class="menuitem"><a href="link">Subcategory Item</a></td></tr>
<tr><td class="menuitem"><a href="link">Subcategory Item</a></td></tr>
<tr><td class="menuitem"><a href="link">Subcategory Item</a></td></tr>
<tr><td class="menubar">Category</td></tr>
<tr><td class="menuitem"><a href="link">Item</a></td></tr>
<tr><td class="menuitem"><a href="link">Item</a></td></tr>
<tr><td class="menuitem"><a href="link">Item</a></td></tr>
<tr><td class="menubar">Category</td></tr>
<tr><td class="menuitem"><a href="link">Item</a></td></tr>
<tr><td class="menuitem"><a href="link">Item</a></td></tr>
<tr><td class="menuitem"><a href="link">Item</a></td></tr>
</table>
Any guidance would be appreciated. Please let me know if you need the CSS for the header as well; didn't want to provide more info than you needed. Thank you.
