Slashdot Mirror

If this was a question in disguise:
For the german speaking croud, I think SelfHTML with it's part about CSS is a very usable reference, apart from the above mentioned W3C specifications.

Other useful material consists of diverse articles on A List Apart and meyerweb; and many bits and pieces can be found on Listamatic, BlueRobot and Zen Garden, just to mention a few of my favourites.
Oh, and don't forget to search the web for those cheat sheets needed for IE 6 and other old browsers.

You could always use "the Google" to find some...

This one appears to behave nicely, is liquid, and while it DOES use the IE 5 stylesheet hack, that offends my sensibilities less than the overbroad hack that is table-based layout.

Here is another. There are others.

I'm pretty sure that you can't show me a single example of a page that validates as both XHTML and HTML, so you are sending invalid content under at least one of the mime types.

From RFC2854

The text/html media type is now defined by W3C Recommendations; the latest published version is [HTML401]. In addition, [XHTML1] defines a profile of use of XHTML which is compatible with HTML 4.01 and which may also be labeled as text/html.

And you are discriminating against non-IE users, because all the XML parsers currently used require the full data, while HTML parsers start parsing (and displaying) the page as soon as they can.

WTF? Validating parsers are a feature, not a bug. The IE parser however results in a brief display of unstyled content on IE, with CSS imports this is a bug and designers have been known to employ workarounds.

And don't tell me "no problems reported": web browsers can display almost any crap you can put together, if you use standard DOCTYPEs and/or XHTML mimetype try validating your pages first.

All my sites validate. Again, WTF?

Actually, the initial display of unstyled content does happen, see this article: http://www.bluerobot.com/web/css/fouc.asp

slashcache
also here's a few interesting links bookmarks layouts more layouts

• glish
• Eric Meyer's CSS/edge
• Owen Brigg's Little Boxes
• Blue Robot's The Layout Reservoir
• CSS Zen Garden
• MezzoBlue

For everything I've seen, Firefox supports CSS much better than IE. Like a sibling said, IE has become the bane of CSS, hindering true development in a number of ways. Entire websites are devoted to making CSS compliant sites work with IE, not Firefox.

Observe:

1. css/edge
2. glish.com : CSS layout techniques
3. Flash of Unstyled Content (FOUC)
4. The Layout Reservoir - BlueRobot

For everything I've seen, Firefox supports CSS much better than IE. Like a sibling said, IE has become the bane of CSS, hindering true development in a number of ways. Entire websites are devoted to making CSS compliant sites work with IE, not Firefox.

Observe:

1. css/edge
2. glish.com : CSS layout techniques
3. Flash of Unstyled Content (FOUC)
4. The Layout Reservoir - BlueRobot

Well, you need to read more then. All that you state is quite easy to impliment.

Here:
blue robot
glish
a list apart
box lessons
css panic guide
design rant

"Even hardcore CSSers get all excited when they do simple things like layout pages in columns."
Indeed, not only because of the struggle involved, but because of the great flexibility in using CSS instead of tables. It's not just "thank god I made a nice layout with CSS, it took me 7 hours!" but also "thank god I made a nice layout with CSS, now I can adjust it much more easily in the future and have far greater control than with any table hacks." And they are just that; hacks. The table tag was originally meant only for displaying data in a grid-like format (keep in mind HTML was originally for scientific documents).

And also we're all still learning. How many tablers got excited when they first figured they could use tables for page layout? A lot I bet. Now complex table layouts are all old-hat. Soon matured CSS layouts will be too, with the simplicity of layouts like this (check out the CSS, doesn't look too scary does it?).

Here's one from bluerobot.com
And here's one I developed myself...

Don't specify your layouts in px.

Um, yeah. From the css page for the example you gave:

.content {
position:relative;
width:auto;
min-width:120px;
margin:0px 210px 20px 170px;
border:1px solid black;
background-color:white;
padding:10px;
z-index:3;
}

#navAlpha {
position:absolute;
width:150px;
top:20px;
left:20px;
border:1px dashed black;
background-color:#eee;
padding:10px;
z-index:2;
}

Certain when web designs think inside the box (that they learned back in graphical arts school when the medium was 8.5x11 inch company catalogs), they too often do use pixel measurements and don't allow elements to float in size (as they are supposed to on the web). I tried pushing the limits on your page [link, jpeg, gif]. The left menu didn't expand even when I resized to full screen. But at least the text wrapped around correctly, which did not happen on the ALA/Slashdot [link, jpeg, gif] example (in that case, the text spilled out of the box and overlapped). There is a problem with text overlapping vertically, but I think that is a browser bug (Firebird 0.7).

I've been reading Zeldman's book Designing for Web Standards at safari.oreilly.com and it addresses this quite well. Safari and Mac IE 5.2 are very compliant to standards moreso than any version of IE on Windows, so it's not as big a deal now as it once was during the browser war era. Yeesh what a mess that was.

If you can move away from using old pre-war coding practices you'll be a step ahead in the fight. Check out these sites for more info on coding pages that look good in any browser on any platform:

• The Web Standards Project

• Zeldman's site of course.

• A List Apart

• Netscape's DevEdge is a great source of info.

• Validate your source.

• Validate your CSS.

• Another html validator.

• Accessibility is not only a good thing it's the right thing, especially if you ever make a government site.

• Bluerobot has some pre-cooked layouts to cut your teeth on.

Designing with XHTML and CSS means not leaving anybody out. From Web-enabled phones to IE 6 to text only browsers like lynx or links you'll only need to write your code once. I say do away with javascript browser detection scripts and write once, run (almost) anywhere!

There is a last resort you can go to if you must. Macromedia Flash looks the same in any browser provided you have the proper plugin. :) Although that is not my recommended solution.

Can you say "Old Machines" and "Default Install"?

On some computers, you'd be insane to even try running a 5.x browser. Browsers are some of the most memory and processor hungry applications your average user can come across. On one of my machines (and old Performa 6116), even running a 4.x browser is foolish. I'm using Netscape 3.x when I run anything on that thing. Or Lynx. Same with a Win 95 PC.

The real point shouldn't be to abandon older browsers: it should be to fight layout complexity. XHTML + CSS is a wonderful tool in this game. I love Blue Robot .... I finally got semantic layout/CSS when I saw it, and the upside was that it degrades perfectly.

Wisely designing to standards doesn't abandon the older browser... rather, it means you can use Netscape 1.0 or Mosaic or Lynx to use a page, and when you use Mozilla 1.0, you get all the purty layout and bells and whistles.