FireFox vs. IE, CSS, Text 3

[tgreer]

I recently updated my site. I got rid of tables and went with CSS for everything.

I like the way the site renders in IE.

In Firefox, the text renders... well, differently.

I'd like a CSS expert's explanation of why!

The site:

http://www.tgreer.com.

TIA



Thomas D. Greer

http://www.tgreer.com

Providing PostScript & PDF
Training, Development & Consulting

 

[ChrisHirst]

no doctype

Chris.

Indifference will be the downfall of mankind, but who cares?

http://www.candsdesign.co.uk

A website that proves the cobblers kids adage.

http://www.cram-system.com

Nightclub counting systems

So long, and thanks for all the fish.

 

[tgreer]

Thank you. I've added what I believe is the appropriate DOCTYPE to index.html (for now, I'll add to all the other pages once I've confirmed it is correct).

However, this did not affect/resolve any of the differences.

Specifically, I'm curious about the various text styles. The text renders differently between the browsers. FireFox doesn't seem (to me) to respect the LINE-HEIGHT tag.

Does this mean that LINE-HEIGHT isn't part of the strict XHTML 1.0 DTD?



Thomas D. Greer

http://www.tgreer.com

Providing PostScript & PDF
Training, Development & Consulting

 

[jwenting]

checked the DTD (and the transitional DTD as well), not a single mention of the word line-height (in either upper- or lowercase).

Remember that under XHTML ALL tags and attributes are lowercase by definition. Many browsers may ignore case but they're not required to and strict browsers will reject any tag that's in upper case.
Also remember that all attributes must have a value and all those values must be quoted.
Also remember that all tags must be closed.

But line-height as a CSS element is supported in CSS1 (and CSS2), if Firefox doesn't render it correctly that's a bug in Firefox.
Just make sure your CSS code is correct, as Firefox may be stricter in its interpretation of CSS than is IE as IE is somewhat lax and may accept some CSS code that is strictly speaking illegal like code omitting units.
For example IE may accept code like (I haven't tried this, it's just an example)

ll{
line-height: 5;
}

which FF and Mozilla may well simply ignore as it should be

ll{
line-height: 5px;
}
[/quote[

 

[ChrisHirst]

Check your page in the w3c validator.


at a first look without validating, you have unclosed <meta> tags, your style sheet link is incorrect (the "class" should be "type") and the ampersand in the title may be causing an issue. You have mixed case in the style sheet, it shouldn't matter for the attributes, but class and id names for XHTML are lowercase only.




Chris.

Indifference will be the downfall of mankind, but who cares?

http://www.candsdesign.co.uk

A website that proves the cobblers kids adage.

http://www.cram-system.com

Nightclub counting systems

So long, and thanks for all the fish.

 

[ChrisHunt]

jwenting: Actually, [tt]line-height[/tt] is one of the few CSS properties that may be declared without a unit. It has a different meaning though:

.class1 {
   line-height: 5; /* 5 times the font height */
}

.class2 {
   line-height: 5px; /* 5 pixels */
}

class and id names for XHTML are lowercase only

Not technically correct. Class and id names can be whatever case you like, but they are case-sensitive in XHTML, so they have to be in the same case in the document as they are in the stylesheet. Keeping everything in lower case means you'll avoid difficult-to-spot case mismatch errors, though.

Coming back to the original question, The only difference I see between FF & IE renderings of your site is the whitespace above & below the titles. I don't think this has much to do with line-height, it's because you don't declare either [tt]margin[/tt] or [tt]padding[/tt] settings and both browsers set their own defaults. You needn't bother with [tt]line-height[/tt] unless you want to change the line spacing in a block of text, it's rarely worth it for headings.

PS. Your site is a pretty slick CV & advert for your services, but I've gotta question the wisdom of putting a PayPal begging bowl on your front page. A row of Google text ads would look more professional (and might bring in more money).

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd

 

[tgreer]

Thank you all. I believe I've got everything in order now. I particularly appreciated the advice regarding paypal. I was dubious about that myself.

Also, the note about margin & padding was the missing piece in understanding the differences in layouts.

A star for all posters.



Thomas D. Greer

http://www.tgreer.com

Providing PostScript & PDF
Training, Development & Consulting