[thelist] CSS layout changes

Max Schwanekamp lists at neptunewebworks.com
Tue Jul 18 13:11:25 CDT 2006


> 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/





More information about the thelist mailing list