Go Premium for a chance to win a PS4. Enter to Win

x
?
Solved

CSS won't render in Firefox

Posted on 2008-10-19
10
Medium Priority
?
1,014 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:Eric AKA Netminder
  • 4
  • 2
  • 2
  • +2
10 Comments
 
LVL 30

Expert Comment

by:Mark Steggles
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:Eric AKA Netminder
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
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 
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 43

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:Eric AKA Netminder
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 43

Accepted Solution

by:
David S. earned 2000 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:Eric AKA Netminder
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:Eric AKA Netminder
ID: 31507716
Great work. Thank you!
0

Featured Post

Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say 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

JavaScript has plenty of pieces of code people often just copy/paste from somewhere but never quite fully understand. Self-Executing functions are just one good example that I'll try to demystify here.
The first step to building an amazing About page is to figure out what you want the page to say about your company. You then must grab the attention of the reader, boast a bit, tell a story and let others brag about you. With a little bit of thought…
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.
Suggested Courses

783 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