homepage Welcome to WebmasterWorld Guest from 54.166.105.24
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Visit PubCon.com
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
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!

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved