CSS won't render in Firefox

I have the following as a header file:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<TITLE>My site</TITLE>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<META NAME="KEYWORDS" CONTENT="">
<META NAME="DESCRIPTION" CONTENT="">
<link href="media/my.css" rel="stylesheet" type="text/css" />
</head>

<body>
  <table class=mtable>
    <tr>
      <td class="topl"><a href="http://www.mysite.com"><img src="media/image.png"
      width=380 height=60 align=left alt="MySite.com" /></a></td>
      <td class=menu>
        <ul id="nav">
        <li><a href="index.shtm">Home</a></li>
        <li><a href="page2.shtm">Page 2</a></li>
        <li><a href="page3.shtm">Page 3</a></li>
        <li><a href="page4.shtm">Page 4</a></li>
        <li><a href="page5.shtm">Page 5</a></li>
        </ul>
      </td>
    </tr>
  </table>

The style sheet is below. In IE6 and Opera, it renders fine. In Firefox, everything renders fine EXCEPT the menu above; it renders like your garden variety unordered list. I've used this same system on at least a dozen other sites, and have never run into this; I have even looked at those sites tonight, and they all render.

Can someone give me an idea of what the heck is going on? Because I can't find it where the problem is... Yes, I know there are a bunch of extraneous things in the style sheet having to do with the navigation, but that's never been an issue with any other site where I haven't had nested lists.

