Subject: [css-d] Problem layouts

From: afternoon at uk2.net (Ben Godfrey)
Date: Mon, 28 Apr 2003 00:43:12 +0100

Hello,

I've been using CSS for a while now and I'm beginning to feel that it 
doesn't quite offer me the design toolbox I need. During almost every 
project I work on there is a period of hacking with CSS to get the 
desired results. While most of this is due to browser bugs, I think 
that in some situations CSS lacks design nous.

I think that one of the reasons that CSS layout is being adopted very 
slowly (1 major site to date) is because it doesn't make it easy to 
rebuild your pages in the new syntax. Of course it's mainly because of 
bad browsers and the continuing use of legacy browsers that's to blame.

I'm trying to put together a list of problem layouts that people often 
want to build but can't do so simply. The worst one is positioning a 
block element at the centre of the browser window. I know there are 
lots of ways to achieve or almost achieve the required effect, using 
100% tables, margin:auto; or other options, but these are non-trivial 
solutions and use syntax in ways it wasn't designed for.

If you have come across situations where CSS doesn't offer the 
expressiveness you feel it should, please let me know either on- or 
off-list.

I apologise if you are also a member of www-style and have received 
this request twice.

Thanks,

Ben

(q)	Ben Godfrey?
(a)	Web Developer and Designer
	See http://aftnn.org/ for details

---

From: ckestes at bewb.org (Jason Estes)
Date: Sun, 27 Apr 2003 21:14:58 -0500

> solutions and use syntax in ways it wasn't designed for.

While I'm sure that you are about to get flamed by people, and rightly
so, I just want to address one part of your position.

You stated in you thread above that margin:auto, was a non-trivial
solution that uses syntax in ways it wasn't designed for.

The CSS1 Spec specifically says :

"Otherwise, if both 'margin-left' and 'margin-right' are 'auto', they
will be set to equal values. This will center the element inside its
parent. "

Which means that it is exactly what it is intended to do, and with /2/
lines of code which could be simplified to /one/ line of code.  You set
margin-left and margin-right to auto and it centers and that's how that
is accomplished.  If you are using other methods, then you are the one
doing it wrong not CSS.  That's "non-trivial"?...seems pretty simple
enough to me.

On another note, I find that my development efforts have been twice as
easy as in traditional table layouts, and that most 'hacks' can be
avoided in many if not all circumstances by using a wee bit more code in
your code.  You can review my "To hack or not to Hack" at
http://www.bewb.org/archiveposts.asp?id=11, to read why.

I feel (as the Lead Creative Artists and Lead Interface Developer for
the company I work for) that I have much more freedom in design than
when I was faced with supporting legacy browsers.  I have intentionally
stepped up my designs because I know that with the power of CSS and
XHTML, I can produce more vivid content in a more beatiful manner, all
while providing consistent renderings and with less code than ever
thought possible.

On one last note (and I said I was only addressing one point), there are
quite a few "major" sites adopting CSS layouts.  

To name a few:
http://www.cingular.com 
http://www.search.yahoo.com 
http://www.pga.com 
http://www.wired.com 
http://www.espn.com

Well anyway, I haven't found that there has been anything that I wanted
to create and couldn't because of the limitations of CSS and XHTML.  And
with the additional support of CSS2 and then CSS3, we'll have even more
to work with, and I for one can't wait!

Good luck to ya'

Jason Estes
The BEWB
www.bewb.org