Forum Moderators: not2easy

Message Too Old, No Replies

Making the move to CSS.

Confessions of a table-formatter

         

bonanza

6:25 pm on May 17, 2003 (gmt 0)



I'm a longtime table-formatter and I'm sick and tired of my own unreadable code and trying to figure out what the hell I myself did three months ago when I created that nice page layout. Tables inside tables inside tables so I get a pretty line around them. Sprinkle in PHP code and I just can't take it any more. ;)

Seriously, I've been quietly reading this CSS forum. The recent CSS vs. Table layout thread really hit home and got me thinking. The beveled button discussion got me pumped to learn something new.

So I'm ready to take the plunge. Where's the blue pill? I don't want to go back.

I'm starting on a new site right now, so this is a great time. I'm still having a tough time imagining layout though without the rigid unmoving zones of a table, but I think I'm getting there.

I'm a little overwhelmed though, and still a bit scared ;). I've become good enough with tables that I rarely even bother to test on different browsers. I can sit down and crank out a layout in tables almost unconsiously (but can't maintain it later, of course).
So where to?

What tools/resources do you guys use?
A CSS editor?
What browsers (IE6, Netscape 7, Opera 7)? Older ones?
What's the authorative CSS reference? W3? Some other site?
Is there a book that is the CSS bible?

Thanks for your advice. I'll pitch camp here for a while.

pageoneresults

6:32 pm on May 17, 2003 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



Hello bonanza, I think a really good place to start on your css journey would be this forums library...

CSS Library [webmasterworld.com]

I think you'll find almost everything you'll need in the library. If you have any questions concerning those library items, you can post them here in the CSS Forum.

Good luck and welcome to the edge of the fence.

bonanza

7:42 pm on May 17, 2003 (gmt 0)



Thanks. Right under my nose.

grahamstewart

11:37 am on May 18, 2003 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Editor: I use TextPad for pretty much all my work. Its a good clean text editor with a nice uncluttered interface but plenty of powerful features (like RegEx search and replace).

Testing: IE6, NN7, Opera7. I also nip out to a library or cybercafe every now and then so I can fix the IE5 box model problems. But I'm in the fortunate position that I have convinced my current clients that its pointless to worry too much about stone age browsers.

Authorative reference: I keep downloaded versions of the complete CSS and HTML4.01 specs on my machine. To make them a bit more useful as a reference I add a quick reference frame (in the style of Eric Myers handy reference [meyerweb.com])

Having them offline means I can happily churn out code when I can't get online (like on trains and planes or when I'm lazing in the garden enjoying the sun).

bonanza

2:42 pm on May 18, 2003 (gmt 0)



Yesterday I read most of the CSS2 spec (much to the chagrin of my family!).

I've been using stylesheets for years to format fonts, table cells, etc. but I never really understood what it was all about until now (though I thought I did.)

My homepage is converted. Several boxes with borders but not a single table in sight. And I have a new appreciation for lists.

I've also decided to design this site with em font sizes to let people control the font themselves. It's a whole new game.

thanks guys.

buckworks

3:42 pm on May 18, 2003 (gmt 0)

WebmasterWorld Administrator 10+ Year Member Top Contributors Of The Month



Call me a weenie ... I have moved to CSS 100% for formatting, but only partly for positioning. I can't bring myself to let go of tables completely because they behave so much more reliably across browsers.

Oaf357

9:35 pm on May 18, 2003 (gmt 0)

10+ Year Member



This is something I've been pushing back and forth in my head and the killer is vertical positioning.

I want to keep the exact same layout but CSS does not allow me to put a box below a box without contemplating pixels.

If it were possible I would do it but it isn't.

grahamstewart

10:26 pm on May 18, 2003 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



..CSS does not allow me to put a box below a box without contemplating pixels
If it were possible I would do it but it isn't.

Solution 1:


<div id="one"></div>
<div id="two"></div>

Without any absolute positioning #two will appear below #one.

Solution 2:

Use absolute positioning with percentages instead of pixels. i.e.


<div style="position:absolute;top:20%;height:30%"></div>
<div style="position:absolute;top:50%"></div>

Oaf357

10:55 pm on May 18, 2003 (gmt 0)

10+ Year Member



But when the percentages constantly change from one page to the next dependent upon amount of content within the page it tends to create a VERY bloated stylesheet.

Nick_W

10:58 pm on May 18, 2003 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



>> VERY bloated stylesheet.

Sounds like bad design. ;)

Nick

Oaf357

11:02 pm on May 18, 2003 (gmt 0)

10+ Year Member



Great design... with tables.

Can't be redesigned to look the same with CSS (AFAIK).

grahamstewart

5:20 pm on May 19, 2003 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Well if the heights change then you can use solution one surely?

Oaf357

9:49 pm on May 19, 2003 (gmt 0)

10+ Year Member



Then I run into a few problems here and there. Mainly with positioning of text (navigation links). I guess I just need to get a test page up and fiddle but I'd need a very quick and dirty reference too.

grahamstewart

11:02 pm on May 19, 2003 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



What kind of problems?

Describe the layout you require and I'll tell you roughly how I'd do it in CSS without tables.

The only layout style that has real problems is getting a footer that appears at the bottom of the window or the bottom of the page (if the page is bigger than the window). And this is due to poor support for useful CSS properties like min-height (otherwise it would be easy).

grahamstewart

11:06 pm on May 19, 2003 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Ahh. I see you have just done that in [webmasterworld.com...] .. okay - I'll answer there.