Design View Font Size

[Guest]

I am editing a web page created through another software. The font shown in
design view is always Verdana 3 (12 pt) while the webpage preview displays it
as Verdana 1 (8 pt). The default webpage style is defined with and embedded
css at the top of the page:

<style type="text/css" media="screen">
body { font-size: 11px; font-family: Verdana, Arial }
</style>

I know that this line is active, because when I change the font-size it does
change the page preview - but not the look of the design view.

I can select the text in design view and modify the font, but this adds
<font size> tags directly into the code. I have already set the default font
in design view to be Verdana 8 pt.

Why can't I get the design view text to match the web view text? Also, what
is the relationship between pt and px?

I am looking forward to giving out a beautiful green check mark.

 

[Ronx]

Design view in FrontPage is approximate, and not always perfect - the CSS
rendering is not good.

There is, theoretically, no relationship between points and pixels. 1pt is
1/72nd of an inch. 1px is 1/1024 times the width of your screen when set
at 1024x968 resolution - use a ruler to measure the inch, how many pixels
in an inch? Change screen resolution and you need a different ruler, or
get a different number of pixels.

In practise, a font set to 10pt will display as 10pt text in IE7 (100%
zoom, text size normal), as 9pt text in Opera (100% zoom), when compared to
10pt text in Notepad. In IE the text will be the same as (approx.) 13px
text.
pts should not be used on the web since browsers can interpret the size.
Pixels are constant within browsers, but should also be avoided since it is
a hassle to resize text in IE - and you cannot stop the text being resized.

 

[Stefan B Rusynko]

Styles do not cascade into some containers
add a style for text in tables (each can be different)

td { font-size: 11px; font-family: Verdana, Arial }
th { font-size: 11px; font-family: Verdana, Arial }
caption { font-size: 11px; font-family: Verdana, Arial }



--

_____________________________________________
SBR @ ENJOY (-: [ Microsoft MVP - FrontPage ]
"Warning - Using the F1 Key will not break anything!" (-;
To find the best Newsgroup for FrontPage support see:
http://www.frontpagemvps.com/FrontPageNewsGroups/tabid/53/Default.aspx
_____________________________________________


|I am editing a web page created through another software. The font shown in
| design view is always Verdana 3 (12 pt) while the webpage preview displays it
| as Verdana 1 (8 pt). The default webpage style is defined with and embedded
| css at the top of the page:
|
| <style type="text/css" media="screen">
| body { font-size: 11px; font-family: Verdana, Arial }
| </style>
|
| I know that this line is active, because when I change the font-size it does
| change the page preview - but not the look of the design view.
|
| I can select the text in design view and modify the font, but this adds
| <font size> tags directly into the code. I have already set the default font
| in design view to be Verdana 8 pt.
|
| Why can't I get the design view text to match the web view text? Also, what
| is the relationship between pt and px?
|
| I am looking forward to giving out a beautiful green check mark.
|

 

[Murray]

They do when the page has a valid and complete doctype.

 

[Guest]

But these do seem to cascade since when I change the font-size value the
webpage text adjusts through all the tables and everywhere else - just not in
design view mode. I guess my question really is why the design view text
size does not match the preview text size.

 

[Guest]

Thank your Ronx, this does answer my question. However, I'm not sure what it
means towards the end when you say we should avoid both px and pts when
specifying font size. What's the correct method?

 

[Ronx]

Use a relative size, such as small, smaller, %, em etc.

See http://www.rxs-enterprises.org/tests/ems-percent.htm
This page is intended to show how text specified in different ways resizes
in browsers using
View->Text size (or equivalent), but will also show other ways to specify
text sizes.

 

[Guest]

Okay, great! Now can you tell me how to get the design view font sizes to
match the preview font sizes?

 

[Ronx]

Nope.

I use small, x-small, medium etc to specify font sizes, and use a valid
complete <!doctype on most pages. On those pages the font *mostly* appears
as specified in the CSS (though I cannot find an example where it doesn't).

Where I do not use a valid <!doctype the font is again the same in Preview
as design, but the font is one size larger than specified (which I expect)
but is correct in FireFox.

I have seen differences, but cannot reproduce them.

Can you provide a link to a page where there is such a difference?

 

[Guest]

Yes. This is the site I'm working on: www.meansindustries.com

 

[Ronx]

It appears that in FP design view, the font size does not cascade into
table cells.
Adding
td {font-size:11px;}
to the CSS in the head section corrected the problem for the body text on
the home page (text to left of gear wheels image.)

FP design view is not good at rendering CSS.

 

[Guest]

Perfect. Thank you.

It appears that in FP design view, the font size does not cascade into
table cells.
Adding
td {font-size:11px;}
to the CSS in the head section corrected the problem for the body text on
the home page (text to left of gear wheels image.)

FP design view is not good at rendering CSS.