72 replies to this topic

[Scottie]

I love CSS Zen Garden- very inspirational!

I've tried using pure CSS layout and honestly, it's just not worth it at this point, IMO. Too many compatibility issues and unexpected results.

I'm not clear what XHTML has to do with CSS exactly, since CSS can be used with HTML so I'm off to read Adrian's comparison.

[mcanerin]

Awwwww man.....

Here I am all proud of myself because I finally switched my site over to that newfangled HTML Strict + CSS from hand coded HTML 3.something and you guys have to go bring up XHTML <sigh>

What's a poor caveman to do?

[mcanerin]

Speaking of Cavemen, this request for help has been floating around for some time now, but is pretty funny. Apparently an actual post.

-----------------------------------------------------------------------------

Subject: Simple Caveman needum printer help


Me caveman, simple folk. Want hook-up two printer, two computer. OOG, let me scratch on cave wall:

_________ _________ | P5-90 |
LPT1 | | P5-60 | | Win95 |\
| | Win3.1| | | \
| --------- \ ----|----
? | \ | LPT1 to 1284D
| \ |
__?_|____ \ to 1284C ____|____
| Djet | \_____________| Ljet |
| 855c | | 5MP |
--------- ---------


Gottum 1284C, 1284D cables to Ljet HP 5MP many moons now, work like bear-bone charm. Two computers talk to HP Ljet, share-share-alike. HP Ljet 5MP like EPP, like talk to P5-90, P5-60, say "me here! me busy! me needum paper!"
Then Djet 855c join home last moon, much powerful magic. Needum make P5-90 talkum to Djet too. Don't like way me change printers now... gottum shut down P5-90, change cables, reboot. Win95 stink like big pile mammoth dung, many flies, much bad wind.

Me think me just add new parallel port, LPT2, on little card. But evil spirits lurk; not many IRQs, caveman afraid change soundcard IRQ from 5, for evil Win95 never saw soundcard, will kill or hurt soundcard if find out. Need LPT2 me can assign any IRQ. Me see FarPoint makum extra Parallel port card, but FarPoint say no good with evil, evil Win95. Me want EPP port, most card not EPP, or have all manner expensive junk me no want.

Or maybe can use fast serial with HP 855c? Gottum extra serial port on 855c, made for funny fruit computer (Appletalk? Me never hear apple Talk in all days as caveman, travel many many lands). Gottum extra unused 16550 serial on P5-90.

Win95 bad, bad medicine. Stink like ground sloth with mange. MS try make like fruit computer, computer think it know what caveman want, really just do random thing it want.

-- Harlan W. Stockman
hwstock@swcp.com
hwstock@sandia.gov

Me no really Caveman, me stodgy 41-year-old scientist. Me pretend be OOG so people actually read story.

-----------------------------------------------------------------------------------

Ian

[Kev]

Actually, XHTML is a long term replacement for HTML. XHTML is a 'marriage of convenience' between HTML and XML, which are both derivations of the SGML base.

In terms of the advantages to using XHTML, they are numerous. All modern browsers support XHTML 1.0. This includes IE 6+, Opera 7+ Mozilla 1+, Firebird, Safari, Koqueror, Galleon. XHTML should always be used in conjunction with CSS 1 or 2. Using these two technologies in conjunction with each other gives excelent results as it allows a designer to seperate design from content. In your markup, attributes apart from 'class' or 'id' are unnecessary, resulting in much leaner code, faster download times, easier access for disabled visitors and easy redesigning in the future. In the stylesheet, you can use all your design elements. CSS is also well supported in the major browsers and for the odd property that isn't implemeted properley (IE's buggy box model for example) there are numerous easy to implement hacks.

I've recently completed a redesign that looks identical in all the browsers listed above (ddncafe.com). The only issue I found next to impossible to resolve was for IE5.5 on WinME. As for NS4+ users- netscape is no longer in development therefore I choose not to support it either- and to be honest, the user base for this browser is tiny.

As to what type of DOCTYPE people should use- go for strict and ditch the tables there's nothing done with tables that can't be done with styles and its no more of a learning curve than HTML was. Layout tables hamper access and increase loading times.

From an SEO point of view, I've read that the closer rlevant text gets to teh top of a page, the better the rank your site gets. Using XHTML 1.0 Strict will result in the least amount of markup and therefore lessen the amount of tags between the text and the bot/spider.

