I have used an image to best describe the problem. Though tinypic resizes so there is some quality loss you can still see the difference. It's almost as if it's bolded, but appears to actually be overlapping two sets of text. Again this issue is only with Firefox/Chrome. Is it possible some -webkit code is causing this? I use it for rounded corners and transparency on my site. I'm completely lost to what could be the problem here, so any help is much appreciated.

http://i46.tinypic.com/2uzccqq.jpg

Neither Firefox nor Chrome will pay any attention to -webkit code, which will only be read by webkit-based browsers.

Ok, so then I guess its -moz code that they do read. What could possibly be giving me a problem with those two browsers, and none with all others? It's the same @font-face css...Any tools you could recommend to help me figure it out? I use firebug to debug and no errors appear in the console. I don't even really know where to start with something like this.

**EDIT**

I hadn't checked all of the error filters. Here is what has come up...

Expected color but found '#0'. Error in parsing value for 'background-color'. Declaration dropped.
[IMG]chrome://firebug/content/blank.gif[/IMG] background-color: #0; stylesheet.css (line 1006)

Error in parsing value for 'width'. Declaration dropped.
[IMG]chrome://firebug/content/blank.gif[/IMG]width:780x; minstyle.css (line 50)


Unknown property 'behavior'. Declaration dropped.
[IMG]chrome://firebug/content/blank.gif[/IMG].ie6_png {behavior: url("iepngfix.htc") } goldmonger.net (line 16)


Unknown property 'behavior'. Declaration dropped.
[IMG]chrome://firebug/content/blank.gif[/IMG].ie6_png img {behavior: url("iepngfix.htc") } goldmonger.net (line 17)


Unknown property 'behavior'. Declaration dropped.
[IMG]chrome://firebug/content/blank.gif[/IMG].ie6_png input {behavior: url("iepngfix.htc") } goldmonger.net (line 18)


Error in parsing value for 'width'. Declaration dropped.
[IMG]chrome://firebug/content/blank.gif[/IMG]

Error in parsing value for 'width'. Declaration dropped.
[IMG]chrome://firebug/content/blank.gif[/IMG]

Expected ':' but found 'undefined'. Declaration dropped.
[IMG]chrome://firebug/content/blank.gif[/IMG]

goldmonger.net : potentially vulnerable to CVE-2009-3555
Unknown property 'behavior'. Declaration dropped.
[IMG]chrome://firebug/content/blank.gif[/IMG].ie6_png {behavior: url("js/iepngfix.htc") } goldmonger.net (line 2470)


Unknown property 'behavior'. Declaration dropped.
[IMG]chrome://firebug/content/blank.gif[/IMG].ie6_png img {behavior: url("js/iepngfix.htc") } goldmonger.net (line 2471)


Unknown property 'behavior'. Declaration dropped.
[IMG]chrome://firebug/content/blank.gif[/IMG].ie6_png input {behavior: url("js/iepngfix.htc") } goldmonger.net (line 2472)


goldmonger.net : potentially vulnerable to CVE-2009-3555
goldmonger.net : potentially vulnerable to CVE-2009-3555
goldmonger.net : potentially vulnerable to CVE-2009-3555
Unknown property '-moz-opacity'. Declaration dropped.
[IMG]chrome://firebug/content/blank.gif[/IMG]#lz_chat_file_base{position:absolute;t...ransform. Microsoft.Alpha(opacity=0);} style....3280241 (line 38)


Error in parsing value for 'filter'. Declaration dropped.
[IMG]chrome://firebug/content/blank.gif[/IMG]#lz_chat_file_base{position:absolute;t...ransform. Microsoft.Alpha(opacity=0);} style....3280241 (line 38)

But none of these should have anything to do with @font-face....

You DO realize that @font-face is not yet fully supported.
Only firefox will understand -moz properties, chrome will not.

background-color: #0

#0 is not a proper coding, if you want black, it needs to be #000 or #000000, the 1st being shorthand and sufficient.

width:780x

"x" is not a proper unit, should be 780px.

Yes, I do realize that it's not fully supported. However it worked perfectly fine up until a few days ago in all browsers. I reverted back to an old stylesheet but it didn't resolve the problem. I haven't even changed anything dramatically so that's why I'm lost to as what happened. I have been fixing the errors, and the issue still exists unfortunately...

Well.. no one can help you from an image. A URL to the problem page would be preferable.

The address is goldmonger[dot]net. Note: If you hover over the navigation buttons, the font returns to normal. Also if you highlight the headings, however in the scrolling text box it does not.

The font in Firefox looks the same to me whether I hover over the menu or not.

I think you should fix the errors first:

line 57 column 21 - Warning: discarding unexpected </td>
line 111 column 1 - Warning: missing </ul> before </div>
line 157 column 5 - Warning: missing </span> before <div>
line 158 column 1 - Warning: inserting implicit <span>
line 158 column 1 - Warning: missing </span> before <ul>
line 159 column 1 - Warning: inserting implicit <span>
line 159 column 5 - Warning: missing </span> before <table>
line 159 column 1 - Warning: missing </span> before <table>
line 1943 column 1 - Warning: discarding unexpected </span>
line 158 column 1 - Warning: missing </ul> before </div>
line 1946 column 1 - Warning: discarding unexpected </span>
line 156 column 1 - Warning: missing </ul> before </div>
line 1953 column 1 - Warning: missing </ul> before </div>
line 1959 column 5 - Warning: missing </span> before <div>
line 1960 column 1 - Warning: inserting implicit <span>
line 1960 column 1 - Warning: missing </span> before <ul>
line 1961 column 1 - Warning: inserting implicit <span>

Where are you pulling those errors from? I'm still learning the ropes of coding, in general. I know a little CSS, PHP & HTML and that's the extent of it.

I have a Firefox extension called HTML Tidy that shows me all the errors. I highly recommend it along with Firebug.