I’ve started working on the website for a non-profit group I belong to. (Note: I don’t do this for a living.) I chose a free webtemplate from oswd.org because what I knew about CSS could fit in a thimble. But now I’m getting more comfortable with it and starting to do some CSS myself.
The free webtemplate I chose had styles for many types of content, but one of the things missing was a style for a picture with the caption centered under it. In the past (on my small personal websites) I would use HTML tables for this, but all the purist websites are telling me that using tables for page layout is evil and not to be even thought of.
So I do a Google search for CSS picture caption. One of the first things that people deplore is that even the newest HTML specifications do not include anything about picture captions. WTF!!! Isn’t that one of the most elementary things you would do when making up a page that mixes pictures and text?
Then this one website shows how to do it with CSS ( http://www.cs.tut.fi/~jkorpela/www/captions.html ) so I try his method. Works fine on my machine at home! Woohoo! (Since I don’t know what the hell I’m doing it took me about half an hour to add this to my existing CSS files so that it would look right, but woohoo!) Looks fine at home on my Mac in Opera, Safari, Firefox.
Then I go to work to try it on Windows. Looks fine in Opera, Chrome, Safari, Firefox. Now the true test: Internet Explorer 6.
###@#@#@##@!!! Pictures are all over the page, captions are vertical next to the picture instead of under the picture, ##@!@##@$!!
I am about to open the airplane-size bottle of Bacardi Rum that’s sitting on my desk.
You should be pitting these “purists” who are trying to make you feel like a bad person for considering tables. I can never understand the mindset of having to jump through hoops and doing all sorts of CSS hacking to make something work when the easier, safer option is just plain old HTML.
Once you can get over the guilt you can get on with your life and be happy.
There’s good debate from both sides, but in the end, just do what you want (and feel comfortable with). Using tables won’t make you a Very Bad Person, and in the end, the user probably isn’t going to care how you do it.
The purists would have a good argument if CSS actually worked worth a damn for layout, but it doesn’t.
However, you should use CSS for what it’s good for: separating styles from the content. So don’t use things like <font> tags and hardcoded colors and so forth.
I do web development for a living (wouldn’t call myself a ‘web designer’, but more often than not I’m forced into that role). Every so often, I will attempt to do a ‘proper’ layout without tables. And every single time I’m driven back to tables.
In my experience, table-free layouts do make the HTML itself look nicer, and it isn’t too hard to get it looking right in a single browser at a single resolution with static text. But as soon as you resize the browser window, or make one of the lines of text a little longer, all hell breaks loose. And don’t even think about adding another browser into the mix! I might spend a few hours hacking with the table-free layout to get it to work properly, but as the deadline approaches, I say “FUCK IT! Why don’t I just use a fucking table?! Tables just fuckin’ work.”
Use tables. Fuck the purists. Especially the hot ones.
Gaudere: thanks for the tip. I’ll try that at home. But, correct me if I’m wrong, doesn’t that method work well because there is a width specified here?
I was trying to come up with a solution that would work for pictures of any size, aligned either on the right or on the left. (The main CSS container in this webtemplate has a fixed width so I don’t have to worry about what happens when the user resizes the browser window - if the window is too narrow you will see a horizontal scrollbar.)
I hear what you’re saying, ZipperJJ, friedo, about just using tables - as a matter of fact, I think Gaudere might have said the same in an e-mail to me two or three years ago! But I would hate to have the whole page use CSS except for this one little feature. On the other hand, what atomicbadgerrace says is true: the people seeing the website will NEVER care that there is an HTML table somewhere in the page. As a matter of fact, when I discuss these fascinating subtleties with my wife (concering our personal website), her answer is always the same “Who cares? Why don’t you just put those pictures up that I told you to do a month ago instead?”
What I find really irritating is that the HTML specification should have included this feature in version 1.0:
img src="baboon.gif" alt="A baboon" caption="One of the IE6 developers"
and then the browser should handle it for me. Why do I need to do this? I’m sorry, but doing a website is just too hard. It should be easier than this by now. Correct me if I’m wrong, but isn’t this the 21st century? Don’t we have computers landing automated probes on Mars?
If I had to count the little tweaks I’ve done so far for IE6 (and this is a really simple website) I would have to take off my shoes because using all fingers wouldn’t be enough for adding them up. Don’t get me started on transparent .PNG files. I just gave up with those. They have a little blue box around them in IE6.
Except that, by the OP’s own admission, the CSS he used worked fine for every browser/OS combination except IE6 on Windows.
Now, i realize that many people still use IE6, and that every web designer has to cope with making his or her site viewable in IE6. For this reason, i wouldn’t blame the OP, and others in similar circumstances, for resorting to tables. Tables definitely make layouts simple. But it’s not really CSS’s fault if a page works in just about every browser in the known universe except (the notoriously non-standards-compliant) IE6.
Personally, i sometimes wish that web designers would just ignore IE6, so that people have to get a decent browser. IE7 has been out for well over 2 years now, and fixes most of the worst CSS rendering issues from IE6. Firefox, Opera, Chrome, and IE7 are all free. There’s no excuse to be running IE6 anymore.
His arguments against tables:
[ul]
[li][They i]ncrease almost unnecessarily the HTML/text ratio. This means that other options could be used to create layouts that produce smaller page files by employing less HTML tags.[/li][li]issues related to browser compatibility. (not that CSS seems to be any better in that respect, mind you, if I trust my limited experience - if anything I think tables have the advantage here. ETA: although all the problems I have run into are with IE6, no other browser)[/li][li]People with disabilities use alternative browsers such as screen readers, speech output browsers, braille browsers and text browsers. Using alternate browsing methods on table-based web sites can prove to be a painful experience for users.[/ul][/li]The author’s conclusion:
There are arguments related to questions of separating layout from content, as well as issues of search engine optimization, and accessibility.
Re the last one, a problem with table is that, when used for layout, they often cause the page to read in a different order than the actual HTML dictates. For most of us, this isn’t a problem, because we can look at the page and instantaneously decide which way our eyes need to travel to get the content in the proper order.
But for visually impaired people using reading software, the software follows the progression in the HTML, which might, in a table layout, be different from the logical visual progression of the page. This, of course, can fuck up their web browsing experience.
Both CSS and tables suck IMO. But tables suck less.
Really, the whole HTML/Javascript/CSS/browser thing really should be thrown out completely and redesigned. I could do complex GUI stuff quicker and easier twenty years ago. We’re still playing catch up with web-based GUIs.
Not only this, but if you desgin a whole site using CSS, it’s much easier to make site-wide changes to layout and appearance by altering a single CSS file, rather than doing massive “find and replace” exercises on all your tables.
I definitely agree with you here. Tables are easy to do, and i can’t ever recall making one that had cross-browser compatibility issues.
Where does this caption in your caption parameter go? Top or bottom? Is it centered, left, right? What color is it? What font is it? What’s the font size?
I do Web design as a professional. I spend 40 hours per week or more writing HTML (or programming code that spits out HTML). Yes, some browser anomalies are frustrating but I so rarely run in to that shit that it doesn’t bother me. Transparent PNGs don’t work? Ok don’t use transparent PNGs. Captions not working right with your CSS? Ok don’t use CSS for captions.
If you’re just doing a basic fun personal site why on earth are you banging your head against the wall trying to do all this bullshit extra fancy stuff so that your code looks cute? You just make yourself sound really fucking lame.
One good thing I can say about these “CSS purists” - they make people think that “HTML is too hard,” turn people off Web design and keep me employed.
The philosophy of web design is that HTML or better XHTML should only be used to describe content. CSS and scripts are what you should use to arrange than content in whatever way you want it to be arranged.
The problem comes in with browsers who do a poor job of rendering CSS (like IE6). In this case you should still build your website with CSS and write a special condition to handle IE6 users.
Preferably you want to also include a few choice words about how they should change to Ie7 or firefox, goddamn it!.
I would be happy to let my browser decide where to put it. Though, typically, captions are below the picture, in my experience. What font/color/size? Isn’t that a decision the browser has to make for any other tag, like p or h1 or h2 or td? The issue could be resolved in a similar way.
I am reaching the point where I’m with you concerning CSS captions, but I don’t want to give up my transparent PNGs. I’m not a graphics artist so I’m using free icons. Those icons are 24-bit color and when I save them as .GIFs they don’t look as nice. I think the small border seen only in IE6 is an acceptable tradeoff.
Well, I do see it as a learning experience. But in my mind, what I’m doing is not extra fancy stuff: captions under a picture, little icons for home / calendar pages, things like that. Maybe I’m trying to use methods beyond my skills. I was just hoping that captions using CSS would be easy.
I guess the main problem is that a significant portion of web users still use IE6 (I added Google analytics to my site and it’s about 14% or something like that.) I shouldn’t really blame IE6, it’s older software. I just wish everyone would upgrade and then I wouldn’t have to worry about IE6 any more.
Maybe I’m exaggerating how hard HTML is. But I still think it’s too hard for your average user. I would feel comfortable sending almost anyone in the non-profit group a word processing document and saying “here, just edit this and send it back to me - I’ll put it on the site for you.” There are few people I would trust to add a page of content, including text and pictures, to the HTML file directly.
Well, yeah, but there are so many web authoring tools available now it’s not even funny; the average person shouldn’t really need to go futzing with HTML and CSS at all (unless they want a custom style). Wordpress or Movable Type can create very flexible and attractive sites (including, notably, the ability to trivially add captions to images) without the user ever having to worry about the DOM or CSS compatibility.
Writing your own website from scratch is certainly hard; so is typesetting your own document in raw TeX commands, or writing a functional graphical user interface without using a GUI toolkit. That’s because you’re using low-level tools that are designed to be precise, not particularly user-friendly. There’s nothing wrong with user-friendliness, but it comes at a higher level; WYSIWYG word processors, GUI widget sets and web authoring tools. There’s no real need for a concept as fuzzy as a caption at markup specification level; after all, you can create a caption div of your own with just a few lines of code, using the existing tools HTML provides (hell, I can send you some if you like :)).
Not to hammer the point, but asking someone to edit an HTML file is more like asking them to edit the raw .docx file in a text editor, not edit it in Word. Word is an incredibly complex bit of software whose entire purpose is abstracting and simplifying the horrors of typesetting from the average user. Layout engines are the web equivalent of that.
Okay, here’s how to do a caption (let’s say it’s for a right-aligned image). CSS:
That’s all it takes, and more than half of that was formatting you would’ve had to do anyway. No need to clutter up the HTML specification with spurious elements; after all, what’s a caption anyway? A bit of text in a certain position, which the HTML spec already amply allows.