You don't need to buy books, here's a list of sites that can help you learn.

ddncafe.com (I part own/admin this large web resource site)
alistapart.com
zeldman.com
bluerobot.com
tantek.com/CSS/Examples/boxmodelhack.html
juicystudio.com

These sites generally promote the use of accessibility and web standards. This has to be good for everyone.

Hope this helps someone

edit: PS, hand coding will definitley help. Best freeware hand-coder I've found is chami.com/html-kit

[Adrian]

attributes apart from 'class' or 'id' are unnecessary

Thats quite misleading, you still want height, width, alt and title attribute in your <img> tags, you still want href and title in your <a> tags and if you use tables (there is a reason to continue to use tables, where you wish to display tabulated data, they are much more efficient at that then divs and CSS styles are) you may still need things like colspan and rowspan.

There are some problems with CSS support that you simply can't get around very easily. IE6's failure to support position:fixed for example. I've not seen any decent way round that one yet. As well as trying to set the height of a 'column'. Many people have asked how to make a left nav bar the same height as the main content column using CSS. Some browsers will take height:100%, but IE doesn't like it and its pretty difficult to do in some cases.

I like XHTML and CSS and promote its use, but I'm not going to delude people into thinking its all singing and dancing right now, because its not.
In cases you may have the right audience and a suitable deisgn to allow you to go full out on XHTML1 Strict with lashings of CSS2 use to lay it all out and style it nicely. In some cases you're going to have to bite the bullet and admit to having to continue to support NS4 to a decent degree and only be able to use basic CSS and tables for layout.

Most often at the moment though, you're going to fall somewhere in between those 2 extremes. Knowing you're market, the kinds of tools they are going to be using, and the limitiations in todays browser market is critical in being able to create an effective site that meets its goals. Design with standards in mind, but be prepared to have to take a step or 2 back at times.

[Kev]

Thats quite misleading, you still want height, width, alt and title attribute in your <img> tags, you still want href and title in your <a> tags and if you use tables (there is a reason to continue to use tables, where you wish to display tabulated data, they are much more efficient at that then divs and CSS styles are) you may still need things like colspan and rowspan.

In the context of seperating design from content its entirely appropriate. Alt and title attributes are non design realtede attributes and even height and width are becoming unimportant. As far as tables go, I used the phrase 'layout tables'. Of course tables should be used for data. You need to appreciate the difference between content and design.

There are some problems with CSS support that you simply can't get around very easily.  IE6's failure to support position:fixed for example.  I've not seen any decent way round that one yet.  As well as trying to set the height of a 'column'.  Many people have asked how to make a left nav bar the same height as the main content column using CSS.  Some browsers will take height:100%, but IE doesn't like it and its pretty difficult to do in some cases.

Neither problem is difficult, there are browser hacks and javascript hacks for both the problems you mention.

Position fixed: fixed- devnull.tagsoup.com/fixed/original.html
Column adjustments: www.alistapart.com/articles/fauxcolumns/

In some cases you're going to have to bite the bullet and admit to having to continue to support NS4 to a decent degree and only be able to use basic CSS and tables for layout.

No, I'm not There are plenty of good reasons for not catering to it apart from the fact thats its totally non standard:

As a browser its now virtually unused. Here's stats from thecounter.com for browser useage for Jan '04: www.thecounter.com/stats/2004/Janua...ary/browser.php
and heres Googles browser access stats for the last measurable quarter: www.google.com/press/zeitgeist_nov03.html

[dbmasters]

In some cases you're going to have to bite the bullet and admit to having to continue to support NS4 to a decent degree and only be able to use basic CSS and tables for layout.

Nope, not a chance, I have dropped supporting NS4 about a year ago and never looked back. If my sites work in NS4, great, if they don't, I am not putting forth one tiny bit of effort to make it. It's not worth the effort considering that it isn't a very widely used browser any more, and that the Netscape development team is gone.

[mcanerin]

Actually, the only browsers I currently support are IE5+, Mozzilla 1.5+, and <ahem> Lynx. If it works in those, I publish away in the sure knowledge that anyone using something other than those is used to seeing what they are going to see anyway

Lets face it, if you surf the net with a browser almost no one supports, then you are probably used to seeing it's "unique" viewpoint on the world... I figure if it degrades well into lynx, I've covered those with disabilities (or minibrowsers) and that's about as far as I go unless there is a REALLY good reason for it (ie it's for a school or large company that has standardized on Net4 - but that's a special case).

