Solved

CSS won't render in Firefox

Posted on 2008-10-19
10
964 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
  • 4
  • 2
  • 2
  • +2
10 Comments
 
LVL 30

Expert Comment

by:Steggs
Comment Utility
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
Comment Utility
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
Comment Utility
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
 
LVL 1

Expert Comment

by:eestephany
Comment Utility
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.
Comment Utility
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
IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

 
LVL 54

Expert Comment

by:b0lsc0tt
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
Great work. Thank you!
0

Featured Post

Highfive + Dolby Voice = No More Audio Complaints!

Poor audio quality is one of the top reasons people don’t use video conferencing. Get the crispest, clearest audio powered by Dolby Voice in every meeting. Highfive and Dolby Voice deliver the best video conferencing and audio experience for every meeting and every room.

Join & Write a Comment

Several part series to implement Internet Explorer 11 Enterprise Mode
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
How to create a custom search shortcut to site-search Experts Exchange using Google in the Firefox browser. This eliminates the need to type out site:experts-exchange.com whenever you want to search the site. Launch your Bookmark Menu: Press 'Ctrl +…

762 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

Need Help in Real-Time?

Connect with top rated Experts

7 Experts available now in Live!

Get 1:1 Help Now