[thelist] CSS layout changes

[John DeStefano]

Hi Max,

Thanks for your feedback.  Honestly, all I'm trying to do is rid this
site of its table-based layouts and create (what I thought was) a
rather simple CSS-based layout.  It just hasn't been working at any
turn.

What I'm trying to do:
HEADER:
- thin line of links at top
- thick, red "logo" strip, buffered at bottom by a very thin (2px) white line
- medium, maroon "page title" strip, with no bottom buffer
CONTENT (2-columns, centered, buffer on either side):
- left column: vertical strip containing "boxes" for login, news, features, etc.
- right column: page content
FOOTER:
- two thin strips of internal links, with a thin bottom buffer
- copyright

On this page, the "content" is a table of thumbnail images... I
wouldn't mind converting the table to a CSS layout eventually, but it
seems I have enough to worry about in just debugging the main layout.

My reason for declaring this page XHTML 1.1 Strict was simply because
another person on TheList who had helped me with the header of this
layout suggested doing so.  I have no problem at all with using
another DTD/namespace, so long as I can find a valid declaration for
it.

About clearing the left/right floats: I tried with the following
results, and things got really mucked up:
- remove "float: left;": right div appears correctly vertically, but
appears horizontally below the left div.
- remove "float: right;": right div appears directly on top of left div.
- the .clearfix hack outlined in Option 2 of reference [0]: same
result as "remove float: left;".

I've tried a number of times to fix the "invalid" elements that the
W3C validator, and the ones that remain all have to do with the LABEL
element... but the method I'm using syncs with all the references I've
found.  Maybe you will be able to pick out my error:
<label for="UserName">Email Address</label>
<input name="UserName" type="text" id="UserName" value="" /><br />

Perhaps the most frustrating part about all this: Dreamweaver's
preview shows the page almost precisely the way I'd like it to look.
Do you use DW for CSS-based layouts?  Are there any good alternatives
for WinXP systems?

Thanks for your help.
~John

---------- Forwarded message ----------
From: "Max Schwanekamp" <lists at neptunewebworks.com>
To: <thelist at lists.evolt.org>
Date: Tue, 18 Jul 2006 11:11:25 -0700
Subject: Re: [thelist] CSS layout changes
> From: John DeStefano
> I don't want to post a live link to a badly-designed page, so I hope a
> ZIP archive will do:
> http://deesto.memebot.com/redesign.zip

First things first: your XHTML does not validate.  Nor does your CSS.  Fix
that first, before anything else.  *Especially since you're using XHTML 1.1
Strict.  (Any particular reason for that? Your code doesn't look like XHTML
Strict)

[snip]
> > ago.  As you'll see in the attachment, there are a few problems that
> > jump out that I can't seem to figure out (although if you find
> > even more, and I'd be glad to hear about them as well):
> >
> > - In three places in the layout (top of page, between red and maroon
> > header stripe, between maroon stripe and main content), an unwanted,
> > horizontal, white buffer of about 30px is being inserted.

Default margins and padding on the P element you're using for your page
heading/logo. Your CSS gives #etvlogHeaderBannerMain a font-size xx-large.
Most (if not all) browsers will increase the line-height and default margins
to compensate, unless instructed otherwise.

> > - I've tried to set a 1px border around the main content
> (etvlogMain).In Firefox, this border does not display, but IE displays it.

It does show in FF, except it's collapsed.  You're using position: fixed on
#etvlogMainRight (oh, and #etvlogMainLeft).  IIRC, IE 6- doesn't support
that property properly, so you won't see the problem in that browser.  No
idea what you're trying to accomplish with that declaration, so maybe just
remove it and start over.  You have float: left on #etvlogMainLeft and
float:right on #etvlogMainRight, so is there anything to clear those floats
and compel the enclosing div's border *not* to collapse?  Either add a
[nonsemantic] clearing element[0] to clear the two floats, and/or un-float
one of them.

> > - In Firefox, the last of the set of five radio buttons
> comes out just
> > off-center; in IE, all the radio buttons appear centered.

Too many weird elements here, invalid XHTML and CSS, a big fat layout table
cluttering up the view...  I suggest you start with the above major issues
above first, and then move to little tweaky bits like this and the login
form.

[0] http://css-discuss.incutio.com/?page=ClearingSpace

--
Max Schwanekamp
http://www.neptunewebworks.com/