CSS layout page - Am I using it correctly? Opinions please.

I've been working on a CSS layout for a little while and I've managed
to get a page put together that looks like what I want:

http://www.eng.uwaterloo.ca/~p5yu/vfx.htm

(none of the links work yet, except for the validate referrer link at
the bottom).

It looks the same in IE6, Netscape 7, Mozilla 1.4, Opera 7.11 and it
should be fine on IE5 (the last time I checked it was before a few new
changes were made, so I don't know about now). I don't have a Mac, so
I don't know what it looks like there (and if you have a Mac, please
tell me what it looks like!). What I would like to know is if I'm
relying on any browser "quirks" to get it looking the way it is, and
whether I've stuck with the standards properly.

There's a little bit of "div soup" when it comes to things that aren't
specifically headings, paragraphs or lists (mainly the navigation
buttons, the footnote section). That was from the early days when I
was first learning but I haven't changed it (and I thought since they
aren't paragraphs or headings, they should be DIVs). Other than that,
as far as I can interpret the CSS standard, it _appears_ to behave as
expected. I think I don't have a background color for certain elements
with a color, but I need them to have transparent backgrounds and the
default is transparent, as far as I know. I'll add in background:
transparent; if it's absolutely needed.

Is there anything else I'm missing? Thanks.

P.S. Please reply only to the newsgroup. It's better to keep all the
info on a public group so everyone can see it. Besides, I don't have
an email address (prevents spammers and makes you post on the group
only!)
--
Qui-Gon Jinn & Tonic

"Just being around her again is... intoxicating."
- Anakin Skywalker

In article <3f32c3a8.17779525 (AT) news (DOT) uwaterloo.ca>, Duel of the Fetts
wrote:

I've been working on a CSS layout for a little while and I've managed
to get a page put together that looks like what I want:

http://www.eng.uwaterloo.ca/~p5yu/vfx.htm

Pretty good. Tested on Opera 7.2b3. Nice graphics.

There's a little bit of "div soup" when it comes to things that aren't

Not bad.

I'll add in background: transparent; if it's absolutely needed.

It's better to add transparent than not. Not that there is big
difference. For bullet proof backgrounds use same bg as container,
possibly with positioning it nicely. But that would be overdoing.

Is there anything else I'm missing? Thanks.

The usual screenfull of negative critique:

The "[ VFX ]" whatever it is is overlapping "Hyperwave transceiver" when
window is small. The latter don't have alt text (it being bg image is no
excuse, use float to solve both problems).

I think there is quite a lot chrome, less than 50% of window for content.
I would get rid of "Copyright 2003" and "XHTML1". About the site image is
particularly hard to guess whitout hovering.

font-family : book antiqua, new york, serif;
I don't know the 1st two, but I wouldn't use serif as fallback. People

that have set their font to sans-serif or even verdana will see it too
small. And Times New Roman is ugly. Maybe small caps instead of capitals
fot intro first words.

You don't have your links neither blue nor underlined. Your visited links
are same color as normal. http://www.cs.tut.fi/~jkorpela/www/links.html

I wouldn't use px for margins for P, since text size differs.

You could use inline elements for those cool lines, so it would look
better whitout CSS. Or not use images at all for line ends. Making black
transparent in images would be nice also.

Those dark grey backgrounded headings aren't marked up as headings, and
right one seems repetative.

--
Lauri Raittila <http://www.iki.fi/lr> <http://www.iki.fi/zwak/fonts>
Saapi lähettää meiliä, jos aihe ei liity ryhmään, tai on yksityinen
tjsp., mutta älä lähetä samaa viestiä meilitse ja ryhmään.

In article <3f32ff6d.33080377 (AT) news (DOT) uwaterloo.ca>, Duel of the Fetts
wrote:

Lauri Raittila <lauri (AT) raittila (DOT) cjb.net> stood before the Jedi Council
and stated:

I think there is quite a lot chrome, less than 50% of window for content.
I would get rid of "Copyright 2003" and "XHTML1". About the site image is
particularly hard to guess whitout hovering.

Oh, yes, the About the Site icon.

I had problem with one once myself

There's going to be a redundant text link.

That seems only way to make sure user can understand about the site link.
But it don't solve the problem of user not understanding about the site
icon unfortunately. It still needs to be hovered/followed to find out
what it is.

XHTML is just so I can validate it easier.

Ever thought about browser that has that function? Really handy.

|> font-family : book antiqua, new york, serif;
I don't know the 1st two, but I wouldn't use serif as fallback. People
that have set their font to sans-serif or even verdana will see it too
small. And Times New Roman is ugly.

What should I use as a fallback font?

Nothing.

Or just leave off serif and let the browser choose?

yep.

I wouldn't use px for margins for P, since text size differs.

I've had problems with percentage margins before. It's not a critical
issue, I just need a little bit of spacing between the side and the
words.

Use em for margins. % is as bad or worse than px in this situation.

You could use inline elements for those cool lines, so it would look
better whitout CSS.

What do you mean by inline elements?

span instead of div.

I'd like to get rid of the images
if there's no CSS, so I thought about making a background image and
putting it in the DIV. Is there another option?

Not really, and that option will luse links when user is not using images
but using CSS. There was discussion about this on Zen Garden thread.

Or not use images at all for line ends. Making black
transparent in images would be nice also.

I'd love to be able to do it, but there are too many shades in the
glowing portion to make them properly transparent.

I would prefer simple black to transparent to current, but that is
propbly personal preference. Too bad IE don't support png.

Those dark grey backgrounded headings aren't marked up as headings, and
right one seems repetative.

I ought to make them headings, but it makes them too big. I'm wary of
setting the font-size to something like medium because that's an
absolute judgment for the browser, and 1em means I have to make sure
it inherits sizes correctly. Is there a way to let the headings be the
same size?

Don't set font-size for any ancestor elements.

--
Lauri Raittila <http://www.iki.fi/lr> <http://www.iki.fi/zwak/fonts>
Saapi lähettää meiliä, jos aihe ei liity ryhmään, tai on yksityinen
tjsp., mutta älä lähetä samaa viestiä meilitse ja ryhmään.