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?
 
David S.Connect With a Mentor 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
 
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
Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

 
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
 
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
 
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
All Courses

From novice to tech pro — start learning today.