I have a copy of Netscape 4.1 on my system, but if I do check it, it's mostly just out of interest, and to make sure it's not too broken - but if it's ugly, I don't spend a lot of time on it. If you insist on watching the superbowl on a black and white TV, don't complain to the networks that you have a hard time following the game...

Ian

[Ruud]

I've recently been reworking a site from HTML v. 'crap' to XHTML 1.0 Transitional. It's a pure joy. It's blistering fast. Of course I have all my style declarations in an external CSS otherwise you end up with code even longer than HTML.

Although you may drop width & height from an img tag you are not allowed to drop the alt tag - your document won't validate without it :-)

I don't use standard sizes for all my images and have a need for width/height to speed up browser display...

As for writing valid code: tags & such always in lower case (a href vs. A HREF), a <DIV> can't live within a <P> (the crypic validation errors you get are mind boggling), and values are not presumed (<input..... checked /> is not possible for checked is not related to a name: <input .... checked="checked" /> is valid).

The CSS problems I've seen are no more different or difficult as all cross browser issues have been and are. Luckily for me I go by the numbers: dominant browser first, the rest.... maybe....

True, there is virtually nothing you can do in CSS that you wouldn't be able to do in tables. But in XHTML/CSS it can be so much more compact!

Ruud

[Kev]

Although you may drop width & height from an img tag you are not allowed to drop the alt tag - your document won't validate without it :-)

And also wouldn't be accessible either. Just to clarify again, I wasn't suggesting no attributes, merely no style based attributes

True, there is virtually nothing you can do in CSS that you wouldn't be able to do in tables. But in XHTML/CSS it can be so much more compact!

And again, more accessible, seperates design from content, is much more future proof, alleviates the need for semantic design change and if what I've read about getting text closer to the top of a page is true, will improve SEO.

[TopDog]

Ian, it's interesting that you add Lynx to the mix. I've never tried that one, but I will.

I generally run the gamut and test with NS 4.08, NS 6.2, NS 7.1, IE 5.5, IE 6, and Mozilla 1.5. NS 6 seems to be a real problem child. I do occasionally see some strange display problems with that beast and I do see some traffic from NS 6 users.

Like I said earlier, my only concern about NS 4 is for e-commerce sites. Other than that, I just make sure the pages degrade into something intelligible with NS 4.

[mcanerin]

Lynx is a wonderful tool (once you get used to a text only system) I get SO much work do to loading a potential clients site into lynx and telling them that this is what Google sees!

Additionally, it helps catch certain types of cloaking and other dirty tricks that my competitors sometimes use.

This is a great link to an online version, and there is a link there to download the real program

http://www.delorie.c...b/lynxview.html

Ian

[Ron Carnell]

From an SEO point of view, I've read that the closer rlevant text gets to teh top of a page, the better the rank your site gets.

While no one really knows definitively, that is likely just a myth. Certainly, there's no hard evidence to support it.

As for NS4+ users- netscape is no longer in development therefore I choose not to support it either- and to be honest, the user base for this browser is tiny

Depends on the audience. Non-compliant browsers, like NS4.x and webTV, account for about 3 percent of my uniques. That sounds tiny, but translates to big numbers for even a moderately busy site. Do I want to turn away 30K to 50K visitors a month? Maybe, but in my opinion, the payback for my remaining visitors has to be fairly substantial. It's a judgment call, and I can't fault anyone for making a decision different than my own.

… for the odd property that isn't implemeted properley (IE's buggy box model for example) there are numerous easy to implement hacks.

And therein lies my personal gripe.

I "grew up" in the midst of the browser wars, when nearly every web page was a hack to maintain consistency of design, and I'm in no hurry to return to those days. I will not use a style sheet where one browser uses this line, another only sees this line, and yet another loads an entirely different file. Life is too short and I have WAY too many pages yet to create.

There are tons and tons of features in CSS 1 and 2 that work consistently across the browsers. I use those and ignore any that require a hack to maintain usability. And, yea, that usually means employing container tables, but that's a compromise I can live with until (and unless) Internet Explorer becomes fully compliant with the standards.

I strongly believe in the separation of content from design. But I'm too pragmatic (and probably too lazy) to ever be a crusader.

[Adrian]

NS4:

What happens when you have a client with a higher than average usergroup of NS4? Are you just going to tell you're client "Nah, you don't want those customers, the browsers old and non-standard anyway"?

