CSS

Ye' old general discussion board. Basically, for everything that isn't covered elsewhere. Come here to shoot the breeze, shoot your mouth off, or whatever suits your fancy.
This forum is not for asking programming related questions.

Moderator: General Moderators

alex.barylski
DevNet Evangelist
Posts: 6267
Joined: Tue Dec 21, 2004 5:00 pm
Location: Winnipeg

CSS

Post 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 :)
User avatar
RobertGonzalez
Site Administrator
Posts: 14293
Joined: Tue Sep 09, 2003 6:04 pm
Location: Fremont, CA, USA

Post 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!
alex.barylski
DevNet Evangelist
Posts: 6267
Joined: Tue Dec 21, 2004 5:00 pm
Location: Winnipeg

Post 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 :)
alex.barylski
DevNet Evangelist
Posts: 6267
Joined: Tue Dec 21, 2004 5:00 pm
Location: Winnipeg

Post 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
alex.barylski
DevNet Evangelist
Posts: 6267
Joined: Tue Dec 21, 2004 5:00 pm
Location: Winnipeg

Post 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 :)
User avatar
John Cartwright
Site Admin
Posts: 11470
Joined: Tue Dec 23, 2003 2:10 am
Location: Toronto
Contact:

Post 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; ?
alex.barylski
DevNet Evangelist
Posts: 6267
Joined: Tue Dec 21, 2004 5:00 pm
Location: Winnipeg

Post 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 :)
User avatar
themurph
Forum Commoner
Posts: 76
Joined: Wed Apr 19, 2006 1:56 pm
Contact:

Post by themurph »

I generally stick to fixed sizes myself.

By the way... why not use css AND tables??!?!
User avatar
Benjamin
Site Administrator
Posts: 6935
Joined: Sun May 19, 2002 10:24 pm

Post by Benjamin »

Look at http://www.oswd.org/ for some great layout ideas.
User avatar
Christopher
Site Administrator
Posts: 13596
Joined: Wed Aug 25, 2004 7:54 pm
Location: New York, NY, US

Post 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.
(#10850)
User avatar
RobertGonzalez
Site Administrator
Posts: 14293
Joined: Tue Sep 09, 2003 6:04 pm
Location: Fremont, CA, USA

Post 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:
alvinphp
Forum Contributor
Posts: 380
Joined: Wed Sep 21, 2005 11:47 am

Post 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.
Last edited by alvinphp on Thu May 25, 2006 2:55 am, edited 1 time in total.
User avatar
RobertGonzalez
Site Administrator
Posts: 14293
Joined: Tue Sep 09, 2003 6:04 pm
Location: Fremont, CA, USA

Post 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.
User avatar
Chris Corbyn
Breakbeat Nuttzer
Posts: 13098
Joined: Wed Mar 24, 2004 7:57 am
Location: Melbourne, Australia

Post 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.
User avatar
nielsene
DevNet Resident
Posts: 1834
Joined: Fri Aug 16, 2002 8:57 am
Location: Watertown, MA

Post 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...
Post Reply