Page 1 of 2

CSS

Posted: Tue May 23, 2006 3:54 pm
by alex.barylski
I am still trying to convinve myself that CSS is the way to go...

After many lengthly debates and loosing battles defending TABLES over CSS...

I can clearly see why CSS is better, but I have one nagging problem...

CSS designs never seem to be a *fluid* or *liduid* or *dynamic* as table based layouts...

Take at look at: http://www.csszengarden.com/

When I resize horizontally...the layouts start to jumble up...

For instance, that little red hut at the far right when I resize to something smaller...ends up becomming misaligned with the "Select a design" text below it...

I seriously truely hate that...so much to the point...I would stick with TABLES just because...further making the web non-accessable to some :P

Everything else about CSS makes total sense to me and I'd be completely sold on the idea if it were possible to create scalable designs using CSS...

but when I read articles, visit CSS advocacy sites, etc...I always test that scaling issue...

I resize horizontally and check if the menu bar breaks onto new lines...if columnar designs become misaligned, etc...

I just want a design that renders perfectly on at least IE and FF and with tables...I know I can do that...

Also I hate when designs don't scale larger than default browser windows...

for instance...you load up a page...and everything looks wicked, as the menubar fills the width of the screen, with the last menu item being a percentage based DIV and the 3 columns below fit the screen nicely (left=navigation, center=content, right=news feeds, etc)

Then you navigate to some page edited by a WYSIWYG editor and the PRE tag causes text to go on horizontally pushing the browser to horizontal scroll mode

When I scroll right to read the content, the menubar doesn't extend to the very end, but rather only fits the current browser window...

I know this can be an issue in TABLE layouts as well and is corrected by using a single container TD or DIV and setting it's width to 100%

Can this be accomplished in CSS???

Also the vertical alignment of TABLE's using valign="center"

I often find that handy when I am displaying error messages, etc or psuedo dialog boxes...

Using CSS I haven't been able to figure out a way to center a dialog box without going the javascript way and centering the window within it's parent container...

Just curious to your thoughts on the subject :)

Cheers :)

Posted: Tue May 23, 2006 4:14 pm
by RobertGonzalez
Fluidity is hard to achieve BOTH horizontally and vertically. Even more so when tested against resizing to odd shapes. Designs I thought were fluid absolutely puke when the window is sized to a really small ratio. But for the most part, when I design, I do it with the assumption that the largest portion of the users of my designs will more than likely be at 800X600 or better. Not all will be, I know that much, but most will be. As long as I am reaching the largest base of potential users.

As for the vertical-align absence... I usually set the padding-top and padding-bottom to a fixed, equal value so simulate what the effect of vertical alignment. I use the same technique with centering block-level elements within a div/p tag. Set the left and right margins to auto and voila, centered!

Posted: Tue May 23, 2006 6:19 pm
by alex.barylski
You know...the more I read on CSS...the more I'm finding that CSS isn't exactly cross browser either...

3 columns CSS on one browser chokes on the other...

There seem to be more inconsistencies when using CSS for advanced layouts then when using tried and tested tables...

Sure CSS layouts cut down on file size...but jesus...talk about "this CSS hack works on IE, but not in FF, so we can use this method to circumvent the inline issue with Opera"

I'm so up in the air right now...first I thought I would forsure go with CSS...then I try some code in IE and FF...totally pukes...neither do what I want...

Tables at least I know render exactly how I expect in both IE and FF and it's technology I know :P

Not sure how tables render on PDA's or with screen readers, etc...

But the more I play with CSS...the more I'm thinking I'll keep using tables...or switch my designs to fixed sizes...but I really dont' like that idea...

I suppose I could use 2 different CSS files, one for 800x600 and another for 1280xwhatever and so on... :P

Using fixed sizes would make things a heck of alot easier...and in would actually has a positive effect on rendering times...

But I can't say I like the idea very much...although that likely maximizes the number of browsers a web site can be displayed on...as fixed HTML elements are fairly easy to render...

Hmmmm...never really though of that before...

Anyone have any examples of fixed CSS designs for multiple resolutions so I can see how each might look and why???

Cheers :)

Posted: Tue May 23, 2006 6:28 pm
by alex.barylski
While..............I'll be a monkey's uncle :P

I switch to fixed layout and BAM!!!

My designs now work exactly the same in both IE and FF :P

Posted: Tue May 23, 2006 7:17 pm
by alex.barylski
Does anyone know if CSS has any future plans to support calculations on it's values...

For instance:

Code: Select all

