Solved

CSS won't render in Firefox

Posted on 2008-10-19
10
980 Views
Last Modified: 2012-05-05
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

0
Comment
Question by:ericpete
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 4
  • 2
  • 2
  • +2
10 Comments
 
LVL 30

Expert Comment

by:Steggs
ID: 22756004
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
 
LVL 15

Author Comment

by:ericpete
ID: 22759089
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
 
LVL 54

Expert Comment

by:b0lsc0tt
ID: 22759927
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
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 1

Expert Comment

by:eestephany
ID: 22759931
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
 
LVL 42

Expert Comment

by:David S.
ID: 22759979
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
 
LVL 54

Expert Comment

by:b0lsc0tt
ID: 22760358
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
 
LVL 15

Author Comment

by:ericpete
ID: 22760618
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
 
LVL 42

Accepted Solution

by:
David S. earned 500 total points
ID: 22761252
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
 
LVL 15

Author Comment

by:ericpete
ID: 22761407
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
 
LVL 15

Author Closing Comment

by:ericpete
ID: 31507716
Great work. Thank you!
0

Featured Post

Free Tool: Postgres Monitoring System

A PHP and Perl based system to collect and display usage statistics from PostgreSQL databases.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
Wordpress themes CSS? 6 30
alert on input text 2 24
Curious Trouble with and Inability to Access a Single Site 24 46
CSS Won't Show Up On Drupal Omega Sub-Theme 1 11
Preface This is the third article about the EE Collaborative Login Project. A Better Website Login System (http://www.experts-exchange.com/A_2902.html) introduces the Login System and shows how to implement a login page. The EE Collaborative Logi…
I annotated my article on ransomware somewhat extensively, but I keep adding new references and wanted to put a link to the reference library.  Despite all the reference tools I have on hand, it was not easy to find a way to do this easily. I finall…
The viewer will learn how to count occurrences of each item in an array.
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.

749 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question