[css-d] Spacing/text size question

2006-01-16 Thread Amal Bala
Hello everyone --

I'm a novice Web designer who needs a little help using CSS. At
present, I'm using a simple style sheet to control font sizes on my
Web site, www.amalbala.com.

I have achieved my goal of controlling text size (and thus spacing) in
Internet Explorer, but when I visited my site on a Mac, which uses
Safari as the browser, I realized the spacing and sizing get
distorted. In other words, the style sheet seems not to work at all.

Is there something special I need to do so the style sheet works on
Mac browsers as well as PCs?

Many thanks.


Amal
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/


Re: [css-d] Spacing/text size question

2006-01-16 Thread Matthew Levine
On Jan 16, 2006, at 4:07 PM, Amal Bala wrote:

 I have achieved my goal of controlling text size (and thus spacing) in
 Internet Explorer, but when I visited my site on a Mac, which uses
 Safari as the browser, I realized the spacing and sizing get
 distorted. In other words, the style sheet seems not to work at all.

 Is there something special I need to do so the style sheet works on
 Mac browsers as well as PCs?

Hi Amal,

There's nothing special you need to do to support Safari, Firefox,  
Opera (usually), and so forth.  In general, each of these browsers  
provideds good support for the W3C standards for HTML and CSS.  It's  
IE that provides pretty poor support, so we usually have to modify  
our stylesheets to account for IE's quirks.

As you continue to develop your CSS skills, I'd actually recommend  
starting by developing on Firefox, since it should respond  
predictably to your changes, and then work around IE's quirks.

As for font sizing, I should preface my remarks by saying that fonts  
are always going to be different between browsers and platforms. You  
shouldn't expect pixel-perfect accuracy, but should design so that  
your site looks good and won't break in a variety of situations.  Dan  
Cederholm's book Bulletproof Web Design has some great information  
on this.

I took a look at your site, and saw that you're using points for font  
sizing.  Points are great for print, but they're pretty lousy for web  
design. Pixels are a bit better, but you can't resize pixels with IE,  
so visitors reading the text are out of luck.  Relative units (small,  
medium, large; ems, and percentages) are usually the way to go.

I'd suggest setting a base font size for your document like this:

   body { font-size: small; }

And then modifying the elements using ems or percentages, like this:

   h2 { font-size: 1.5em; }
or
   h2 { font-size: 150%; }

Hope that helps!

-- 
Matthew Levine (http://www.infocraft.com/)
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/