Forum Moderators: not2easy
I am having problems making it work though.
This does work just with a test run...
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body>
<style type="text/css">
body {
font-family: Arial, Helvetica, sans-serif;
color: black;
font-size: 11pt;}
h1 {
font-family: Arial, Helvetica, sans-serif;
color: red;
font-size: 11pt;}
</style>
<font color="#000000">This is a test for CSS font sizes </font>
</body>
</html>
When I place this exact CSS code in between the HEAD or BODY of the page I really want it to affect, nothing works. I even selected all the text on that page and made it the default font with no defined size. I have tried the em tag on the one above as I read that was a better code to use than pt but it didn't work either. Would appreciate any information from someone that has been in this situation before. Not sure where to go now. Wish I could post the link to the page here so you could see what I mean.
Hope to hear from someone soon. Brad
<style..> ..</style>
<body>
...
</body>
As neverco said, put the <style> in the <head. Also, you would be better of working in px, % or em. I realize the importance of maintaining font size so as not to distort the page design, but keep these two things in mind: screen resolution and accessibility. PT is geared toward printing (and I believe mostly an MS thing) and is not adjustable. Same with px, though that is more universally accepted. However, if someone is using a high resolution, say 1440x900 or higher, small font like 11pt, which is about 14 px, will be hard to read and they won’t be able to adjust it. (1em = approx 12pt, 16px, 100%). Same applies to visually impaired. IMHO, you can set navigation and repeated page information (Copyright, etc.) to px, but keep content in either em or %. Don’t sacrifice viewership and potential customers for sake of the design.
Marshall
Points (absolute sizing) are for print (or screens designed by control freaks)
Relative sizing is for the screen - incl PDAs, TVs etc
:) xx-small ~ xx-large values are relative to the (default?) browser font size
:) percentages are relative to the neighbouring text
:) pixels are relative to the screen resolution
:) em and ex are relative to the parent element... best when cross-browser/platform 'accessibilty' is the prime concern
Different 'default' font sizes? your page will scale on the fly - this can be great... except at size-extremes, when you're likely to lose control of layout
</2cFromForumNewbie>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<!-- InstanceBegin template="/Templates/A_shop.dwt" codeOutsideHTMLIsLocked="false" -->
<head>
<!-- InstanceBeginEditable name="doctitle" -->
<title>my website info etc....</title>
<meta name="keywords" content="my website keywords etc....">
<meta name="Description" content="website description etc...">
<!-- InstanceEndEditable -->
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script language="JavaScript" src="javascript/box_info.js"></script>
<script language="JavaScript1.2" src="javascript/shopping_page.js"></script>
<script language="JavaScript1.2" src="images/buttons/mm_menu.js"></script>
<!-- InstanceBeginEditable name="head" -->
<style type="text/css">
body {
font-family: Arial, Helvetica, sans-serif;
color: black;
font-size: 1.1em;}
h1 {
font-family: Arial, Helvetica, sans-serif;
color: red;
font-size: 1.1em;}
</style>
<!-- InstanceEndEditable -->
</head>
<body bgcolor="#000066" text="#000000" link="#0000FF" vlink="#0066FF" alink="#00CCFF" onLoad="MM_preloadImages('images/buttons/buy_now_f2.gif','images/buttons/discount_f2.gif','images/buttons/more_info_f2.gif')">
<div align="center">
<table width="660" border="0" align="center">
etc etc
Just thought I'd show you what I've got there until the BODY part of the HTML. Have changed to em. Unfortunately the font still changes when I go to text size on IE.
What do you suggest I do now?
B
Unfortunately the font still changes when I go to text size on IE.
Fonts are resizeable, in the main. There is no-way to fix them - CTRL++ in FF, will do the same it's a USER Preference and there's nothing you can do about them, with CSS or without ;)
IE has a bug whereby it doesn't resize text which is set in pixels (px) via the Text size settings, however IE7 now has a zoom feature too, which does resize.
The general advice you might find when searching is that you should not even really try to fix font sizes. Different accessibility needs, resolutions and devices these days mean everyone is looking at your pages in a different way anyway.
CSS is a way to offer suggestions to the varying devices how to display your pages, that's why if you do a search you will find a lot of talk on Fluid pages and liquid layouts - this is to accommodate resizing.
If you absolutely must fix a certain area of text then use an image or flash perhaps?
A coupla-ideas:
:( <script language="JavaScript1.2" src="javascript/shopping_page.js"></script>
:) <script type="text/javascript" src="javascript/shopping_page.js"></script>>
It's rare that the former will cause a noticeable error... but... it never hurts to do it right :)
--------
I'd suggest stripping all styles from your <body> tag and, instead, declare them in your css body class
Anything wrong with what I've got below that you can see?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html><!-- InstanceBegin template="/Templates/blank full size.dwt" codeOutsideHTMLIsLocked="false" -->
<head>
<!-- InstanceBeginEditable name="doctitle" -->
<title>Example discount</title>
<meta name="keywords" content="my keywords etc">
<meta name="Description" content="my description...">
<!-- InstanceEndEditable -->
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script language="text/javascript" src="../javascript/box_info.js"></script>
<style type="text/css">
body {
font-family: Arial, Helvetica, sans-serif;
color: black;
font-size: 1.1em;}
h1 {
font-family: Arial, Helvetica, sans-serif;
color: red;
font-size: 1.1em;}
</style>
<!-- InstanceBeginEditable name="head" -->
<!-- InstanceEndEditable -->
</head>
<body>
<div align="center">
<table width="660" border="0" align="center">
<tr>
<td width="100%" height="17" bgcolor="#FFFFFF"><div align="center"><a href="../index.htm" target="_blank"><img src="../image.gif" alt="#" width="530" height="80" border="0"></a></div></td>
</tr>
<tr>
<td height="18" bgcolor="#FFFFFF">
<!-- InstanceBeginEditable name="text" --><br>
Discount
<p>info info etc....</p>
<p align="center"> <a href="javascript: self.close ()" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('close_window','','close_window_f2.gif',1);"><img name="close_window" src="close_window.gif" width="100" height="15" border="0" alt="Close Window"></a></p>
<div align="center">
<div align="left">
<div align="center"><a href="#" target="_blank">my
website address</a> / 2007 ©<br>
</div>
</div>
</div>
<!-- InstanceEndEditable --></td>
</tr>
</table>
</div>
</body>
<!-- InstanceEnd --></html>
Thanks in advance.
B
[edited by: SuzyUK at 7:34 am (utc) on July 4, 2007]
[edit reason] examplified code per guidelines [WebmasterWorld.com] [/edit]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
body {
font-family: Arial, Helvetica, sans-serif;
color: black;
font-size: 1.1em;}
h1 {
font-family: Arial, Helvetica, sans-serif;
color: red;
font-size: 1.1em;}
</style>
</head>
<body>
jsklajKSLJAKlsjkalJSKALjsklajKSLJAklsa
</body>
</html>
When I checked it on a friends computer it looked totally different. Their IE text settings were set to 'larger' and my computer has been set at 'medium'. Hence when I looked into how to rectify this, CSS came up as the answer.I am having problems making it work though.
Rather than regarding size variation as a 'bug', see it as a 'feature', one that allows you to relax in the knowledge that your content will be displayed legibly, and in a very similar fashion to all other well structured sites
It is likely that your visitors with altered default settings have chosen to do so... cos they want bigger or smaller than 'usual' font sizes
I think that the 'must-have' list for easy-to-navigate pages is fairly short:
* A logical/intuitive flow
* No horizonatal scrolling
* Visuals/bells-and-whistles that enhance - as opposed to dictate - the way 'essential' content is presented
Thanks to the way CSS accomodates user-defined 'preferences', we don't need to worry about ultra-precise, accurate-to-the-pixel layouts.
Although designing/coding a liquid layout [webmasterworld.com] might be (ok... is) a bit more complicated than forcing your content to fit into a rigid design, it's simpler in the long run - especially so if/when the aim is to reach the widest possible audience using any combination of current and future media (screen, pda, print, etc) and platforms (windoze, linux, etc)
Anyways, thanks for your help guys. Love this site. Wil certainly return here again in the future should I need any help.
...but will change a couple of the key things into images that I don't like when the whole page changes in text size.
<reiterate>It is likely that your visitors with altered default settings have chosen to do so... cos they want bigger or smaller than 'usual' font sizes</reiterate>
If you FORCE a font size you risk alienating some (who knows what proportion?) of your audience...
Those who DO have their font sizes set according to your 'ideal' won't notice the extra effort you have gone to ... but they will (ok, might) notice that your page(s) take ages to load
The others, who have consciously set their own default font sizes, will (possibly/probably) be rather miffed at the implicit suggestion that their wants/needs are being not just ignored but purposely denied
No-one has ever won an argument with a customer
It's just damn frustrating that I can't get it to work still
...
% and em didn't work
(i) What is the primary aim of the site?
(ii) What, technically, is preventing you from acheiving this goal?
'page viewed best with medium text size'?
This TV station is optimised for viewers with their volume set at 37.8745%, bass @ 67.543%, treble @ 42%, facing west from a leather chair in a house with beige carpets...
<b>% and em didn't work</b>
- referred to to the different ways that you can change text size eg: 100% and 1.1em vs 12pt.
Still it would good to know how to do it! Just frustrated I can't make it happen.
Thanks for all your help guys. B