height: (100% - 23px)
Something like that would be really handy :)

Posted: Tue May 23, 2006 7:19 pm
by John Cartwright
Hockey wrote:Does anyone know if CSS has any future plans to support calculations on it's values...

For instance:

Code: Select all

height: (100% - 23px)
Something like that would be really handy :)
why not margin: 23px; ?

Posted: Tue May 23, 2006 8:30 pm
by alex.barylski
Jcart wrote:
Hockey wrote:Does anyone know if CSS has any future plans to support calculations on it's values...

For instance:

Code: Select all

height: (100% - 23px)
Something like that would be really handy :)
why not margin: 23px; ?
Interesting...although I admit I'm not sure I fully understand :P

I have a DIV which is 25 pixels in height and I want it aligned at the bottom of my page

Code: Select all

<div id="body_container">
        <div style="background-color: white">
          Some content text
        </div>

        <div id="footer">
          Some footer text :)
        </div>
      </div>
I need footer, which is 25 pixels in height to be pushed to the bottom of the page, regardless of content stored in body_container - body_conatiner when height is set to 100% it pushes the footer passed the area where it should...

Thus the 100% - 25px :)

Posted: Tue May 23, 2006 9:56 pm
by themurph
I generally stick to fixed sizes myself.

By the way... why not use css AND tables??!?!

Posted: Tue May 23, 2006 10:05 pm
by Benjamin
Look at http://www.oswd.org/ for some great layout ideas.

Posted: Tue May 23, 2006 10:33 pm
by Christopher
I try to stay away from height: and width: unless I really want a thing to be an absolute size. I have found that CSS works best of I focus on margins and padding instead.

I really wish there were some good, open source, programmer focused tools for building web pages with CSS. I think the Firefox Web Developer tools probably come the closest. Nvu comes close but seems to alwaays muck up the styles with its own stuff at some point. I have been thinking of building a web based one.

Posted: Tue May 23, 2006 10:41 pm
by RobertGonzalez
themurph wrote:I generally stick to fixed sizes myself.

By the way... why not use css AND tables??!?!
As I have moved from table based layouts to CSS layouts I have found that tables are an excellent design element... when used for displaying tabular data. Tables render in the browser in rows and cells. The deeper they go the more rendering that needs to take place. I hade a table based design (one that I am currently redeveloping) that would absolutely fart when the server didn't move fast enough. It was absolutely awful.

CSS layouts seems to load faster and are cleaner in my opinion. There are a few things that need to be addressed with the concept (IMO consistency in comliance models for browsers is the hottest topic), but overall, almost anything that can be done with a table layout can be done with CSS and render the way you want. And, for people that disable CSS or for PDA browser, etc, they render a lot nicer. Try viewing a five nested table layout on a TREO 650. It looks like crud.
agtlewis wrote:Look at http://www.oswd.org/ for some great layout ideas.
http://www.opensourcewebdesign.org is another, closely similar, site that offers some freaking gnarly designs. A few that I have modded for my own use. :wink:

Posted: Wed May 24, 2006 2:02 pm
by alvinphp
CSS and Tables do not need to compete, they can work together and you can create great things with them together. It is like Darwin and God, they can co-exist! Tables are for holding tabular data while CSS is for your design. Though you can force yourself to do one or the other, IMHO, using both is the most efficient.

Posted: Wed May 24, 2006 6:31 pm
by RobertGonzalez
I totally agree with you. I think there is a place for every design element (else, why would they have been created? :? ). But once I got a feel for how markup and design were separated (and after seeing how XML and XSLT interact), there was no way that I would be able to make a layout that was wrapped inside of a bunch of table cells. It just seems so dirty to me.

Posted: Wed May 24, 2006 6:38 pm
by Chris Corbyn
Hockey wrote:Does anyone know if CSS has any future plans to support calculations on it's values...
I've been wondering this although I've never looked into it. I've often thought it would be useful if I could have 25% width less 4 pixels or something.

Posted: Wed May 24, 2006 10:10 pm
by nielsene
I'd suggest spending some time over at alistapart.com (site seems to be down right now). They have several good articles that I feel let you make good fluid/dynamic CSS based sites. If the site wasn't down, I'd find my favorite links, but look for "Sliding Doors" for a nice technique that you can apply to a lot of areas (besides the tabs that they show it with), along with the one on fluid design using negative margins. I've had fun using their fluid trick to make pages that resize well in both vertical and horizontal directions and font sizes along. I'd show my currect page, but it has other problems right now...