Solved

font-family works in IE but not Mozilla

Posted on 2004-09-14
27
2,037 Views
Last Modified: 2013-12-03
Hello,

I have the following code on a page:
<p style="font-family:wingdings;font-size:32px;font-weight:bold">J</p>

In IE6 this apears the way I would like it to as a "happy face" but in Mozilla or FireFox I just see a capital 'J'.

Any ideas on how to make this work for all browsers?
0
Comment
Question by:Sasho
  • 12
  • 8
  • 6
  • +1
27 Comments
 
LVL 11

Expert Comment

by:neester
ID: 12060609
http://hutchinson.belmont.ma.us/tth/Wfonts.html
^ that will explain your problems a little.
and show you a dodgy solution.

I would just say, use a picture instead.
0
 
LVL 11

Expert Comment

by:neester
ID: 12060610
0
 
LVL 11

Expert Comment

by:neester
ID: 12060612
It basically says:
Symbol Fonts are by default - disabled in moz
0
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 3

Author Comment

by:Sasho
ID: 12060689
I tried the proposed solution but that did not seem to make a difference.

I tried changing the fontEncoding.properties files for both Mozilla and Firefox with zero success.

Any other suggestions other than using an image?
0
 
LVL 11

Accepted Solution

by:
neester earned 125 total points
ID: 12060873
Sasho,
I didnt test what i read.
But it does seem that Mozilla, and all gecko based browsers (as far as i know) have symbol fonts disabled by default.
I am not sure why, but that seems to be the case.

The only other solution would be to make it into a flash clip, which would allow you to use the font, and would also keep the embed very small...

Image replacement seems the only way to go though.
Sorry to say :(

Wait and see, maybe someone else can help out.
but from what i read it seems very unlikely.


Cheers
0
 
LVL 3

Author Comment

by:Sasho
ID: 12060902
I am trying to figure out how to get unicode characters to work with CSS.

I can use this:
<p style="font-size:50px;font-weight:bold">&#x263A;</p>

And it works fine in IE and Mozilla but IE brakes as soon as I add this line to the header:
<link rel="stylesheet" href="styles.css" type="text/css">

0
 
LVL 11

Expert Comment

by:neester
ID: 12060946
Weird...?
Well I am not too sure.
Sorry this is the limit of my understanding here.

Its not CSS anymore :S
So i am a little lost beyond here
0
 
LVL 18

Expert Comment

by:Eternal_Student
ID: 12062444
works fine for me ?

Can i see your code or can u upload it some-where ?
0
 
LVL 31

Expert Comment

by:seanpowell
ID: 12064388
Sasho - your unicode representation is correct (actually the only way if you don't want graphics), but using an external CSS should have no effect on the specific rendering. I'm afraid I'm unable to duplicate your error here...

Sean
0
 
LVL 3

Author Comment

by:Sasho
ID: 12065797
I'll post my CSS stylesheet, perhaps there is an error in it somwhere.
0
 
LVL 31

Expert Comment

by:seanpowell
ID: 12065924
Failing that, you could always try removing the doctype :-)
0
 
LVL 3

Author Comment

by:Sasho
ID: 12065935
That's funny Seanpowell. I tried that, but it made no difference :)
0
 
LVL 3

Author Comment

by:Sasho
ID: 12069379
Here is the html I am using:

**********************************************************************************
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" href="phpBB2/templates/subSilver/subSilver.css" type="text/css">
<title>Test2</title>
</head>
<body>
<p style="font-size:50px;font-weight:bold">&#x263A;</p>
</body>
</html>
**********************************************************************************

Here are the contents of subSilver.css
**********************************************************************************
 /* General page style. The scroll bar colours only visible in IE5.5+ */
body {
      background-color: #E5E5E5;
      scrollbar-face-color: #DEE3E7;
      scrollbar-highlight-color: #FFFFFF;
      scrollbar-shadow-color: #DEE3E7;
      scrollbar-3dlight-color: #D1D7DC;
      scrollbar-arrow-color:  #006699;
      scrollbar-track-color: #EFEFEF;
      scrollbar-darkshadow-color: #98AAB1;
}

#layer1{
postition: absolute;
top: 50px;
left: 50px;
width: 100px;
height: 100px;
z-index: 2;
}


