CSS not working in Firefox, works in IE

[K West]

Hi,

I have a CSS based navigation menu.

The CSS is

   #tabsF {
      float:left;
      width:100%;
      background:#efefef;
      font-size:93%;
      line-height:normal;
	  border-bottom:1px solid #666;
      }
    #tabsF ul {
	margin:0;
	padding:10px 10px 0 50px;
	list-style:none;
      }
    #tabsF li {
      display:inline;
      margin:0;
      padding:0;
      }
    #tabsF a {
      float:left;
      background:url("tableftF.gif") no-repeat left top;
      margin:0;
      padding:0 0 0 4px;
      text-decoration:none;
      }
    #tabsF a span {
      float:left;
      display:block;
      background:url("tabrightF.gif") no-repeat right top;
      padding:5px 15px 4px 6px;
      color:#666;
      }
    /* Commented Backslash Hack hides rule from IE5-Mac \*/
    #tabsF a span {float:none;}
    /* End IE5-Mac hack */
    #tabsF a:hover span {
      color:#FFF;
      }
    #tabsF a:hover {
      background-position:0% -42px;
      }
    #tabsF a:hover span {
      background-position:100% -42px;
      }
	
 

and the html code is

   <div id="tabsF">
  <ul>
    <li><a   rel="nofollow"><span>Link 1</span></a></li>
    <li><a   rel="nofollow"><span>Link 2</span></a></li>
    <li><a   rel="nofollow"><span>Link 3</span></a></li>
    <li><a   rel="nofollow"><span>Longer Link Text</span></a></li>
    <li><a   rel="nofollow"><span>Link 5</span></a></li>
    <li><a   rel="nofollow"><span>Link 6</span></a></li>
	<li><a   rel="nofollow"><span>Link 7</span></a></li>
  </ul>
</div>
 

It works fine in IE, but not in Firefox..

Can anyone help me?

Thank You.

[Paul Clapham]

What exactly constitutes "not working" in this case?

[Eric Pascarello]

did the foum code mess up the html in the second code block?
Post that section again and check the "Disable HTML in this message" checkbox

Eric

[K West]

The background images are not coming up and the li's and not inline!!

[K West]

@ Eric
No, the code displayed is right.

[Eric Pascarello]

You need href="#" at a minimum inside your links.

Eric

[Eric Pascarello]

url(foo.gif); should not have quotes around the file name.

Eric

[K West]

I removed the quotes, it didn't help.
I tried single quote also, ('foo.gif').

[Balu Sadhasivam]

Is it background:url or background: url (space after : )

[Eric Pascarello]

I just ran your code with the changes I suggested and it is working fine for me.

Clear your cache in both IE and Firefox and check the pages again.

Eric

[K West]

No there is no space in between.

And yes my code was messed, I have the href=# tag.

The code is

<div id="tabsF">
<ul>
<li><a href="#" title="Link 1"><span>Link 1</span></a></li>
<li><a href="#" title="Link 2"><span>Link 2</span></a></li>
<li><a href="#" title="Link 3"><span>Link 3</span></a></li>
<li><a href="#" title="Longer Link Text"><span>Longer Link Text</span></a></li>
<li><a href="#" title="Link 5"><span>Link 5</span></a></li>
<li><a href="#" title="Link 6"><span>Link 6</span></a></li>
<li><a href="#" title="Link 7"><span>Link 7</span></a></li>
</ul>
</div>

[K West]

I cleared the cache, but it is still not working.
Also tried in Chrome, not working.
Can you post the code with changes, or give me a alternative link for good css horizontal navigation menus.
I am stuck.

Thank You.

[Eric Pascarello]

If nothing is showing up, sounds like you have an issue on how you are linking the CSS to the page. what does that look like?

Eric