Does CSS suck, or do I? (O_o;)

[gammamonk]

I've run a photo website for about 3 years. Just my personal pics. I have a cool calander setup where you can click a day and get a bigger pic with comments. Everything works fine. I made it my designing in dreamweaver and then adding in dynamic stuff with php.

However, basically the only comment people I don't know send me about my website is that I use tables and therefore am a n00b.

It's true, changing a theme would be a major ordeal, as would using different image sizes. So I've been looking into replacing a lot of stuff with CSS. So here's my question: Do you think CSS sucks? I do. I can't do anything without using hacks so it works in different browsers. I have to hard-set widths and heights everywhere, which takes away the flexibility CSS is rumored to give you. I can't do what I want.

I attached my new Photoshop design. This is what I want. Can CSS do it? I want to be able to release this design to the public and with a quick background picture change and a color theme change, you'd have a nice personal look. And lets assume I don't want to hard-set the pics to 800x600, but whatever the user feels is appropriate.

 

[angelneo]

Frankly speaking, CSS does create a lot more work for me especially when supporting different OS and browsers, it's really a pain with so many standards going around. But this being said, I think CSS allows for more flexibility and functionality. If I am looking for a stable and simple layout, I would definitely use tables, I wouldn't care less if people start labeling me n00b. If I am doing a complicated layout e.g includes moving layers, hidden components so on, I will try my hand on CSS.

 

[WiscoInYoko]

YES! I, have company.

I'm a total beginner at this stuff. I made my first site a couple days ago( www.lannadancer.com ) based off what I could pick up in a few hours from online tutorials. I thought I did OK. It is a simple, but clean site. The main feature of the site is a photo gallery that displays 21 thumbnails and if you click on any of them it displays the image in a full page, and you can navigate between the full images without having to go back to the main gallery. Nothing revolutionary, but it was a little complex to work out the code for all the pages. I used a little CSS for making font types, but not for the layout.

One of the first bits of feedback I got was to ditch the tables and go with CSS ASAP.

So, I thought, OK, I can figure this out. I redid a bunch of code and PRESTO! I had a nice-looking layout on my gallery page done all in CSS .....................






...........when viewed in Safari.

Then I took a look at it in Firefox, and it sucked!
I don't know what I was doing wrong, but the code had no effect at all on the position of the page's elements. For some reason my 3 columns of thumbnails decided they would rather be just 1 long column running down the middle of the page. It was well-centered, but looked terrible for a page that's supposed to show a bunch of photos at once. When I tried to change it, all I did was mess up the symetry the Safari-displayed version aleady had. So I decided to throw in the towel and just keep the old html tables I had in the first place. It looks fine to me, but then again I don't have Explorer, so who knows.

 

[mnkeybsness]

However, basically the only comment people I don't know send me about my website is that I use tables and therefore am a n00b.

That's common for people to do. The thing that they don't realize is that many people are and have been making a lot of money doing table-based design for years, and will continue to make money off of it for years to come. I'm sorry that people are jerks and call you a "n00b" for using tables... but then again, everyone has to start somewhere...

Do you think CSS sucks? I do. I can't do anything without using hacks so it works in different browsers. I have to hard-set widths and heights everywhere, which takes away the flexibility CSS is rumored to give you. I can't do what I want.

No, I don't think it does. Understanding how to use CSS is a completely different ballgame than using tables. It is also difficult to do complex things and have all browsers render them the same. It takes some time to learn (as does almost anything else), but once anyone that I've seen turned to non-table-based design with only CSS, has not turned back.

Can CSS do it? I want to be able to release this design to the public and with a quick background picture change and a color theme change, you'd have a nice personal look. And lets assume I don't want to hard-set the pics to 800x600, but whatever the user feels is appropriate.

Yes, it can. If your images were a standard width and height, it would be incredibly simple for someone to do in about 10 minutes. If by "hard-set", you mean non-standardized image size, ie ability to change them, then it becomes more difficult in the sense that you will really need to manipulate that border you are using for the images to be able to look good around any size image.

 

[Butters]

