Solved

font-family works in IE but not Mozilla

Posted on 2004-09-14
27
2,025 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
3 Use Cases for Connected Systems

Our Dev teams are like yours. They’re continually cranking out code for new features/bugs fixes, testing, deploying, testing some more, responding to production monitoring events and more. It’s complex. So, we thought you’d like to see what’s working for us.

 
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

ScreenConnect 6.0 Free Trial

Check out the updates in one game-changing release, ScreenConnect 6.0, based on partner feedback. New features include a redesigned UI that improves session organization and overall user experience. See the enhancements for yourself!

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
css, html 5 42
Wrapper for APPs 9 76
bootstrap footer centering and expand problems 7 45
Overlap photo won't go all the way to the right 1 18
When writing CSS, there are a few simple rules that will make your life easier.    1. Using ‘* {box-sizing:border-box;}’. Using this will wrap all your elements in a nice little compact box-model that will give you the width you want, like so... …
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
In this tutorial viewers will learn how to position overlapping items using z-index in CSS. They will also learn the restrictions on the z-index property.  Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Red.…
In this tutorial viewers will learn how to style different bullet points for unordered lists in CSS. Begin with a normal unordered list; the default bullet point is a solid circle: In the CSS, create a defined class of unordered list by typing "ul.S…

821 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