Solved

Set font size with pixels

Posted on 2008-06-20
3
641 Views
Last Modified: 2008-07-08
Hello experts,

The question of the day is:  Is there a way to prevent Firefox from resizing my "px" precise fonts?  By that I mean, in IE you can increase/decrease font sizes using the "em" measurement.  However, when you use "px", you cannot resize them.  For portions of my design i must use pixel precise fonts.  Problem solved with IE, I just use "px" for my font sizes that cannot change.  HOWEVER, firefox still resizes them.  So how can I enfoce the font size without using images?  Possible?

In the code below, only Paragraph 1 is resized when I change the "browser" font size.  In firefox, all 3 change.  How to get Firefox to behave like IE?
<html>
<head>
<style type="text/css">
.p1{font-size:1em;}
.p2{font-size:12px;}
.p3{font-size:14px;}
</style>
</head>
<body>
 
<p class="p1">Paragraph 1</p>
<p class="p2">Paragraph 2</p>
<p class="p3">Paragraph 3</p>
 
</body>
</html>

Open in new window

0
Comment
Question by:js_vaughan
3 Comments
 
LVL 10

Accepted Solution

by:
NeoTeq earned 300 total points
ID: 21834075
This is not possible... And setting font size in pixels won't help you in IE 7 either.
0
 
LVL 42

Assisted Solution

by:David S.
David S. earned 200 total points
ID: 21835668
You can not. Being able to change the font-size is a basic usability feature of web browsers.

I recommend you learn how to make your designs more flexible. If you showed it to me, I just might be able to give you some suggestions.
0
 
LVL 4

Expert Comment

by:sajay_j
ID: 21842926
Usage of percent values for fonts.

<html>
<head>
<style type="text/css">
.p1{font-size:40%;}
.p2{font-size:120%;}
.p3{font-size:140%;}
</style>
</head>
<body>
 
<p class="p1">Paragraph 1</p>
<p class="p2">Paragraph 2</p>
<p class="p3">Paragraph 3</p>
 
</body>
</html>
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
Debugging web applications - in general and specifically 401 Unauthorized errors 6 37
CSS issue 8 40
Css regex 6 38
Using Specialized Fonts in CSS 1 24
Styling your websites can become very complex. Here I'll show how SASS can help you better organize, maintain and reuse your CSS code.
This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
The viewer will learn how to create and use a small PHP class to apply a watermark to an image. This video shows the viewer the setup for the PHP watermark as well as important coding language. Continue to Part 2 to learn the core code used in creat…
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …

829 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