Welcome to WebmasterWorld Guest from 54.167.76.176

Forum Moderators: not2easy

Message Too Old, No Replies

Problem with table in Firefox

Text displays in IE, not all in Firefox

     

TheKG

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

5+ Year Member



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

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

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



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

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

5+ Year Member



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!
 

Featured Threads

Hot Threads This Week

Hot Threads This Month