Forum Moderators: not2easy

Message Too Old, No Replies

Weird @font-face issue with overlapping text. I'm stumped!

Firefox/Chrome overlap the text twice it seems. IE/Safari do not.

         

christianbright

4:19 pm on Jun 13, 2010 (gmt 0)

10+ Year Member



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.

[edited by: jatar_k at 1:19 pm (utc) on Jun 15, 2010]

christianbright

6:52 pm on Jun 13, 2010 (gmt 0)

10+ Year Member



I ran firebug debugger and have these errors/warnings. But none of these should have anything to do with @font-face...

Expected color but found '#0'. Error in parsing value for 'background-color'. Declaration dropped.
[Break on this error] background-color: #0;
stylesheet.css (line 1006)
Error in parsing value for 'width'. Declaration dropped.
[Break on this error] width:780x;
minstyle.css (line 50)
Unknown property 'behavior'. Declaration dropped.
[Break on this error] .ie6_png {behavior: url("iepngfix.htc") }
example.net (line 16)
Unknown property 'behavior'. Declaration dropped.
[Break on this error] .ie6_png img {behavior: url("iepngfix.htc") }
example.net (line 17)
Unknown property 'behavior'. Declaration dropped.
[Break on this error] .ie6_png input {behavior: url("iepngfix.htc") }
example.net (line 18)
Error in parsing value for 'width'. Declaration dropped.
[Break on this error]
Error in parsing value for 'width'. Declaration dropped.
[Break on this error]
Expected ':' but found 'undefined'. Declaration dropped.
[Break on this error]
example.net : potentially vulnerable to CVE-2009-3555
Unknown property 'behavior'. Declaration dropped.
[Break on this error] .ie6_png {behavior: url("js/iepngfix.htc") }
example.net (line 2470)
Unknown property 'behavior'. Declaration dropped.
[Break on this error] .ie6_png img {behavior: url("js/iepngfix.htc") }
example.net (line 2471)
Unknown property 'behavior'. Declaration dropped.
[Break on this error] .ie6_png input {behavior: url("js/iepngfix.htc") }
example.net (line 2472)
example.net : potentially vulnerable to CVE-2009-3555
example.net : potentially vulnerable to CVE-2009-3555
example.net : potentially vulnerable to CVE-2009-3555
Unknown property '-moz-opacity'. Declaration dropped.
[Break on this error] #lz_chat_file_base{position:absolute;t...ransform.Microsoft.Alpha(opacity=0);}
style....3280241 (line 38)
Error in parsing value for 'filter'. Declaration dropped.
[Break on this error] #lz_chat_file_base{position:absolute;t...ransform.Microsoft.Alpha(opacity=0);}
style....3280241 (line 38)

[edited by: jatar_k at 1:20 pm (utc) on Jun 15, 2010]
[edit reason] no urls thanks [/edit]

alt131

10:20 am on Jun 16, 2010 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Hi christianbright and welcome to WebmasterWorld ;),

I ran firebug debugger and have these errors/warnings. But none of these should have anything to do with @font-face...
Best to resolve general code errors before trying to solve a specific issue: Those width errors may be affecting the way elements are being laid out - and so the "overlap" issue, and missing colons will affect how browsers interpret later code.

Validate the html and css [validator.w3.org] and if that doesn't resolve the font issue, post back some sample css.