| Problem with table in Firefox
Text displays in IE, not all in Firefox |
TheKG
msg:4358561 | 7:03 pm on Sep 4, 2011 (gmt 0) |
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.
|
penders
msg:4358571 | 7:35 pm on Sep 4, 2011 (gmt 0) |
Does your page validate...? You do set the .menubar text to white, so it is logical that some of the text is white (a suitable background-color should be set in case the background-image does not show), but providing all tags are closed then I guess this should be OK.
Just glancing over your CSS, it looks like these two rules:
.menuitem a:link,a:visited { ...
.menuitem a:hover,a:active { ... |
|
Should really be...
.menuitem a:link, .menuitem a:visited { ...
.menuitem a:hover, .menuitem a:active { ... |
|
?
|
TheKG
msg:4358591 | 8:50 pm on Sep 4, 2011 (gmt 0) |
penders...thank you so much! Such a simple error on my part to leave out the .menuitem in part of the code. Changed it as you suggested and it works perfectly! You folks rock!
|
|
|