On personal sites, fine, but if your making a site for someone else, its difficult to impress your personal ideals upon them when their target audience is different. theres one job your going to lose.

I've quoted those exact stats from thecounter elsewhere myself today, but thats only very generalistic, it completely ignores the specific target audience. Besides, you can never rely on them that much because you're not sure about the sites that are picking the data up. Its a good guide, but that all.

Attributes:

You mentioned the only attributes you need are ID and Class, nothing relating to layout. I know the difference, you probably know the difference. But do the people who aren't terribly familiar with XHTML style coding? Hence why its misleading. And I think height and width attributes are essential for images and will continue to be. It helps stop the browser jumping all over the place while its rendering everything. Thats been part of the 'good practice' guide for years.

As you later point out, the main emphasise is on not needing styling tags and attributes, though there may still be cases at times when its needed.

Tables:

The term "Layout tables" was used a bit later on in the post, hence my clarification that they have their uses.

Hacks:

I don't want to go adding lots of JavaScript hacks to my code when part of the reason I'm using XHTML is to reduce the amount needed to be downloaded. And the faux columns thing, I'm not keen on, don't think thats a very good solution really.

As Ron has just said, I don't really want to be writing specific code for all the different browsers, part of the idea of standards are that you shouldn't have to. By you're own comments its meant to be more future proof. Well, it ain't if you're using loads of hacks.

XHTML code isn't necessarily more accessible or semantic than anything written in HTML, I do tend to think it inherently prompts people to be more accessible and semantic. Hence my bugbear elsewhere on the forums about dubious use of H1 tags.

At the moment, the people moving to XHTML are those more concerned about web standards and doing things right and therefore pick up on the interest of semantics and accessibility as well. Its as much about the people involved in taking that next step as it is about the tools being used.

[Kev]

You both say you don't like to use hacks and yet you both continue to support NS4.*

That seems more than a bit incongruous to me- how do you manage to support Netscape 4 users and modern browsers users without any hacks?

Adrian you seem to have misunderstood the term 'future proof'. XHTML and CSS are technolgies that are based on concepts that will last for years and years to come. This is totally opposite to the concpet of 'backwards compatability' which is what you're advocating.

The stats I psted earlier from two different sources demonstrate how little NS4.* is supported. By catering for it you are effectively shutting out a much larger potential user group who have to navigate the buggy, non-standardised code necessary to support such a browser.

And you both also see no problem with using tables for layout? Thats a hack in itself.

I'd be very interested in seeing sites that you've both coded for Netscape4.* customers as I don't believe they'd be viewable in any other browser without lots of hacks.

Are you just going to tell you're client "Nah, you don't want those customers, the browsers old and non-standard anyway"?

Yes, thats right. But not in those terms. Most of the clients I've had are quite happy to be educated if you take the trouble to explain why. Its not usually very difficult. Coding for NS4.* they can reach 100% of their target audience. Coding to XHTML standards they can reach 100% of the web. Most people are intellegent enough to get that.

And I think height and width attributes are essential for images and will continue to be. It helps stop the browser jumping all over the place while its rendering everything. Thats been part of the 'good practice' guide for years.

You need to move with the times then Maybe if you coded to XHTML standards your code would be lean enough to not cause massive amounts of page jump when its being rendered. I can't recall any images on my last few sites that have jumped around at all- maybe specifying them in the stylesheet helps.

I don't want to go adding lots of JavaScript hacks to my code when part of the reason I'm using XHTML is to reduce the amount needed to be downloaded. And the faux columns thing, I'm not keen on, don't think thats a very good solution really.

lots of javascript hacks? Which ones are you referring to? And as the for the columns thing- why don't you think its a good solution? Its one extra line in a style sheet.

I don't necessarily think we're at odds here but I think you're discounting perfectly valid workarounds when hanging on to old, outmoded, page heavy 'real' hacks like using tables as design elements.

I also hated the browser wars of the mid- 90's but the way I look at it is that we can either continue down the road of coding a different set of pages for each browser we want to support or we can accept and promote the use of a good standard that will soon eradicate the need for browser wars ever again.

As I said earlier, the bottom site in my sig runs off 2 stylesheets- one for the main site and one for the blog. No need for extra pages, no need to overload my markup with tag soup and its accessible to AA standards as well. I can trade that off against supporting NS4.* any day of the week. The same goes for any business sites I create.