Solved

font-family works in IE but not Mozilla

Posted on 2004-09-14
27
2,006 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
Comment Utility
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
Comment Utility
0
 
LVL 11

Expert Comment

by:neester
Comment Utility
It basically says:
Symbol Fonts are by default - disabled in moz
0
 
LVL 3

Author Comment

by:Sasho
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
works fine for me ?

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

Expert Comment

by:seanpowell
Comment Utility
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
Comment Utility
I'll post my CSS stylesheet, perhaps there is an error in it somwhere.
0
 
LVL 31

Expert Comment

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

Author Comment

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

Author Comment

by:Sasho
Comment Utility
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
How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

 
LVL 31

Expert Comment

by:seanpowell
Comment Utility
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
Comment Utility
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
Comment Utility
Hmm it looks like you are saying the inline appends and ovverides...
0
 
LVL 3

Author Comment

by:Sasho
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
>>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
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
Sorry to hear too!
I learnt a lot about unicode too.
I didnt realise its purpose before :S

Thanks sean.
0

Featured Post

IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

Join & Write a Comment

Unordered lists (HTML ul tags) are very handy to create menus of all types, shapes and sizes.  All it takes is a little knowledge of CSS and the possibilities are endless. First off, you should know the general format for menus created using the …
So you have coded your own WordPress plugin and now you want to allow users to upload images to a folder in the plugin folder rather than the default media location? Follow along and this article will show you how to do just that!
In this Micro Tutorial users will learn how to embed custom fonts into websites using @font-face in CSS Select a font: Ensure the EULA allows you to use @font-face: Download the font: Get the browser-compatible files you need: Edit your CSS       - Name …
In this tutorial viewers will learn how add a full-size background image to a webpage using CSS3. Create a new HTML document with an internal stylesheet.: In CSS, define the html element to have a background image. Use a high resolution image.: In t…

763 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

Need Help in Real-Time?

Connect with top rated Experts

6 Experts available now in Live!

Get 1:1 Help Now