[thelist] CSS: unexpected behavior, please advise

[Scott Schrantz]

> -----Original Message-----
> From: Chris W. Parker [mailto:cparker at swatgear.com]
>
> 1. em font size is a way to size fonts relatively right? so does that
> mean that the font will be based whatever browser is set to view fonts
> at? i.e. the browsers idea of a normal sized font is 10pt. so if i
> have...
>
> font-size: 0.90em;
>
> ...in my stylesheet, does that mean that my font will appear at
> approximately 90% of 10pt?

You got it. Although in Windows browsers, "normal" is more like 16px

> 3. i don't know if this is an expected behavior, but sometimes
> everything is my pages will be centered regardless of the
> alignment set
> in the <td>. i then have to either write style="text-align: center" on
> each <td> that i want to be centered or create a class and do
> class="centeredClass" on each <td> that i want centered. how can i fix
> that? is this one of the problems with using tables and CSS?

IE6 surprised a lot of people with their particular interpretation of
alignment and inheritance. Basically, if you center a table, all the text
inside will be centered too. If this is what you're seeing, putting td
{text-align: left;} in your global stylesheet will restore the behaviour
you're used to.

> i don't use CSS for any positioning yet, i'm just trying to sort of
> "phase" it in if you know what i mean.

There's actually two levels of CSS. CSS1 (colors, fonts, margins, padding)
and CSS2 (positioning). There's no shame in using CSS1 on table-based
layouts. I do it myself, as do a lot of people on this list. Master CSS1,
and then you'll have a good foundation for moving on to positioning.

> 4. say for example i've got a form with titles of the
> different inputs.
> some of those inputs (is there a better word than input[s] ? ) are
> required so they have a standard red asterisk next to them. i
> defined a
> class for all the titles like this...
>
> .formTitles {
>    attributes;
>    }

Actually, HTML has a built-in element that's just for this
purpose...<label>.

>
> right now the titles look like this...
>
> <div class="formTitles">Email<font color="#FF0000">*</font></div>

You could change this to
<label>Email<span class="required">*</span></label>

And in your CSS...
label {
attributes;
}
.required (
color: #f00;
}

<span> is a wrapper that doesn't in itself mean anything, but it can be used
to apply styles to a particular section of text. Using it separates the
style from the content by identifying what the *meaning* of the text is, but
not how it is to be displayed. In this case, it defines the asterisk as
belonging to a required form field. Then, in the style sheet, you define the
display characteristics - the color red. If you later decide the required
fields should have a blue asterisk, all it takes is one change to the
stylesheet.