Welcome to WebmasterWorld Guest from 54.144.39.30

Forum Moderators: not2easy

Message Too Old, No Replies

Problem with table in Firefox

Text displays in IE, not all in Firefox

     
7:03 pm on Sep 4, 2011 (gmt 0)

Junior Member

5+ Year Member

joined:Jan 16, 2009
posts: 56
votes: 3


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.
7:35 pm on Sept 4, 2011 (gmt 0)

Senior Member

WebmasterWorld Senior Member penders is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:July 3, 2006
posts: 3123
votes: 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 { ...


?
8:50 pm on Sept 4, 2011 (gmt 0)

Junior Member

5+ Year Member

joined:Jan 16, 2009
posts: 56
votes: 3


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!