Up until my very latest design I've been using either entirely table based layouts or a mixture of tables and css and I always thought they looked fine to be fair (example) although some of the styles in that site are defined by css the layout is constructed with tables and really it's not bad and it renders the same in all browsers.

But I've now decided to transition fully to css (example) now this site took a lot longer to make, was more complex and would often render completely differently in browsers during construction.. But it's done now, it's entirely CSS and most importantly It's made me proud!

My point? CSS doesn't suck it just takes more work and in return gives you more flexibility. If you can't hack css my advice is to just not worry and continue using tables until you feel comfortable enough with css to switch. (as I've done)

 

[floyde]

Do you think CSS sucks? I do.

It definately sucks when you are learning how to use it. You will run into a lot of compatibility issues, especially with Internet Explorer (but other browsers have issues as well). However, once you start gaining experience you'll probably work much faster than you did with tables (I know I do ).

So my advice to you is this: keep it as simple as possible, if you are using nested divs upon nested divs where you could've used just one element, then it is likely that some browser will mess up your layout. Also, if you have compatibility issues, don't use hacks! Everything can be done in at least two different (correct) ways, so try a different approach instead of using hacks. (There are exceptions to this rule)

P.S. If you can afford to not support older browsers, by all means, do so. It will save you a lot of time/headaches. That doesn't mean you won't let those browsers access your content, but they wont access your style (because they simply can't get it right!). So you could try hiding your stylesheet from them.

 

[WiscoInYoko]

So what DOES work in Firefox

Since Firefox was the browser giving me so much trouble, I'm just wondering what will work in it. Specifically, how would you go about positioning a division about 1/4 of the way from the left of the page that contained images and text below which are centered on the center of the image?

 

[Doctor Q]

I tried switching a web page from tables to css, partly for the challenge of learning to do it "properly" and partly because I thought it would make me more powerful (able to make major changes to the page with a flick of my stylesheet).

It was rather painful getting it to work and involved some trial and error. Some tables had to remain; I just couldn't get css to do what I wanted. But the end result was indeed a page with cleaner code, and I could then make adjustments in the stylesheet that would have been much harder with a table-based layout full of nested tables, spacer gifs, and empty cells.

 

[MrSugar]

CSS is extremely powerful, and once you have a set of styles and snippets it becomes extremely fast to develop in.

The fact I can completely re-design websites without ever touching the code is simply stunning, and something that just isn't possible with tables.

Although it has somewhat of a learning curve, once you start to really "get" css it becomes increasingly intuitive and things make perfect sense.

Any design is possible with CSS, but any devote CSS / XHTML coder would argue that it's not about making sites look perfectly like the mock-up. Rather it is about utilizing the most semantic code to achieve the best possible balance between beauty and usability.

 

[bigandy]

i'm just climbing up the ladder, but i still hate it. to me it makes as much sense as my girlfriend does when she speaks in her native tongue (Polish), and it never seems to do what i damn well want it to. i wish there was one of these for CSS...

 

[Bern]

I'm half and half about the effectiveness of CSS. I used a table to create a banner containing two separate GIF images. Basically as:-

<table>
<td bg color="#000000 valign="top"><img src.......></td>
<td bgcolor=#000000 valign="center"><img src.......></td>
</table>

It worked effectively, but I decided I'd use CSS and DIVs to perform the same task instead. Thus:-

#imageleft {float: left; margin: 1px; padding: 0px;}
#image {float: left; margin-left: 30px; padding: 0px;}
</head>
<body>
<div id="imageleft"><IMG SRC=".............." alt="blah blah"></div>
<div id="image"><IMG SRC="..............." alt="blah blah"></div>

The DIV scenario looks perfect in IE but was all over the place in Safari, whereas the table scenario looked fine in both.

So <table> seems to be the best alternative, unless I totally screwed the DIV

 

[mnkeybsness]

#imageleft {float: left; margin: 1px; padding: 0px;}
#image {float: left; margin-left: 30px; padding: 0px;}
</head>
<body>
<div id="imageleft"><IMG SRC=".............." alt="blah blah"></div>
<div id="image"><IMG SRC="..............." alt="blah blah"></div>

The DIV scenario looks perfect in IE but was all over the place in Safari, whereas the table scenario looked fine in both.

There are many rules to CSS, this is a good example of where you must learn them. A floating object must have a defined width. A better way to do this might be this...

div#header { height: 50px; } /* height of your images! */
div#header img { float: left; width: auto; margin: 1px; }
div#header img.img2 { margin-left: 30px; }

<div id="header">
<img src="" alt="" />
<img class="img2" src="" alt="" />
</div>

 

[bigandy]

thanks for having that little conversation there, that actually makes some sense to me!

 

[caveman_uk]

The DIV scenario looks perfect in IE but was all over the place in Safari, whereas the table scenario looked fine in both.

Is this the dreaded CSS 'box model' problem again? Basically CSS defines padding and margins one way (and that's the way Safari renders it). IE actual got the box model wrong so it's not actually compliant with the CSS specs. IMO IE's way of doing it makes more sense but that doesn't stop it being wrong.

 

[gammamonk]

I'm making some progress on the design. I have the background correct, the three overlapping pictures correct (sans drop shadow). If someone a little more experienced than myself could indulge me, how can I make the 'comment' box in my posted design? Let's just give up on dynamic width and say it's 900 px wide. How can I make a nice box with an appropriate height around some text?

I really appreciate everyone's comments. I can't seem to break into a real level of understanding with CSS. Html makes sense, and php makes sense. But CSS to me is just bizarre.

 

[c-Row]

This isn't exactly what you were asking for, but in my opinion, CSS works best in combination with some script language like PHP where you could create (or overwrite) widths and heights of elements on the fly by using variables in your '... style="..."...' tags.

Of course, this would mean you had to learn another language again, unless you already know it of course.

Personally, I love the things I can do with CSS. You complain about all the hacks you have to apply to make everything look fine in all modern browsers. However, there are endless possibilities and features you can create with a short snippet of code whereas HTML tables are a pain in the neck to use.

For a good example of what you can do with CSS, check out http://www.csszengarden.com - it's the same website over and over again with every version using a different stylesheet.


Oh, and some of my own CSS'ed websites - http://www.klf.de / http://www.binemusic.com

 

[Bern]

There are many rules to CSS, this is a good example of where you must learn them. A floating object must have a defined width. A better way to do this might be this...

div#header { height: 50px; } /* height of your images! */
div#header img { float: left; width: auto; margin: 1px; }
div#header img.img2 { margin-left: 30px; }

<div id="header">
<img src="" alt="" />
<img class="img2" src="" alt="" />
</div>

Hey, thanks for that little snippet of information.

 

[montom]

HTML -> quick to set up, pain to maintain
HTML + CSS -> pain to set up, quick to maintain

You won't be good with CSS until you have learned both the mechanical and intuitive side of it. Mechanical to get something up, intuitive to get it working.

If you know some college math, HTML is like differentiation, CSS + HTML like integration. Differentiation is straightforward, just apply your standard methods and you're done. Integration is a b*tch because often there is no straightforward way and special tricks must be used in special situations, and it's partly intuitive figuring out what trick to use and how.

But, anything done with tables can be done via CSS but not vice versa. In the long run, CSS lets you make nicer looking web-pages. I've done about ten CSS/HTML/Textpattern sites so far. Textpattern is a content management system with its own tags, another challenge on top of CSS but even easier then to maintain once all set up and debugged.

So yes, CSS sucks to learn and compatibility issues between browsers causes half the time spent on the site applied towards debugging. But plain HTML sucks to look at and maintain, and isn't as flexible nor will it allow you to do certain precise formatting.

Basically there's the Dreamweaver+HTML/Tables crowd of designers, and CSS/HTML/CMS/PHP crowd of designers. Among other crowds. I'm of the latter and do my all coding by hand. My only advice is, consider CSS like a boot camp...know that depressing struggle in the beginning will turn to semi-easy-fun once you finally get some intuitive handling of it all.

 

[celebrian23]

CSS is not fun to learn at all. I remember when I was first learning it, and it was just so frustrating. Nothing turned out how I wanted it too. I would spend ages trying to change things that appeared simple. So yes, the learning curve is high, but once you understand CSS, you'll understand why it is so powerful. For me, it really opened up a lot of possibilities. I'll never go back to only html. Something can look awesome in html, but if you see that page converted to css, you'll see how much more awesome it can be. Like montom, I do all my coding by hand. It's always worth the effort in the end.

 

[londonweb]

For me the greatest advantage of CSS is the ability to change things site-wide in a few seconds. By referencing your style sheet from the head of each page, you can change for instance the background colour of every page in your site simply by altering your style sheet.

I've read several books and articles that advocate the use of tables and CSS in combination, and I've always found this to be the best approach.

There's nothing wrong with tables and I find it's usually people who don't really know what they're talking about that criticise the use of tables, frames, flash elements etc. They all have a purpose and work well when applied appropriately.

Problem is that these days everyone's a web designer...

 

[radiantm3]

HTML -> quick to set up, pain to maintain
HTML + CSS -> pain to set up, quick to maintain

I find the opposite true. CSS = quick to setup AND maintain. Once you feel at home with css and know most of the pitfalls, it's a joy to build sites and pretty fast as well.

 

[radiantm3]

For me the greatest advantage of CSS is the ability to change things site-wide in a few seconds. By referencing your style sheet from the head of each page, you can change for instance the background colour of every page in your site simply by altering your style sheet.

I've read several books and articles that advocate the use of tables and CSS in combination, and I've always found this to be the best approach.

There's nothing wrong with tables and I find it's usually people who don't really know what they're talking about that criticise the use of tables, frames, flash elements etc. They all have a purpose and work well when applied appropriately.

Problem is that these days everyone's a web designer...

There's nothing wrong with tables when it's used for holding data. It's arguably bad when you use tables for layout purposes. It's not very semantic, and it leaves less room for modifying the layout in css. If you create a 2 column layout with tables, it's a pain if you want to swap the columns with each other. If you create it in css, switching them is just a float away. I see tables for layout as a crutch (ie quick fix), for a problem that could be solved better with css.

 

[pingin]

sometimes, you can't beat a good book

However, basically the only comment people I don't know send me about my website is that I use tables and therefore am a n00b.

They're the ones who sound like the noobs to me (my guess is that most of them have been hardcore css/xhtml zealots for -- oh -- all of three weeks ). Next time just remind them that many of the biggest sites use tables and hybrid layout (or tell them if they want to go sniffing around in the source html, to take a look at google.com's home page).

But I would agree with most of the other people here -- I think css is definitely the way forward and once you get the hang of it is is surprisingly easy to layout pages. You just need to know a few well-published tricks to hack feed non-compliant browsers, but that is no different from html.

The best thing you can do is get your hand on a good book. I can recommend either of these:

Bulletproof Web Design : Improving flexibility and protecting against worst-case scenarios with XHTML and CSS (Paperback)
by Dan Cederholm
It's a great primer and it even has a nice chapter on laying out photos pages -- I'm sure it will inspire you.


Designing with Web Standards (2nd Edition) (Paperback)
by Jeffrey Zeldman
This book is a bit of a bible for many designers. I've never read it cover to cover, but dip into it at work and its great. Make sure to get the second edition which is apparently substantially updated since the first edition.

Hope that helps a little.

 

[Doctor Q]

Designing with Web Standards (2nd Edition) (Paperback)
by Jeffrey Zeldman
This book is a bit of a bible for many designers. I've never read it cover to cover, but dip into it at work and its great. Make sure to get the second edition which is apparently substantially updated since the first edition.

One of the CSS chapters is available as a free sample (PDF download).

 

[gammamonk]

Hey everybody-- Thanks for all the input. I'm getting closer to what I want. Here's another question for you tho. What screen size should I assume people have? I've been thinking 1024x768 is probably pretty safe.

Do you think 800x600 pics are too big? Let's say each pic is 100k; so 300k+ is going to take what, 20 seconds on a modem. My grandparents are on a modem (out in the countryside), so I want it to be modem friendly.

What's the longest you would wait for a picture to load on a photo website?