ep
body, p, td, th, ul, h1, h2, h3, disclaim, subhead
     {font-family: "Trebuchet MS", Helvetica, Arial, sans-serif; color:#000;}
 
body
     {font-size:14px; margin-left:10px; margin-right:10px; 
     margin-top:0px; margin-bottom:0px; PADDING-BOTTOM: 10px; PADDING-RIGHT: 0px; 
     PADDING-LEFT: 0px; PADDING-TOP: 0px; text-align:left;}
 
p {text-align: left;}
 
a:link
     {color:#7e007e; text-decoration:none;}
 
a:visited
     {color:#42929c; text-decoration:none; font-weight: bold;}
 
a:hover
     {color:#00f;text-decoration:underline;}
 
h1
     {font-size:14px; font-weight:normal; line-height:15px; text-align:left;}
 
h2
     {font-size:23px; font-weight:normal; line-height:24px; text-align:left;}
 
h3
     {font-size:18px; font-weight:normal; line-height: 12px; text-align:left;}
 
IMG 
     {BORDER: 0; padding: 0; }
 
.img_l 
     {float: left; BORDER: 0 0 0 0; margin: 0 0 0 0; padding: 0 0 0 0; clear: left; }
 
.img_l img {padding: 0 10px 0 0;}
 
.img_r
     {float: right; BORDER: 0 0 0 0; margin: 0 0 0 0; padding: 0 0 0 0; clear: right;
     text-align: right;} 
 
.img_r img {padding: 0 0 0 10px;}
   
 
.disclaim
     {padding: 5px 5px 5px 5px; font-size: 10px; TEXT-ALIGN: center; width: 100%;}
 
.clearBlockElement 
     {clear: both }
 
.list
     {margin-top: 0px; margin-bottom: 4px; text-indent: 30px;}
 
table       
     {border:none; border-collapse:collapse; border-spacing:0;}
 
table.fullWidth
     {width:100%;}
 
.topl
     {VERTICAL-ALIGN: top;
     WIDTH: 380px; FONT-FAMILY: Arial, Helvetica; HEIGHT: 60px;}
 
.menu
     {width:99%; vertical-align: bottom; padding-bottom: 12px;}
 
.mtable 
     {width: 100%; height: 60px;}
 
#nav, #nav ul
     {
     padding: 0;
     margin: 0;
     list-style: none;
     line-height: 0;
     color: #42929c;
     text-decoration: none;
     background-color: #fff;
     padding: 0px;
     font: bold 11px "Trebuchet MS", Helvetica, Arial, sans-serif;
     }
 
#nav
    {
    margin-left: 10px;
    }
 
#nav li
    {
     float: left;
    }
 
#nav a
     {
     text-align: left;
     width: 70px;
     display: block;
     color: #42929c;
     text-decoration: none;
     background-color: #fff;
     padding: 3px;
     font: bold 11px "Trebuchet MS", Helvetica, Arial, sans-serif;
     }
 
#nav a:hover
     {
     color: #222222; background-color: #fff;
     }
 
#nav li li a
     {
     text-align: left;
     width: 70px;
     display: block;
     color: #42929c;
     text-decoration: none;
     background-color: #addfff;
     padding: 4px;
     font: bold 11px "Trebuchet MS", Helvetica, Arial, sans-serif;
     }
 
#nav li li a:hover
     {
     color: #222222; background-color: #addfff;
     }
 
#nav ul
     {
     position: absolute;
     left: -999em;
     width: 70px;
     }
 
#nav li:hover ul, #nav li.sfhover ul
     {
     left: auto;
     }

Open in new window

LVL 15
Eric AKA NetminderAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Mark StegglesWeb DeveloperCommented:
Hello,

Check your html code with the w3 validation service http://validator.w3.org/

I notice that you dont have all your class names in quotes ""... they should be in quotes

Steggs
0
Eric AKA NetminderAuthor Commented:
The html has been validated; and it works in Opera and IE just fine. It's only Firefox where the problem shows up.

Putting the two class names in quotes had no impact.
0
b0lsc0ttIT ManagerCommented:
What version of Firefox did you test with?  Can you provide a screenshot of the working (IE or Opera) version and the version Firefox produces?  Would not having the image be an issue if I try to reproduce this using your html and CSS?  I could not see a difference between the page in FF3 or IE7.  The menu was along the top, right of the page, except menu item 5 at first because my browser window was at 800x600.  Maximizing the window fixed that though so all menu items were in a line on the top, right of the page.
What if you change to the transitional doctype?  Does that make a difference?
bol
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

eestephanyCommented:
Hello sir :)

Well, to be honest, I just tested your code in Opera and Firefox and I've got no issues. Here's the html and css code that I used. It's the same as yours, I just deleted the stuff that didn't affect the table and list. I attached a screenshot of what it looks like to me in Firefox...

What are you seeing exactly? Can you post your entire code?
Sorry, I'm not much help.
Here's the HTML code:
 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<TITLE>My site</TITLE>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<META NAME="KEYWORDS" CONTENT="">
<META NAME="DESCRIPTION" CONTENT="">
<link href="css.css" rel="stylesheet" type="text/css" />
</head>
 
<body>
  <table class=mtable>
    <tr>
      <td class=menu>
        <ul id="nav">
        <li><a href="index.shtm">Home</a></li>
        <li><a href="page2.shtm">Page 2</a></li>
        <li><a href="page3.shtm">Page 3</a></li>
        <li><a href="page4.shtm">Page 4</a></li>
        <li><a href="page5.shtm">Page 5</a></li>
        </ul>
      </td>
    </tr>
  </table>
</body>
</html>
 
and the CSS:
@charset "UTF-8";
/* CSS Document */
 
body, td, th, ul,
     {font-family: "Trebuchet MS", Helvetica, Arial, sans-serif; color:#000;}
 
body
     {font-size:14px; margin-left:10px; margin-right:10px; 
     margin-top:0px; margin-bottom:0px; PADDING-BOTTOM: 10px; PADDING-RIGHT: 0px; 
     PADDING-LEFT: 0px; PADDING-TOP: 0px; text-align:left;}
 
a:link
     {color:#7e007e; text-decoration:none;}
 
a:visited
     {color:#42929c; text-decoration:none; font-weight: bold;}
 
a:hover
     {color:#00f;text-decoration:underline;}
 
.clearBlockElement 
     {clear: both }
 
.list
     {margin-top: 0px; margin-bottom: 4px; text-indent: 30px;}
 
table       
     {border:none; border-collapse:collapse; border-spacing:0;}
 
table.fullWidth
     {width:100%;}
 
.menu
     {width:99%; vertical-align: bottom; padding-bottom: 12px;}
 
.mtable 
     {width: 100%; height: 60px;}
 
#nav, #nav ul
     {
     padding: 0;
     margin: 0;
     list-style: none;
     line-height: 0;
     color: #42929c;
     text-decoration: none;
     background-color: #fff;
     padding: 0px;
     font: bold 11px "Trebuchet MS", Helvetica, Arial, sans-serif;
     }
 
#nav
    {
    margin-left: 10px;
    }
 
#nav li
    {
     float: left;
    }
 
#nav a
     {
     text-align: left;
     width: 70px;
     display: block;
     color: #42929c;
     text-decoration: none;
     background-color: #fff;
     padding: 3px;
     font: bold 11px "Trebuchet MS", Helvetica, Arial, sans-serif;
     }
 
#nav a:hover
     {
     color: #222222; background-color: #fff;
     }
 
#nav li li a
     {
     text-align: left;
     width: 70px;
     display: block;
     color: #42929c;
     text-decoration: none;
     background-color: #addfff;
     padding: 4px;
     font: bold 11px "Trebuchet MS", Helvetica, Arial, sans-serif;
     }
 
#nav li li a:hover
     {
     color: #222222; background-color: #addfff;
     }
 
#nav ul
     {
     position: absolute;
     left: -999em;
     width: 70px;
     }
 
#nav li:hover ul, #nav li.sfhover ul
     {
     left: auto;
     }

Open in new window

fireFox8Snapshot.jpg
0
David S.Commented:
You do have one  CSS error in your stylesheet twice: "BORDER: 0 0 0 0;" should be "border-width: 0 0 0 0;" or even better "border: 0 none;".

Also it's best to avoid using tables for layout: http://www.hotdesign.com/seybold/index.html

When I view the page locally it works fine in Firefox. Perhaps there's a problem with the .css file itself. Or it might be that your server isn't sending the correct mime-type for it.
0
b0lsc0ttIT ManagerCommented:
Ah ... looks like Kravimir beat me.  The two places with the CSS error will hopefully be it but since we didn't see the same issue let us know if there still is some problem.
bol
0
Eric AKA NetminderAuthor Commented:
www.cityofangels.com

In the image below, you'll see all three browsers; the ONLY part that seems affected is the menu. Everything else works fine.

Kravimir,

I'll make the changes... thank you... but they had no effect on this issue.

ep
COA.jpg
0
David S.Commented:
Ahah!  There was another error in your stylesheet -- part you didn't post here. Look closely at it. Do you see it?

.ind

     (text-indent: 30px;}

Anyway the problem is that "(" should be "{". Errors like that cause Firefox to ignore the next rule in the stylesheet.

Another possible issue is this:

.cutline

/* This part controls the default spacing and padding on the ul elements (the top level one, and the one that contains the nested lists.) It also removes the default bullets. */

#nav, #nav ul


Do you really want ".cutline" there?

I suggest you read Tips on Debugging Layouts: http://www.dynamicsitesolutions.com/css/debugging-layouts/

0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Eric AKA NetminderAuthor Commented:
Kravimir,

Nice work -- it was the .cutline, without the { or } that did the trick. Curiously, the problem with the text-indent had no apparent effect, positively or negatively, on any of the places where it was used.

Thanks!!

ep
0
Eric AKA NetminderAuthor Commented:
Great work. Thank you!
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.