/* General font families for common tags */
font,th,td,p { font-family: Verdana, Arial, Helvetica, sans-serif;font-size: 10px }
a:link,a:active,a:visited { color : #006699; }
a:hover            { text-decoration: underline; color : #DD6900; }
hr      { height: 0px; border: solid #D1D7DC 0px; border-top-width: 1px;}


/* This is the border line & background colour round the entire page */
.bodyline      { background-color: #FFFFFF; border: 1px #98AAB1 solid; }

/* This is the outline round the main forum tables */
.forumline      { background-color: #FFFFFF; border: 2px #006699 solid; }


/* Main table cell colours and backgrounds */
td.row1      { background-color: #EFEFEF; }
td.row2      { background-color: #DEE3E7; }
td.row3      { background-color: #D1D7DC; }


/*
  This is for the table cell above the Topics, Post & Last posts on the index.php page
  By default this is the fading out gradiated silver background.
  However, you could replace this with a bitmap specific for each forum
*/
td.rowpic {
            background-color: #FFFFFF;
            background-image: url(images/cellpic2.jpg);
            background-repeat: repeat-y;
}

      td.Critical {color: black;background-color: #FF0000;text-align: center;}
      td.CriticalLeft {color: black;background-color: #FF0000;text-align: left;}
      td.High {color: black;background-color: #FA8072;text-align: center;}
      td.HighLeft {color: black;background-color: #FA8072;text-align: left;}
      td.Medium {color: black;background-color: #FFD700;text-align: center;}
      td.MediumLeft {color: black;background-color: #FFD700;text-align: left;}
      td.Low {color: black;background-color: #ADFF2F;text-align: center;}
      td.LowLeft {color: black;background-color: #ADFF2F;text-align: left;}
      td.Assigned {color: black;background-color: #99ff99;text-align: center;}
      td.AssignedLeft {color: black;background-color: #99ff99;text-align: left;}
      td.Closed {color: black;background-color: #99ff99;text-align: center;}
      td.ClosedLeft {color: black;background-color: #99ff99;text-align: left;}
      td.Open {color: black;background-color: #FFCC99;text-align: center;}
      td.OpenLeft {color: black;background-color: #FFCC99;text-align: left;}
      td.Pending {color: black;background-color: #66CCFF;text-align: center;}
      td.PendingLeft {color: black;background-color: #66CCFF;text-align: left;}
      td.Passed,td.Running {color: black;background-color: lawngreen;text-align: center;}
      td.RunningLeft {color: black;text-align: left;background-color: lawngreen;}
      td.Idle {color: black;background-color: lightblue;text-align: center;}
      td.IdleLeft {color: black;text-align: left;background-color: lightblue;}
      td.Failed,td.Disabled {color: black;background-color: orangered;text-align: center;}
      td.FailedLeft,td.DisabledLeft {color: black;background-color: orangered;text-align: left;}
      td.Overdue{color: black;background-color: orange;text-align: center;}
      td.Indicators{color: blue;font-size:12px;font-weight: 650;background-color: lightblue;font-family: Courier}      

/* Header cells - the blue and silver gradient backgrounds */
th      {
      color: #FFC086; font-size: 11px; font-weight : bold;
      background-color: #006699; height: 25px;
      background-image: url(images/cellpic3.gif);
}

td.cat,td.catHead,td.catSides,td.catLeft,td.catRight,td.catBottom {
                  background-image: url(images/cellpic1.gif);
                  background-color:#D1D7DC; border: #FFFFFF; border-style: solid; height: 28px;
}


/*
  Setting additional nice inner borders for the main table cells.
  The names indicate which sides the border will be on.
  Don't worry if you don't understand this, just ignore it :-)
*/
td.cat,td.catHead,td.catBottom {
      height: 29px;
      border-width: 0px 0px 0px 0px;
}
th.thHead,th.thSides,th.thTop,th.thLeft,th.thRight,th.thBottom,th.thCornerL,th.thCornerR {
      font-weight: bold; border: #FFFFFF; border-style: solid; height: 28px; }
td.row3Right,td.spaceRow {
      background-color: #D1D7DC; border: #FFFFFF; border-style: solid; }

th.thHead,td.catHead { font-size: 12px; border-width: 1px 1px 0px 1px; }
th.thSides,td.catSides,td.spaceRow       { border-width: 0px 1px 0px 1px; }
th.thRight,td.catRight,td.row3Right       { border-width: 0px 1px 0px 0px; }
th.thLeft,td.catLeft        { border-width: 0px 0px 0px 1px; }
th.thBottom,td.catBottom  { border-width: 0px 1px 1px 1px; }
th.thTop       { border-width: 1px 0px 0px 0px; }
th.thCornerL { border-width: 1px 0px 0px 1px; }
th.thCornerR { border-width: 1px 1px 0px 0px; }


/* The largest text used in the index page title and toptic title etc. */
.maintitle,h1,h2      {
                  font-weight: bold; font-size: 22px; font-family: "Trebuchet MS",Verdana, Arial, Helvetica, sans-serif;
                  text-decoration: none; line-height : 120%; color : #000000;
}


/* General text */
.gen { font-size : 12px; }
.genmed { font-size : 11px; }
.gensmall { font-size : 10px; }
.gen,.genmed,.gensmall { color : #000000; }
a.gen,a.genmed,a.gensmall { color: #006699; text-decoration: none; }
a.gen:hover,a.genmed:hover,a.gensmall:hover      { color: #DD6900; text-decoration: underline; }


/* The register, login, search etc links at the top of the page */
.mainmenu            { font-size : 11px; color : #000000 }
a.mainmenu            { text-decoration: none; color : #006699;  }
a.mainmenu:hover{ text-decoration: underline; color : #DD6900; }

/* Forum category titles */
.cattitle            { font-weight: bold; font-size: 12px ; letter-spacing: 1px; color : #006699}
a.cattitle            { text-decoration: none; color : #006699; }
a.cattitle:hover{ text-decoration: underline; }


/* Forum title: Text and link to the forums used in: index.php */
.forumlink            { font-weight: bold; font-size: 12px; color : #006699; }
a.forumlink       { text-decoration: none; color : #006699; }
a.forumlink:hover{ text-decoration: underline; color : #DD6900; }


/* Used for the navigation text, (Page 1,2,3 etc) and the navigation bar when in a forum */
.nav                  { font-weight: bold; font-size: 11px; color : #000000;}
a.nav                  { text-decoration: none; color : #006699; }
a.nav:hover            { text-decoration: underline; }


/* titles for the topics: could specify viewed link colour too */
.topictitle                  { font-weight: bold; font-size: 11px; color : #000000; }
a.topictitle:link   { text-decoration: none; color : #006699; }
a.topictitle:visited { text-decoration: none; color : #5493B4; }
a.topictitle:hover      { text-decoration: underline; color : #DD6900; }

/* Non PHPBB@ Links*/
.SV                  { font-weight: bold; font-size: 11px; color : #000000; }
a.SV:link   { text-decoration: none; color : #000000; }
a.SV:visited { text-decoration: none; color : #000000; }
a.SV:hover      { text-decoration: underline;}
a.SV:active      { text-decoration: underline;}

.Enable                  { color : #000000; }
a.Enable:link   { text-decoration: none; color : #000000; }
a.Enable:visited { text-decoration: none; color : #000000; }
a.Enable:hover      { text-decoration: none;}
a.Enable:active      { text-decoration: none;}

/* Non PHPBB@ Links*/
.Sort            { font-weight: bold; font-size: 12px; color : #FFC086; }
a.Sort:link   { text-decoration: underline; color : #FFC086; }
a.Sort:visited { text-decoration: underline; color : #FFC086; }
/*a.Sort:hover      { text-decoration: underline;color : #FFC086;}
a.Sort:active      { text-decoration: underline;color : #FFC086;} */


/* Name of poster in viewmsg.php and viewtopic.php and other places */
.name                  { font-size : 11px; color : #000000;}

/* Location, number of posts, post date etc */
.postdetails            { font-size : 10px; color : #000000; }


/* The content of the posts (body of text) */
.postbody { font-size : 12px;}
a.postlink:link      { text-decoration: none; color : #006699 }
a.postlink:visited { text-decoration: none; color : #5493B4; }
a.postlink:hover { text-decoration: underline; color : #DD6900}


/* Quote & Code blocks */
.code {
      font-family: Courier, 'Courier New', sans-serif; font-size: 11px; color: #006600;
      background-color: #FAFAFA; border: #D1D7DC; border-style: solid;
      border-left-width: 1px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px
}

.quote {
      font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px; color: #444444; line-height: 125%;
      background-color: #FAFAFA; border: #D1D7DC; border-style: solid;
      border-left-width: 1px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px
}


/* Copyright and bottom info */
.copyright            { font-size: 10px; font-family: Verdana, Arial, Helvetica, sans-serif; color: #444444; letter-spacing: -1px;}
a.copyright            { color: #444444; text-decoration: none;}
a.copyright:hover { color: #000000; text-decoration: underline;}


/* Form elements */
input,textarea, select {
      color : #000000;
      font: normal 11px Verdana, Arial, Helvetica, sans-serif;
      border-color : #000000;
}

/* The text input fields background colour */
input.post, textarea.post, select {
      background-color : #FFFFFF;
}


      textarea.Running{color: black;       background-color: lawngreen;border:0px;}
      textarea.Idle{color: black;background-color: lightblue;border:0px;}
      textarea.Disabled{color: black;background-color: orangered;border:0px;}
      textarea.Overdue{color: black;background-color: orange;border:0px;}
      textarea.Open {color: black;background-color: #FFCC99;border:0px;}
input { text-indent : 2px; }

/* The buttons used for bbCode styling in message post */
input.button {
      background-color : #EFEFEF;
      color : #000000;
      font-size: 11px; font-family: Verdana, Arial, Helvetica, sans-serif;
}

/* The main submit button option */
input.mainoption {
      background-color : #FAFAFA;
      font-weight : bold;
}

/* None-bold submit button */
input.liteoption {
      background-color : #FAFAFA;
      font-weight : normal;
}

/* This is the line in the posting page which shows the rollover
  help line. This is actually a text box, but if set to be the same
  colour as the background no one will know ;)
*/
.helpline { background-color: #DEE3E7; border-style: none; }



/* Import the fancy styles for IE only (NS4.x doesn't use the @import function) */
@import url("formIE.css");
**********************************************************************************
0
 
LVL 31

Expert Comment

by:seanpowell
ID: 12069428
Okay - you're just overriding it by using a specific font in the p tag.

So, like this:

p.smiley { font-family: sans-serif; font-size: 10px }

<p class="smiley" style="font-size:50px;font-weight:bold">&#x263A;</p>

0
 
LVL 3

Author Comment

by:Sasho
ID: 12069465
A few questions:
Unicode is the same as sans-serif?
Inline declared style attributes get appended to whatever is already in the syle sheet? There is no way to override this behaviour?
0
 
LVL 3

Author Comment

by:Sasho
ID: 12069479
Hmm it looks like you are saying the inline appends and ovverides...
0
 
LVL 3

Author Comment

by:Sasho
ID: 12069598
Hmmm...it looks like the solution works for the &#x2639; character but when I try others IE just makes them boxes. Here is what the HTML looks like

In the CSS stylesheet I have the following line:
p.unicode { font-family: sans-serif; font-size: 10px }


Here is what the HTML looks like
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" href="phpBB2/templates/subSilver/subSilver.css" type="text/css">
<title>Test2</title>
</head>
<body>
<p class="unicode" style="font-size:40px;font-weight:bold">&#x263A;</p>
<p class="unicode" style="font-size:40px;font-weight:bold">&#x2622;</p>
<p class="unicode" style="font-size:40px;font-weight:bold">&#x2620;</p>
<p class="unicode" style="font-size:40px;font-weight:bold">&#x2639;</p>
</body>
</html>
0
 
LVL 31

Expert Comment

by:seanpowell
ID: 12069616
sans-serif is generic, so it won't override the unicde character by specifying a font.
&#x263A; doesn't exist in Verdana, which is why you were seeing a square box.

Inline will usually override something set in an external css, based on specificity. The "cascade" part of Cascading Style Sheets really means exactly that: anything more specific will override anything less specific.

In this case, inline is further down the tree, and so takes precedence...

Sean
0
 
LVL 31

Expert Comment

by:seanpowell
ID: 12069728
Sorry - missed your comment.

You can't represent those in unicode, here's a chart that covers what is viable:
http://www.theorem.ca/~mvcorks/cgi-bin/unicode.pl.cgi?start=2600&end=26FF

and which font-families support which unicode variations:
http://www.friedels-home.com/index.htm?/Unicode/codetable044.htm
0
 
LVL 3

Author Comment

by:Sasho
ID: 12070066
When I go to this link: http://www.theorem.ca/~mvcorks/cgi-bin/unicode.pl.cgi?start=2600&end=26FF most of the characters are just a box in IE. With mozilla I see all the different characters.

The same is true with the second link( http://www.friedels-home.com/index.htm?/Unicode/codetable044.htm ) most rows are full of boxes when I look at it with IE.




0
 
LVL 31

Expert Comment

by:seanpowell
ID: 12070315
Your mozilla must be different. None of those characters render on any of the 11 browsers on this windows machine...

So if it's for the internet, you simply can't guarantee that they'll be viewable.
0
 
LVL 31

Expert Comment

by:seanpowell
ID: 12070319
>>most rows are full of boxes when I look at it with IE
exactly - the chart will let you know which ones are safe to use, and which ones aren't...
0
 
LVL 3

Author Comment

by:Sasho
ID: 12070619
I thought unicode was designed to make sure you can guarantee that they'll be viewable.

I guess I'll have to give up on this battle and create images from those characters.
0
 
LVL 3

Author Comment

by:Sasho
ID: 12070627
Actually I got most chracters to work by using:
p.unicode { font-family: Arial Unicode MS; font-size: 10px }

But when I went to different machines some IE browsers could not figure out this font either.
0
 
LVL 3

Author Comment

by:Sasho
ID: 12070903
I went with the suggestion to use images.

Sean I realize you probably do not care about points, but I wanted you to know I meant to split the points, but clicked on the wrong thing.
I feel you gave me help understanding the way unicode works and why it is not uniform across all platforms.
Let me know and I can make a separate questions with points for you.
0
 
LVL 31

Expert Comment

by:seanpowell
ID: 12070923
Not to worry at all - the thread is useful for future searchers.
I'm sorry that there's no definitive solution for you ...

Sean
0
 
LVL 11

Expert Comment

by:neester
ID: 12071479
Sorry to hear too!
I learnt a lot about unicode too.
I didnt realise its purpose before :S

Thanks sean.
0

Featured Post

Announcing the Most Valuable Experts of 2016

MVEs are more concerned with the satisfaction of those they help than with the considerable points they can earn. They are the types of people you feel privileged to call colleagues. Join us in honoring this amazing group of Experts.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
CSS: Making responsive table look nicer 7 37
How do I select this logo using CSS? 6 42
Why "Mobile First"? 5 37
CSS Style 8 42
Creating a CSS block that only applies to printing By default, all of your CSS applies to every possible view of your page - whether on screen, printed, landscape, touch-screen, or whatever.  You can, however, add CSS that only applies under certai…
Styling your websites can become very complex. Here I'll show how SASS can help you better organize, maintain and reuse your CSS code.
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …
In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at google.com/fonts: Browse or search based on font properties or name to find a suitable font for…

749 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