CSS Issue (font size defined in em vs. pt or px)

Hi there. I designed our new website on a MAC using
Dreamweaver for MAC. Now, that I am testing the site, I realized
that certain text elements look very frail on IE7 and FireFox
(especially in FireFox) for Windows. I’m using a fair amount
of CSS to style the site and realized that some font sizes are
defined using em whereas others are defined by px or pt. Is there
any difference or a parameter that I should prefer?
You can check out the site at
www.fastventures.com/beta/index.html
Any ideas or feedback would be sincerely appreciated. Thanks
a lot.

> All kinds of font smoothing kicks if the text is elastic
which make the
> pages look ugly.
Like what?
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.dreamweavermx-templates.com
- Template Triage!
http://www.projectseven.com/go
- DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs,
Tutorials & Resources
http://www.macromedia.com/support/search/
- Macromedia (MM) Technotes
==================
"Osgood" <[email protected]> wrote in
message
news:etmggf$mhb$[email protected]..
> HTML-Newbie wrote:
>> Hi there. I designed our new website on a MAC using
Dreamweaver for MAC.
>> Now, that I am testing the site, I realized that
certain text elements
>> look very frail on IE7 and FireFox (especially in
FireFox) for Windows.
>> I?m using a fair amount of CSS to style the site and
realized that some
>> font sizes are defined using em whereas others are
defined by px or pt.
>> Is there any difference or a parameter that I should
prefer?
>
> Depends what you need. if you want your pages to look
consistant cross
> browser use px.
>
> If you want to cater for accessibility use em although
strictly speaking
> anyone who knows what they are doing can enlarge px
based fonts in any
> modern browser.
>
> Personally I avoid em because I think px gives a better
visual
> representation cross browser.
>
> All kinds of font smoothing kicks if the text is elastic
which make the
> pages look ugly.
>
> Go with what you feel is right for you. If I didn't care
that much about
> the presentation of a page I'd use em most probably.
>

Similar Messages

Font size increases in preview

I am creating a navigation and the font expands with
previewing. I would like to know how I can stop this from
happening?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN" "
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="
http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=UTF-8" />
<title>Untitled Document</title>
<style type="text/css">

</style>
</head>
<body>
<ul class="nav current-philosophy">
<li class="home"><a href="bwd
live/css/pages/home.html">Home</a></li>
<li class="philosophy"><a href="bwd
live/css/philosophy.html">Philosophy</a></li>
<li class="windows_doors"><a href="#">Windows
& Doors</a></li>
<li class="pinkladies_carpentry"><a href="bwd
live/css/pinkladies.html">Pinkladies
Carpentry</a></li>
<li class="catalog"><a href="bwd
live/css/catalog.html">Catalog</a></li>
<li class="contact"><a href="bwd
live/css/contact.html">Contact</a></li>
</ul>
</body>
</html>

