IE. FF Css menu

[LloydFarrell]

HI all, I am teaching myself web design and I am only just getting round to the whole FF / IE css issues.

I have a menu system that works great in IE / but not FF

and I was hoping someone could point me in the right direction as to how to fix the problem.

css code for menu system

<style type="text/css">

#tabs {
	float:right;
	width:100%;
	font-size:93%;
	line-height:normal;
	border-bottom:1px solid #666;
	margin-bottom:1em; /*margin between menu and rest of page*/
	overflow:hidden;
	}

#tabs ul {
	margin:0;
	padding:10px 10px 0 0px;
	list-style:none;
	
	}

#tabs li {
	display:inline;
	margin:0;
	padding:0;
	}

#tabs a {
	float:right;
	background:url(http://localhost/www.si.com/members/images/left.png) no-repeat left top;
	margin:0;
	padding:0 0 0 6px;
	text-decoration:none;
	}

#tabs a span {
	float:right;
	display:block;
	background:url(../images/right.png) no-repeat right top;
	padding:6px 15px 4px 6px;
	margin-right:2px;
	color:#FFF;
	}

/* Commented Backslash Hack hides rule from IE5-Mac \*/
#tabs a span {float:none;}

/* End IE5-Mac hack */
#tabs a:hover span {
	}

#tabs a:hover {
	background-position:0% -42px;
	}

#tabs a:hover span {
	background-position:100% -42px;
	}

</style>

************Here is the menu*******************

<div align="center"><table height="54" width="975px" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td align="left" valign="bottom"class="header"><font color="#2a4c79" face="Verdana, Arial, Helvetica, sans-serif" size="3">&nbsp;&nbsp;&nbsp;<b></b></font></td>
    <td align="right" valign="bottom"><div id="tabs">
  <ul>
    <li></li>
    <li><a href="#"><span>menu1</span></a></li>
    <li><a href="#"><span>menu2</span></a></li>
    <li><a href="#"><span>menu3</span></a></li>
    <li><a href="#"><span>menu4</span></a></li>
    <li><a href="#"><span>menu5</span></a></li>
    <li><a href="#"><span>menu5</span></a></li>
  </ul></div></td>
  </tr>
</table>
</div>

When i view the menu in IE, all is great, but when viewing in FF, i get "DOTS" - like its showing me its a list order ? but Im wracking me brains on how to remove the "DOTS"

I have included both images as a preview to the problem,

[colweb]

Had to improvise with the images, but all looks well in Firefox 3.0.19 under Linux. Get the menu items at the top (left to right) with a line under it. No dots.
What is the version of Firefox (and OS) where you got this strange result?

[LloydFarrell]

@colweb -

Im running \ testing on FF version 3.6.3 and windows xp pro -

Im sooo confused as to why this is happening, Any ideas ?

[colweb]

@colweb -

Im running \ testing on FF version 3.6.3 and windows xp pro -

Im sooo confused as to why this is happening, Any ideas ?

I have combined the code you posted, started a win-xp machine (xp-pro with service pack 1) and updated Firefox to 3.6.3. The result is the same as with Firefox under Linux. No dots, all menu items at the top of the screen. In the zip file you see test.html, left.png (had to be creative) and the result in Firefox (image1.png).

Must have something to do with the Firefox you are using. Any add-ons installed that could be in the way? Have you tried deleting and reinstalling Firefox or maybe even better, opened the page on Firefox on another machine?

[drjohn]

I'd guess that your css file got lost on the way to your browser, or got corrupted in some way (and then the corrupted version got cached and keeps getting used on your local machine).

you have the correct code to get rid of the list's dot - list-style:none; - so try Ctrl-F5 for a forced refresh and see if that solves it for you.

A quick link to your site would save people having to create pages to test your code.

[LloydFarrell]

@Colweb & @DrJohn -

I have uninstalled and reinstalled FF to 3.6.3 but for some strange reason im still getting the full stop (dots),

Im glad to hear that the code is right, The only thing i may have left out is that the page is .php and not .html - and a localhost web server

I know the location to the css file is working, I just dont know what the problem is or how to solve it.

I have not tried a different connection as yet, but I will once I get the time,

Many thanks for your input and effort in trying to solve this minor, but very annoying FF issue,

regards
Lloyd

[LloydFarrell]

@colweb,

I have just tried your test.html and it works fine, from test.html, thats brilliant, Im thinking there is something wrong or something other in my style sheet.

Im going to test by creating a seperate css style and I will come back with the results,

Confused but determined -

Many thanks again,

[LloydFarrell]

Hmmmmm, ok its now working great -

The only way I see this working is to include the css in the document,

Gents brilliant, couldnt of done this with out you -

Now, how to remove the line ????

[drjohn]

If there is an error somewhere in your code, then different browsers' error correction features can lead to different results.

That's why a live page to examine is so much better than snippets of code. No need for us to re-create a page to test something, just use Web Developer Toolbar in FF on the real code and experiment to sort it. No dozens of html files all called test to clutter up the hard disk either.