Screw the purists. They’re the ones who have gobs of time to fiddle and tweak css while they’re designing their band’s websites.
I write web apps for companies that need results NOW. I don’t have the daily bandwidth to mess with pure css. And the lack of standardization between all the flavors of browsers tells me that it’s an immature concept that needs refining. I know that it’s browser-dependent and it’s not the language in itself, but when I have to write 3 completely different stylesheets for the big 3 browsers, it’s a waste of my time when spending a couple of minutes on a shortcut does the trick in all browsers out of the box.
So it’s not elegant. I don’t get paid to write elegant code. I get paid to write code that works.
So I use a mixture of css for styling elements and basic page layout, and tables for fine-tuning a UI. And the internet hasn’t come crashing down yet.
In further clarifying what the purists say, nested tables are evil, and I somewhat agree. But there’s nothing wrong whatsoever with using a layout table within a <div>.
I actually really love css. If you like absolute control over your design, css is perfect. I like to be able to control every last tiny detail, and css allows me to do this easily.
I rarely rarely ever have to write css to fix a browser compatibility problem. If you write your css detailed and accurate enough, it works in all browsers. I learned this through much trial and error but it works. It’s not that big of a problem anymore.
I totally agree with you on that. Why is it that I wouldn’t ask someone to edit an HTML file, but I would ask them to edit a word processing document? Because we have reached the point where any computer you buy will include some form of a word processing document to allow you to do simple layouts. And most people already know how to use these programs.
Personal computers do not automatically come with programs to edit HTML documents. And as for the programs that do exist (allowing you to edit an HTML page in a WYSIWYG fashion), they are often expensive, and most people don’t know how to use them. That is the big difference.
HTML documents need to reach the level of usability of word processing documents to reach the point where the average user can add content to the site.
My next addition to the site is to be looking at Wordpress to give people a “blog” capability at the site on a few of the pages. That, I will feel comfortable in letting anybody do.
As an HTML div purist, I say: there is no problem with using a table for the purpose Arnold is describing.
Web page developers should not automatically treat HTML table tags as the work of the devil. Using a single table to layout an image with a caption is nothing to be ashamed about.
At the core of the div/table debate are two things:
[ol]
[li] Readability[/li][li] Maintainability[/li][/ol]
Many web pages (God, so many) use tables for formatting when they absolutely should be using divs. This results in pages containing 15+ nested tables, which are insanely difficult to maintain when you want to make simple changes to page layout. And if someone else needs to make changes to the page, you may as well be dropping them into a tank full of sharks.
In cases where pages need to conform to additional standards (e.g., Section 508), then a better case can be made for avoiding tables. But even in those cases, they shouldn’t be ruled out completely.
I feel your pain, Arnold. There are many problems with HTML and CSS, and the fact that browsers aren’t 100% standards compliant (especially IE) only makes matters worse.
Dead Badger: thank you very much for your example. It doesn’t look that far different than what I have! I am going to have to compare that to my CSS. I think the problem I am running into is that I am not overriding some property for the container that my img tag is in. (Especially because the webtemplate I am using has probably three or four levels of “divs” surrounding the content, and also properties defined for the “img” tag.)
When I look at your example, the one thing I may not have is “display: block”. I’ll have to check a CSS reference to see exactly what that does.
nyctea scandiaca: Thank you so much for the trouble. Your example looks very elegant. I will take inspiration from that also. The only reason I couldn’t use it directly is because I am trying to come up with a general-purpose style that will not depend on the size of the picture. I have many pictures on different pages (maps, photos of people, etc.) and I would have to have to force them all to the same size.
You’re very welcome. Yeah, I found that properly understanding CSS inheritance and selectors made a huge difference to how quickly I could get something looking passable. Also, are you using any page-inspecting tools? It makes the world of difference if you can actually see what attributes each element has, and where it got them from. In Opera go Tools > Advanced > Developer Tools; in Firefox I think you want Firebug. Both incredibly helpful (I find the Opera one a bit better, but it’s probably just familiarity). Google Chrome also has one built in.
Re: block and inline elements, here’s a decent article on the subject. Definitely an important distinction to learn.
I disagree - at least, not by noddy-fying the HTML spec so every conceivable layout element is catered for. That’s not HTML’s purpose. What would really be the effect of adding a caption element to HTML, for example? Browsers would still have to know how to lay it out, and each browser would likely do it in its own default way, and anyone wanting a semblance of control over how their site looks would still have to style it in CSS. It would be no different whatsoever to the <span class=“caption”> element I used, except that it would impose an extra burden on every HTML renderer for no gain. Put it this way: for any markup language to have the sort of user-friendliness you want without compromising the control possible with the current system, it would have to have something just as complicated underneath.
I’ll grant you that web layout engines aren’t yet quite as user-friendly as a word processor (although they’re very nearly there); that’s in part because they’ve not been around as long, but also because the scope of possible web designs is far greater than that of word processed documents. Nonetheless, between wikis, blog engines and other content managers, you’d have to have some pretty unusual requirements before it becomes absolutely necessary to hand-code your own site.
You should be using WP form the beginning, then you won;t have HTML pages for the people to edit.
When you look at WP, be sure to understand the difference between pages and posts.
When I do sites like you are describing, I have most of the layout in the template, the content has little or no markup in the post or page, and CSS describes how it all looks independent of the layout.
There are 50 thousand good css only templates available if there is one. You can find one for free to meet your needs. Simply change the images to what you need, and change the colors in the CSS files, and away you go.
It is just that easy as the kids say. And they do say it - the millions of them using WP and making layouts are not exactly experts in anything else web related. They do a fine job.
<div id=“imageWithCaption”>
<img src=“blabalabalasadfasfa”>
<span class=“caption”>This is your caption</span>
</div>
Now, in the style sheet, declare:
#imageWithCaption{ display: table; }
You only use tables for tabular data. If it isn’t, use divs/spans and display them as a table (or table-cell), which is perfectly valid AND semantically correct. Everyone wins!
Also, HTML, CSS, and PHP are perfectly serviceable languages. If you want a GUI, use Dreamweaver or some form of CMS - WordPress, Movable Type, etc.
And stop trying to design for IE6. If people are stupid enough to still be using that browser, the only thing that will get them to upgrade is if every site they visit is shot to hell. If they are too lazy to take 15 minutes to download a free, web compliant browser, they can go fuck themselves if they expect me to spend days tweaking my site so that it looks good even for them.
Don’t even get me started on IE5 or the early version of Netscape. It’s over, people - move on!
I used to agree with the people who prefer to use HTML tables over CSS. And it’s true that there are severe flaws with CSS that ought to be addressed, like the madness of trying to align floats in any way that is useful, and the box model being the opposite of logic.
But after some time working with pure CSS layouts, I have come to realise how powerful they can be, and once you get your head around them they start to make sense and you can anticipate the potential problems, and then figure them out as you go.
It also helps to choose the Doctype that forces browsers to be more closely aligned in their adherence to standards.
It takes a big chunk of time to get used to CSS and div based layouts, especially if you come from a table based layout background, but once you do, the sheer amount of power you have over your site is great.
Any person can make a website, it takes a professional to make it work. I get paid to know things like quirks mode vs. standards mode, what hasLayout does and all that sort of stuff.
I feel ya. Content/style separation is a good idea, and in that sense, tables shouldn’t be present in markup unless they signify tabular data. But CSS does come across as an extremely immature approach to that goal, which is really frustrating, since CSS has been around for well over a decade now.
That said, I’ve personally never had any problem creating a layout with CSS and mostly semantic XHTML markup that worked consistently in Firefox, IE7, and the other major browsers. Stick to the standards, use styles and elements the way they were designed to be used, and do a bit of tweaking for IE7’s quirks, and you generally do quite well.
IE6, of course, is a lost cause. Nobody should be using it in this day and age.
I don’t. But then, I only design websites intended for more technically-minded people, in whose community anybody who willingly runs IE6 would be a persona non grata. If I give any concession to IE6 users at all, it’s a separate page telling them to get their asses out of the twentieth century and fucking update their browser already.
IMHO, the only ethical way to handle IE6 compatibility on your website is to exploit one of the browser’s many security holes to automatically download and install Mozilla Firefox on the user’s machine.
Well, if you want to do certain narrowly-defined tasks, CSS allows you a lot of control. But for real visual design work, the CSS spec is terrible. Just look at all the hacking necessary to do something as simple as style a box-shaped element with rounded corners! Even in CSS2, it’s actually completely impossible to do while obeying the “semantic markup” philosophy. CSS3 will fix that – to a degree – by allowing multiple background images to be attached to one element, but I can still imagine situations where even this won’t really be expressive enough for simple design goals.
This isn’t a browser compatibility issue: this is just one of many ways that the CSS specification feels like a pile of rules, hacks and special cases designed by a committee, which I suspect it actually was. :smack: CSS definitely needs to be either severely overhauled or replaced: it just doesn’t quite provide the right amount of flexibility and generality needed to express the real variability of visual designs onto the purely semantic structure of a document.
Speaking of IE6, this article makes for pretty depressing reading.
Although Internet Explorer’s over share of the market declined in the past year, to 67.55%, IE6 users still make up almost 20% of all web browsers. That’s down from 30.63% a year ago, which is good, but i can’t believe that one-fifth of all users still have that piece of crap as their gateway to the internet.
ETA: I know some people run older computers, but here are the minimum specs for Opera:
[purist]This is the reason. The goal of using markup tags is to describe the information structure in a display-independent manner. You then have a separate set of controls to determine how the document is to be displayed via whatever modalities it needs to be displayed in.
In GML (the granddaddy of HTML), for example, there were separate tags for marking up tabular content vs. page layout (the latter used the “grid” tag), and you were still supposed to avoid explicitly using grid markup whenever possible.[/purist]