You have no font-size defined in your nav.
.nav li {
font-size:14px;
Keep in mind, that users can increase text size in browser.
There's no way
to stop that.
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
www.alt-web.com/
www.twitter.com/altweb/
www.alt-web.blogspot.com/

Why doesn't my custom ItemRenderer accept Application font size?

I have a CSS file:
s|Application {
fontFamily: Verdana;
fontSize: 9;
Why doesn't my custom mx:AdvancedDataGrid ItemRenterer accept the font size defined in the stylesheet?

What is the value of fontSize? Could it be set in some other selector?

How to Modify Font Size at Application Level

There is a requirement to change the font size at the application level for ease of readability. Is there an easy way to accomplish this requirement in APEX 3.0?
Please advise.
Thank you.
~Phyllis

Ah, alright so then the font does not have to change size on request?
You just want to increase the font size of a report or form?
If you just want to increase the font size of everything, you can add this to your Page's header...
<style type="text/css">
* {font-size:20px;}
</style>If you just want to change the font-size of something in particular, then you'll have to get the CSS it refers to (use Firebug in Firefox).
For example, to change some headers and data in template 15...
<style type="text/css">
.t15RegionHeader
font-size:12px;
tr td.t15data
font-family:verdana;
font-size:10px;
white-space:nowrap;
th.t15header
font-family:verdana;
font-size:10px;
color: #efefef;
</style>Hope this helps.
-Chris

HELP WITH FONT SIZE

Hello,
In Dreamweaver, how do I change the dropdown menu of font size to ENUMERATED? I went into the CODE FORMAT and could not do it there. I would rather work with the numbers for font size than the small, medium, large, etc. Any help appreciated.
[email protected]

You'll get better cross browser results with ems or pixels.
CSS
html {font-size: 100%}
body {font-size: 1em}
h1 {font-size: 2.5em;} /* 40px/16=2.5em */
h2 {font-size: 1.875em;} /* 30px/16=1.875em */
p {font-size: 0.875em;} /* 14px/16=0.875em */
or
h1 {font-size:40px;}
h2 {font-size:30px;}
p {font-size:14px;}
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
http://alt-web.com/
http://twitter.com/altweb

Changing webpage font size

How can I increase the size of the website pages, so that the font size is larger? Going into the menu options from a website and enlarging the default and minimum font size from within the General Properties and saving the changes does NOT solve the problem (though a return to these settings shows that the new settings are correctly changed). The web pages seem as small as ever. Please help!
-Mike

I did it.
On the Web UI, I got all the HTML DIV classes that start with "ur" and added them to my htmlb_style.css, with font-size as large.

CR XI R2 pdf export font size issue

Exporting a report to PDF using Crystal XI R2 seems to be reducing the size of the fonts. When printing directly from CR and exporting to PDF and printing from the PDF viewer the font sizes are smaller. Any ideas on what I can do to correct the problem?

Please refer following SAP note:
Business Objects Notes Get Help | Close
   1220516 - Font size decreases when report is exported to PDF from Crystal Reports XI or Crystal Reports XI Release 2
Language   English     Version   1     Validity: 07.05.2008 - active
Edit Print View Show change log Show Internal Memos
Content:    Summary   |   Header Data   |   Other Properties
Symptom
In Crystal Reports XI and Crystal Reports XI Release 2 the font shrinks by approximately 10% when a report is exported to Adobe Acrobat Format (PDF).
Cause
This behavior is due to the way Windows and UNIX, and therefore Crystal Reports, handles low point size fonts on a low-resolution screen. Text layout in the absence of a printer driver will consistently be rendered differently than in PDF.
Crystal Reports currently shrinks the font by 10% to prevent any truncation this difference may cause.
Resolution
CAUTION The following resolution involves editing the registry. Using the Registry Editor incorrectly can cause serious problems that may require you to reinstall the Microsoft Windows operating system. Use the Registry Editor at your own risk. It is strongly recommended that you make a backup copy of the registry files before you edit the registry. For information on how to edit the registry key, view the 'Changing Keys And Values' online Help topic in the Registry Editor (Regedit.exe).
To resolve the behavior
Set the resolution of the default printer of the local computer experiencing the issue to 1200 DPI. Most printers have a default setting of 600 DPI.
Create two registry keys to prevent the crxf_pdf.dll from decreasing in font size.
Click Start > Run. Type "regedit". The Registry Editor appears.
Create the following keys for Crystal Reports XI with the defined values:
HKEY_CURRENT_USER\Software\Business Objects\Suite 11.0\Crystal Reports\Export\PDF\ForceLargerFonts
Type: DWORD
Recognized Values: 0,1
Default Value: 1
Creation Method: manual
HKEY_LOCAL_MACHINE\Software\Business Objects\Suite 11.0\Crystal Reports\Export\PDF\ForceLargerFonts
Type: DWORD
Recognized Values: 0,1
Default Value: 1
Creation Method: manual
Set both registry key values to 1 to turn them on.
Create the following keys for Crystal Reports XI Release 2 with the defined values:
HKEY_CURRENT_USER\Software\Business Objects\Suite 11.5\Crystal Reports\Export\PDF\ForceLargerFonts
Type: DWORD
Recognized Values: 0,1
Default Value: 1
Creation Method: manual
HKEY_LOCAL_MACHINE\Software\Business Objects\Suite 11.5\Crystal eports\Export\PDF\ForceLargerFonts
Type: DWORD
Recognized Values: 0,1
Default Value: 1
Creation Method: manual
Set both registry key values to 1 to turn them on.
In UNIX, an X server client such as x-win32 must be installed. Add the keys as follows:
Launch the X server client.
Source <bobje install>/bobje/setup using env.sh (for example: ./env.sh).
Create the registry keys as detailed above.
Restart the Report Page and Cache Servers.
====================
NOTES:
If using Windows 2003 Server, upgrade to Acrobat Reader version 8.0 or higher as well as creating the above registry keys.
Use the appropriate path to access the UNIX regedit as follows:
AIX: <bobje install>/bobje/enterprise115/aix_rs6000/crpe/mw/bin-aix4_optimized/regedit
Sun Solaris: <bobje install>/bobje/enterprise115/solaris_sparc/crpe/mw/bin-sunos5_optimized/regedit
Linux: <bobje install>/bobje/enterprise115/solaris_sparc/crpe/mw/bin-linux_optimized/regedit
====================
Edited by: Prathamesh Acharya on Apr 23, 2009 5:50 PM

Help on font sizes and browser resizing issues

When browsers resize the text, they can have a significant impact on the my designs. I am using CSS positioning, and not tables. I am also using relative font sizes, usually ems. I can get everthing to look right on my pages when the browsers are set at the normal or medium text size. But, i run into problems when the browser is set at the large or largest text size. I need help dealing with this issue in general. But, here's an example that best illustrates the problem:
I set some white-colored text on a dark background in a banner at set at 800px x 50px. The font size is set at 1 ems. The background color for the rest of the page is white. So, when the white-colored text fits easily within the banner, everything works okay. But, when the browser resizes the text, the white text flows beyond the dark background color of the banner and becomes invisible on the white background of the page. Is there some way to use margins, padding, or line size to manage this type of situation?
What are the best tactics to use regarding font size when using CSS positioning ?
Thanks for any help on this question.

Thank you for your prompt response. I will put my page on a test server when I can. But, for now, here is my code below.
I get your point about flexibility.The question is how? What are the best approaches to use? I have the sense that more experienced designers have some conventional tactics for ensuring the pages read reasonably well even when the text size is enlarged in the browsers, but I am not sure what approach might work in general.
Part of the issue with this particular design is that I am actually using a background image in the header/banner. And it has a set height:51 px. I don't want it to repeat it vertically whenever someone enlarges the text size in their browser.
Again, I would appreciate any help offered.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">

</style>
</head>
<body>
<div id="Container">
   <div id="Banner">
     <div class="imageleft" id="Logo"><a href="pricinginfo.html"><img src="images/Logo177x51.jpg" alt="Darragh Logo" width="177" height="51" border="0" usemap="#Map" /></a>
<map name="Map" id="Map"><area shape="rect" coords="8,7,166,41" href="pricinginfo.html" alt="Darragh Logo" />
<area shape="rect" coords="167,39,168,53" href="#" /></map></div>
     <div id="Bannertext">wines to savor with family and friends </div>
     <div id="Email"><a href="mailto:Darragh Cellars, Proprietor, Andrew Aitken [email protected]">Darragh Cellars, Proprietor, Andrew Aitken [email protected]</a></div>
   </div>
   <div id="FlashArea"><img src="" alt="" name="FlashArea" width="800" height="400" id="FlashArea" style="background-color: #CCCCCC" /></div>
   <div id="leftBlock">Darragh Cellars produces boutique wines that express a balance between earth and fruit. Our wines are crafted to provide a rich wine experience for all palates.- Proprietor, Andrew Aitken Produced & Bottled ByCRUSHPAD San Francisco, CA www.crushpadwine.com </div>
   <div id="rightBlock"><a href="pricinginfo.html" id="astandardlink">Reservations & Contact Information</a>: Darragh Cellars offers an extremely limited supply of Pinot Noir and Chardonnay vintage wines. Reservations may be placed directly with Proprietor Andrew Aitken. </div>
</div>
</body>
</html>

How to increase font size of error message in css or in template?

Hi all,
Firt time i am working for css modification.I am not able to increase the font size of Error message in Inline in Notification validation at Item level. I am not able to find where i should make change for that in tempalate or in CSS. I know it's very simple question but i am not able to do this simple change.
I created some validation at Item level and page level and in Inline in Notofication want to display the error message.
In error message i am writing code like "
<a href="#P15_item_name" title="Link to item FIELD">Please Enter value for item name </a>."
but font is very small. can any one help me where i should make changes to make it some biger font.
where exactly i should make changes.?
Thank You,
Amit

This is strange. Another css is used, core_V22.css
Here is the path: htmldb/images/css/
Search for "span.errTxt". It already has a set font-size, so just increase it.
I don't know the exact use of core_V22.css. It seams to be used by other applications, so it may influence them as well. It would be better if you could define another class, but I don't realize yet from where to address it
I hope this helps you Amit
Try to use Firefox with the Firebug add-on installed for easy work with html. I can't see my self without it :-)
Lupei

Default font size for exporting CSS styles?

People
I make the layout of websites in indesign cs3 with all text properly set to be defined by paragraph styles.
I then export to an epub file from which i can extract a css file. Problem is all sizes are in em units.
Those em's seem based on 12pt, while the default font size of most (all?) browsers is 16pt.
For example:
p.body {
     font-family: "Verdana";
     line-height: 1.64em;
     font-size: 0.92em;
     margin-bottom: 0.00em;
     margin-top: 0.77em;
     text-indent: 0.00em;
     margin-right: 0.00em;
     margin-left: 0.00em;
     text-align: left;
     font-weight: normal;
     font-style: normal;
     color: rgb(0,0,0);
The correct font size (the one set in indesign) should be 11pt. In the css file i get 0.92em. (so indesign assumed 1em = 12pt)
With a browser default size of 16pt, the text displays too big: 1em = 16pt so 0,92em = 14,72pt.
In other words: all text is displayed to big, text that should be 11pt is displayed at 14pt.
So is there a way to tell indesign when exporting css 1em = 16pt instead of 12pt?
I tried adjusting the default paragraph font size to 16pt (it is 12 pt by default) and base the body paragraph style onto this one, but the css file doesn't change.
Thanks for any help!

Well i found a workarround on another forum.
Instead of making indesign think 1em = 16pt, make the browser think 1em=12pt.
Adding this line of code to the css file makes the font sizes in indesign and website match:
body {
    font-size: 0.75em;

Tables in iBooks not honoring font-size: css attributes

Within my validated flowing layout epub, I would like to have a table that is rendered 80% of the base font and the superscripted text within the table render some size smaller than the rest of the text within a particular cell.
However, iBooks on iPhone 5 renders not only the table but the 'span' text at the same size as the rest of the surrounding text. iBooks appears to ignore font-size: styling in tables completely (it does honor font-weight: though).
Is this normal/intentional behavior for iBooks?
table {
     width: 60%;
     font-size: 0.8em;
     margin-left:auto;
     margin-right:auto;
     border-collapse: collapse;
.super_script {
     font-size: 80%;
     vertical-align: super;
<table id="table_1a-27">
     <caption class="table_caption">Table 1A-27</caption>
          <tr>
               <td>Some text<span class="super_script">Note 1</span></td>
          </tr>
          <tr>
               <td>
                    <ol>
                         <li>Beginning of sentence<span class="super_script">Note 2</span> than the rest of the sentence.</li>
                         <li>Some stuff here</li>
                    </ol>
               </td>
           </tr>
</table>
Message was edited by: zephyrmays to display markup

Ok so I puzzled thru my issues with getting iBooks to render superscripts and honor the CSS
font-size:
attribute.
After playing around with verious versions of my stylesheet and different setting within iBooks for iPhone, it appears that iBooks does honor the font-size: attribute to a point. If you set the text very small within iBooks using the 'AA' function, the app will only allow the content to become so small and then starts to disregard to proportional setting of superscripted text.
It appears as you scale back out the font-size: attribute settings are applied when the resulting size is at or above the minimum font size for the device.
The confusing part is when making the app text display size smaller the superscripted items stop being scaled while the normal text keeps getting smaller to the point of being the same size (or nearly so) as the superscripted content.
Hope this assists someone else in the future.
Btw is there a dev reference (Apple or otherwise) site for iBooks? I'm have an iTunesConnect membership but the resources there are limited and vague at best (with the notable exception of Book Proofer).
Regards,
Zephyr

Will Adobe ever fix the UI text font size issues in CS6 apps?

Having recently installed CS6 on my new Windows computer, I find some serious issues with font sizes in the user interface (and not only in Dreamweaver, but in several--but not all--the applicaitons). You'd think that with a 27-inch screen, font sizes wouldn't be a problem. And you'd be wrong.
The irony is that some text is properly sized. Commands in the menus. For example. But the menu names are not. The text of items in the File tab is correctly sized, but the name of the File tab is not. In the Manage Sites dialog box, the title bar text is properly sized, but the text within, including button labels, is not. IN almost all of these cases, text is just plain way too small to read. It looks like the programmers made a HUGE boo-boo: they sized text in pixels, not only a no-no in web diesgn, but a no-no in applicaiton design.
Because on a 27-inch screen with a resolution of 1920x1080, UI text in Dreamweaver is all plenty large and readable, while on a 27-inch screen with a resolution of 2560x1440, UI text all over the applicaiton is too tiny to read--and made worse by putting the text on a gray background, reducing contrast, yet another design no-no.
CC is NOT an option--and properly should not be for any occasional user. Do not even think of suggesting it as a "solution."
This is clearly a bug (did Adobe do any testing on higher-resolution screens before releaseing CS6?), and one I wonder if it is unique to Windows systems (as Apple has had similarly high-resolutiopn screen for its displays and iMac lines for quite some time now). Or is it uniquely a Windows 8 issue?
Finally, is there at all a workaround? I can find nothing in the Settings dialog box that would control the size of UI text. Perhaps there is a text-based configuration file that could be modified to change the size of UI text. (Yeah, having configured autoexec.bat, config.sys, win.ini, and similar files back in the day, I do know my way around configuration files--if they are still used.)

twritersf wrote:
Having recently installed CS6 on my new Windows computer, I find some serious issues with font sizes in the user interface (and not only in Dreamweaver, but in several--but not all--the applicaitons). You'd think that with a 27-inch screen, font sizes wouldn't be a problem. And you'd be wrong.
(and not only in Dreamweaver, but in several--but not all--the applicaitons).
What made you think that you should complain to Adobe about Windows display problem? Adobe and Microsoft are two different companies competing against each other.
However, you might have display problem and the best way to resolve this is by going to:
Control Panel >> Display
Follow the online instructions.
Please not, you go to control Panel from within the windows itself NOT from DW.
Hope this gets you started or you can ask in the Windows Forum on Microsoft Website.

Font size issue with the email functionality of infopath form

Hi,
We have a SharePoint list created and customised the form to send the form via email using email functionality in infopath form.
We have made the font size of the form fields( rich text box) to 11. But it is showing as 10 in email. Also for a text box we set the font size to 14. But it is 13.5 in the email.
Could anyone please let me know how to fix this issue?

http://social.technet.microsoft.com/Forums/sharepoint/en-US/afbd9fc3-b8d3-4ef9-a8bf-9cb136d12039/formatting-problem-with-email-from-an-browser-enabled-infopath-2010-form-in-sharepoint-2010?forum=sharepointcustomizationprevious
Yes, this is normal. Forms Services has to convert the form to an aspx page, and things get lost in translation when this gets submitted via email. My workaround has always been to set static widths to columns/controls, but you said that didn't work
for you? It's always worked for me.
https://go4answers.webhost4life.com/Example/infopath-send-form-email-162481.aspx
http://www.formotus.com/15413/blog-infopath/making-the-most-of-email-submit-with-infopath-and-formotus-forms

Spry Menu and IE Issue (Hover Font Size)

I'm not able to figure out why the hover focus setting works fine with Firefox or Chrome, but I can't find a setting in the CSS to ensure the value for the font on a hover within IE remains fixed. on a hover, the font size increases slighly in IE and pushes menu out of alignment very slightly. I was able to keep the hover size fixed in Firefox and Chrome via the CSS values for the spry, but not sure why IE is doing this and if there is a setting specific to IE that would allow me to keep the hover font size fixed, but not change the values in Firefox/Chrome. Is there any way to lock in the hover value using CSS for the font so in IE it remains constant?
http://oregonstate.edu/~labellec/CDfiles/index.html
Page is under development, but if you open it up in IE, the menu hover causes too much movement. I'm new to CS4, so, any help appreciated.
Thanks,
Chris

Perhaps you could adapt the techniques used here for your
Spry menu:
http://www.projectseven.com/products/menusystems/pmm2/see-through.htm
Al Sparber - PVII
http://www.projectseven.com
The Finest Dreamweaver Menus | Galleries | Widgets
http://www.projectseven.com/go/pop
The Ultimate DW Menu System
"Webkil" <[email protected]> wrote in
message
news:gnmh2l$dvo$[email protected]..
>I have tried this. I want a transparent background no
colour. As soon as I
>add transparent IE comes up with the word false in the
sub menus.

Dynamic text boxes, font size issues

I have created a dynamic text box and an input text box.
I have produced code that replicates whatever is typed in the
input box to display in the dynamic box along with a date and time
stamp once a button is clicked.
This all works fine, except for the sizes of the fonts. for
both boxes, i selected font size 10 . The input box is fine,
however the dynamic box text is huge.
When i make the dynamic text font smaller, it fits in fine,
but the input text that is inserted into the dynamic text box comes
in too big. If i make the input text box font smaller it is
unreadable when typing it in.
any soultion to how to make my font consistent. I am assumin
the problem is because both the text boxes are different sizes,
however i don't know how to resolve the issue.
Any help is much appreciated.

var today_date:Date = new Date();
var date_str:String =
(today_date.getDate()+"/"+(today_date.getMonth()+1)+"/"+today_date.getFullYear());
var my_date:Date = new Date();
var boat = ""
btn_send.onPress = function() {
var today_date:Date = new Date();
var date_str:String =
(today_date.getDate()+"/"+(today_date.getMonth()+1)+"/"+today_date.getFullYear());
var my_date:Date = new Date();
date_txt = date_str + " " + my_date.getHours() + ":" +
my_date.getMinutes() + ":" + my_date.getSeconds() + " " + boat;
the text appears in the dynamic box it just is a mish mash of
font sizes!!!

CSS Issue (font size defined in em vs. pt or px)

Similar Messages

Maybe you are looking for