|
| |
|
|
pageoneresults
Posts: 1001
From: Orange, CA USA
Status: offline
 |
First Order of Business - 5/20/2003 14:26:46
Get rid of all your <font> tags! This will be a start for all the beginners. You will need to set up an external css file so that you can do this. In your external css, put this...
body{font-family:verdana, arial, helvetica, sans-serif; color:#000; background: #fff; font-size:1em;}
You can use whatever unit of measure that you want. The preferred unit of measure is the em. I' ve not gone totally accessible yet and still use px.
Now, you' ll need to get rid of all those <font> tags that represent color, in your external css, put this...
span.red{color:#ff0000; background:transparent;}
span.blue{color:#336699; background:transparent;}
You can also use shorthand for your color attributes. The above can be shortened to...
span.red{color:#f00; background:transparent;}
span.blue{color:#369; background:transparent;}
Anytime you have three pairs in the hex value, you can use shorthand. The web safe color pallette uses all paired values.
Now, once you' ve set up your external css file, open a test page in FP. Just do a save as on your index.htm and name it test.htm or something like that. You' ll want to make sure that you save an existing page so you have content to work with.
While viewing your test.htm page in normal view, do ctrl + a to select all on the page. Go to your > Format > Remove Formatting (ctrl+shift+z). This will strip out all <font> tags and any other on page formatting. Now you have a clean slate to start with. This is where it gets tricky because you will now need to reformat the page from top to bottom using your styling menu at the top left. You will no longer use the regular formatting buttons that FP provides.
I should point out, that the external style sheet must be referenced in the <head> of your pages or you will not see your available styles appear in the menu at left.
<link href=" /css/file.css" type=" text/css" rel=" stylesheet" >
I recommend that you create a sub-directory called /css/ and keep all of your .css files in there.
The above brief explanation may not be all that is needed to fully understand this. Those of you with questions, feel free to ask away, that is what the forum is for. Some of you may want to purchase additional tools to help with developing your style sheets. There are many available out there and they will come in handy for those of you not familiar with writing style codes in note pad or FP' s css editor.
< Message edited by pageoneresults -- 5/20/2003 2:30 PM >
_____________________________
SEO Consultants Directory
Find Search Engine Marketing Companies
|
|
|
|
Gil
Posts: 7533
From: North Carolina, USA
Status: offline
|
RE: First Order of Business - 5/20/2003 15:05:41
Q: Why are my font sizes different in different browsers (I' m using ems or %)?
Netscape 4 and early versions of IE do not support these properties correctly. They will work (in the most part) correctly in Netscape 6 or IE 5.
To avoid the problem do not specify font sizes at all. If this is unacceptable to you, you should exclude the font size declarations by means of an @import statement:
STYLE SHEET:
@import url(nameoffile.css);
All of the font size declarations go in the imported style sheet. This will remove the problems, but will mean that the older browsers do not get font size declarations.
If you must specify fonts in these browsers, you can use pixels, but before doing so please read the note below.
Q: Why are my font sizes different in different browsers (I' m using keywords such as large and small)?
These are fundamentally broken by incorrect implementations. Do not use them.
Either do not specify font sizes at all, use ems and % in accordance with the instructions above, or else use pixels, again subject to the note below.
Q: Why are my font sizes different on different platforms (I' m using points)?
A: When you specify a font size in points, it means a certain number of inches. 1pt is, in CSS, 1/72in. As a result, when you specify a font size as (say) 12pt, it is equivalent to 1/6in. Because the computer has no idea how large your monitor is, it uses a (large arbitrary) conversion factor. For example, the Mac OS is most commonly configured to treat 1 inch as 72 pixels. Windows, by comparison is 96 pixels. As a result, text is usually 25% smaller on the Mac. Therefore that which is comfortable for you on your Mac will (usually) be too large for you on a Windows machine, and that which is comfortable on your Windows machine will be illegible on a Mac.
If you require further information on this subject, please read http://richinstyle.com/masterclass/lengths.html.
Q: Why shouldn' t I specify fonts in pixels?
A: Fonts specified in pixels do not relate to the user' s ability to see. As such, they present accessibility difficulties for the partially sighted. It is possible to avoid these difficulties, either by using ems and %, or else not specifying font sizes at all.
Furthermore, in some countries, including America, it is potentially against the law to present these kind of accessibility problems.
However, if your design is more important to you than accessibility, and as such, you will ignore this advice, it is preferable to specify fonts in pixels than in points, because with pixels you avoid the point-problems described above.
Q: Why do my styles look different in Netscape than Explorer?
A: As can be seen from the 250+ Netscape bugs at http://richinstyle.com/bugs/netscape4.html, Netscape is very badly buggy.
However, in many cases it is because your CSS is invalid that it does not work in Netscape: Explorer will accept all kinds of garbage. To check whether this is so, you should validate it.
_____________________________
Gil Harvey, 1947-2004
| |
|
 New Messages |
 No New Messages |
 Hot Topic w/ New Messages |
 Hot Topic w/o New Messages |
 Locked w/ New Messages |
 Locked w/o New Messages |
|
Post New Thread
Reply to Message
Post New Poll
Submit Vote
Delete My Own Post
Delete My Own Thread
Rate Posts
|
|
|
Printable Version 