Slashdot Mirror

I'd like to disagree with this comment (it is Slashdot, afterall). IE7 fixes a lot of rendering bugs that IE6 had - just view the css/edge site with IE6 & IE7 to see some of the fixes in action. My own test XML-page renders properly, with CSS, on IE7 where it didn't on IE6. IE 7 is noticeably faster than IE6. These are all my personal observations, and I'm sure a more professional analysis will yield a lot more improvements.

Having said that, IE7 is still far off from where the rest of the world is at, and it can be argued that Microsoft is not working as hard as it should be on implementing standards, but a quick read over the IEBlog will show that that the developers of IE really are trying to implement feature requests, and IE7 brings with it more than just a bunch of fluff. It brings IE up to Y2K CSS compliance. : -D

Perhaps you mean that most browser makers don't shoot for acid test compliance

I cannot claim to know exactly what the GP meant, but my reading of it thought he was refering to some peoples view that ACID2 is biased against MS. The issue was basically some of the authors of the original ACID test (and other outside parties) have accused the ACID2 of basically being used as a marketing tool against MS. Thier view on this is basically the original ACID test was built by asking "what are the most important features needed" and was then a tool to help all browser companies work toward compliance by meeting that test. They claim ACID2 was basically built by asking "what features is IE worst at and will have the most trouble implementing".

Now I have no idea about any of this but thats what I'm guessing he was talking about. That it was supposedly built more as a challenge to MS than to help ALL browsers work toward a common goal. How true any of this is, I got no idea. Just stuff I've ran across on the web. Here is one reference I was able to quickly find.

How can this be insightful? This must be the biggest collection of web design misconceptions I've ever read.

• You're supposed to separate semantics and style, because it makes the pages more flexible, accessible, and terse. Everything on a web page has some semantics (if marked up properly) and a style which completely depends on the capabilities of the client. If you believe these are inseparable, I bet you've never used a textual or audio browser. Input elements are no different from other markup in this respect.
• An HTML page cannot be XML. At least, it cannot be valid HTML and valid XML, except for trivial cases. XHTML is valid XML, but it wasn't created because of CSS. It was created because of stricter syntax rules (leading to easier parsing). CSS works fine with any XML, but millions of pages use it successfully with old-style HTML. And I'd love to know what kind of positioning can only be handled by attributes - I've never seen a case of this.
• Only uninformed zealots will tell you that tables are always bad. Tables have a well-known semantic meaning, but that does not include layout. DIVs also have a well-defined meaning: Division. DIVs separate the markup into parts, which can then be styled (and positioned) at the whim of the developer. But, being completely flexible with regard to visual representation, they can be difficult to handle for novices - Been there, done that. Positioning is IMO the only really difficult part of CSS, mostly because of client bugs. Oh, and DIVs are block elements, even though you can override this.
• HTML, CSS, and JavaScript are not the same thing! HTML defines contents, and can be used for web pages, help files, presentations (S5), and books. CSS defines style, and can be used for any HTML or XML markup. JavaScript defines functionality, and is a full-fledged programming language. It's a pipe dream that any number of languages with vastly different capabilities and goals can be merged into a consistent whole without adding oodles of complexity.

To answer your question: CSS is not an "elite thing". It's really quite simple, if you run through a tutorial or two. I recommend W3Schools' tutorial to start with and for reference, Jeffrey Zeldman's Designing with Web Standards to learn practical CSS, and searching Digg, Reddit, and especially del.icio.us to learn lots more.

If the HTML code is valid the page should be fully readable in a text based browser.

Bull. This is a valid page that doesn't display properly in text based browser that doesn't support CSS. I don't want the browser to do anything fancy. All I want the browser is to not display certain elements if I don't want to, in other word, support display: none;

This looks like an interesting technique, but I think that you would have to have a very good reason to use this feature in a real presentation, otherwise it might come across as distracting. The presenter should be trying to make some sort of point (or sale, or argument, or...). I'm sure that there are some cases where this could really make a big different to a presentation, but I'd guess that these are fairly rare.

On the subject of web enabled presentation formats, I really like S5, Eric Meyer's Simple Standards-Based Slide Show System (see http://www.meyerweb.com/eric/tools/s5/ ). This is much more simple than the technique from the article, and there are now some very powerful Scriptalicious extenstions that can add dynamic features to S5. One of my own presentations is at http://www.exubero.com/ant/antintro-s5.html

since this is more /. humour than groklaw humour i submit
http://meyerweb.com/eric/tools/gmap/hydesim.html
?ll=-111.71825408935547,40.33947890643786&yd=200

http://meyerweb.com/eric/tools/gmap/hydesim.html
?ll=-111.71825408935547,40.33947890643786&yd=2000

as a theory of the effects of the case (please reassemble the 2 urls before use)

since this is more /. humour than groklaw humour i submit
http://meyerweb.com/eric/tools/gmap/hydesim.html
?ll=-111.71825408935547,40.33947890643786&yd=200

http://meyerweb.com/eric/tools/gmap/hydesim.html
?ll=-111.71825408935547,40.33947890643786&yd=2000

as a theory of the effects of the case (please reassemble the 2 urls before use)

When there are 2 ways to read something, assume the other end didn't want to offend you unless you have very good reason to assume they did

Offensensitivity is a decent rule.

Are you sure? The original Complex Spiral works for me.

Sure it's not full support -- no one has that -- but at this point the rest of the major players (Firefox, Safari, Opera) all have much better support for CSS than IE does.

To make some numbers up, supporting 90% of the spec is still a lot better than supporting 70%, especially when people have found really nifty things you can do with that extra 20%.

My 2 kopeks. If you use web standards you won't have to worry about supporting older browsers. If a site is designed correctly the CSS will degrade gracefully. See Zeldman's and Meyer's work. As for supporting older software, as long as someone is paying you enough to support it then it's worth it.

Pardon me for going completely off-topic, but this is a pet peeve of mine.

Why do people continually insist on trying to control the viewing experience of the visitor to their website? A lot of these bother me, but the most egredious one is people who hard code pixel widths in their table tags. http://webtips.dan.info/tables.html (that's just one page, there are many others) It's annoying. Why should I be punished for having a lot of screen real estate? If you must use a table, and until support for CSS3 tables are supported widely we'll be using them a lot, ignore the width setting, or set it to 100%. Only if your design is multi-column should you use defined widths for the tables. All added together they should equal 100%. Heck you shouldn't be using tables anyway. Use CSS instead. http://www.meyerweb.com/ is a good site for learning CSS. But for those lazy web programmers that insist on using tables to control the width of the content rendering,

javascript:(function (){t=document.getElementsByTagName(%22table%22);fo r(x=0;t[x];x++){if(t[x].width.indexOf(%22%%22)==-1 )t[x].removeAttribute(%22width%22);}t=document.get ElementsByTagName(%22td%22);for(x=0;t[x];x++){if(t [x].width.indexOf(%22%%22)==-1)t[x].removeAttribut e(%22width%22);}t=document.getElementsByTagName(%2 2th%22);for(x=0;t[x];x++){if(t[x].width.indexOf(%2 2%%22)==-1)t[x].removeAttribute(%22width%22);}t=do cument.getElementsByTagName(%22col%22);for(x=0;t[x ];x++){if(t[x].width.indexOf(%22%%22)==-1)t[x].rem oveAttribute(%22width%22);}})();

will set the table widths to 100%. This javascript function doesn't work to well on multi table design or CSS width controlling madness, but every little bit helps. Remove the /. embedded spaces in the javascript function and paste it into a new Firefox bookmark. Then click on that bookmark whenever a site is controlling the viewing experience oh so helpfully. /sarcasm (last part).

-FlynnMP3

• css/edge
• Glish CSS Layout Techniques
• Position Is Everything
• stu nicholls | CSS PLaY | CSS layouts
• A List Apart
• CSS Discuss

A few good places to start:

• Position is Everything
• A List Apart
• CSS Zen Garden

On the book front, must-reads include: Designing with Web Standards by Zeldman, Eric Meyer on CSS and More Eric Meyer on CSS, and Dan Cederholm's Web Standards Solutions.

Also, Veerle Pieters has a very useful hyperlinked PDF of CSS resources; the associated blog page has more details.

That lot should get you started :-) Hope that helps.

But be warned: like you I'm a hard-core, long-term technical bod, who's done everything from embedded systems software to web development, and it's only after 3 years, absorbing everything I could learn about CSS in theory and practice, and particularly how to conquer the Great Satan IE, that I've finally got to the point I referred to in my original post. To be perfectly honest, I couldn't believe it when I only needed 13 lines of hacks to tame IE on a very complex design.

So when you start, the best bit of advice I can give you is: code and test to Firefox first. If something looks a bit off, check it in Opera 8, and in Safari if you have access to a Mac. Once you've got it working across those three, everything that goes wrong in IE is IE's fault, not yours. That's when you start applying the hacks found at Position is Everything and other places, until IE finally falls back into line.

It's not as bad as it seems; if you have the kind of logical mind that goes with writing code, you'll soon begin to discern the patterns underlying IE's peculiar behaviour. (Virtually everything can be tamed using the Holly Hack, explained at Position is Everything, linked above.)

Good luck, and Enjoy :-)

Yet, I am more comfortable with a lower tech approach and only use similar programs when I am told I am required to.

Such as using the Simple Standard based SlideShow System (S5)?

(ps: this is not a joke, I'm usually doing my presentations with it, it's slick and fast and doesn't care about the presentation box' setup)

I've been at uni for 4 years now and I've been asked this same question a few times by foks that know I'm 'up' on computers.

My answer is always: Ditch the laptop, use pen and paper.

It works, if you lose it, drop it, wear it out etc then it costs very little to replace. And it doesn't break so you wont be spending all you lecture fixing it and not taking notes.

And if those reasons don't convince you then think of it from the lecturer's point of view and read http://meyerweb.com/eric/thoughts/2005/08/13/click ety-clack-move-on-back/

Use pen and paper. Please.

Google's Directory on Web Design -> FAQs, Help, and Tutorials
Eric Meyer's CSS Reference page (warning: requires frames, but it's tasteful use :P)

More on Eric Meyer, who is web-design guru in general, but well-known for his css/edge presentation, and, well, check out his site, definitely worth a read.

Well, that's it, other's that I know of have already been posted.

Google's Directory on Web Design -> FAQs, Help, and Tutorials
Eric Meyer's CSS Reference page (warning: requires frames, but it's tasteful use :P)

More on Eric Meyer, who is web-design guru in general, but well-known for his css/edge presentation, and, well, check out his site, definitely worth a read.

Well, that's it, other's that I know of have already been posted.

Google's Directory on Web Design -> FAQs, Help, and Tutorials
Eric Meyer's CSS Reference page (warning: requires frames, but it's tasteful use :P)

More on Eric Meyer, who is web-design guru in general, but well-known for his css/edge presentation, and, well, check out his site, definitely worth a read.

Well, that's it, other's that I know of have already been posted.

Yeah, transparent PNGs will be supported in IE7 Beta 2, according to the article\blog that was on /. yesterday.

Apparently the background-attachment CSS feature will also work correctly, which I'm glad to hear since you can do cool pseudo-transparent HTML elements with it (namely DIVs). Previously, instead of the picture being positioned relative to the whole page, it was only relative to the element which it was in, making it look goddamn awful in IE and pretty damn nice in anything else - see here.

Personally, I'm glad they've sorted out some major rendering flaws, and I'm glad many problems remain - I want my websites to look like they're made to in IE, but I still want IE to be bad enough to make people join the Firefox fanboy club.

On a side note, could this be the most redundant /. article yet? Well... no probably not, but I think we all feel this way anyway.

http://www.meyerweb.com/eric/css/edge/complexspira l/glassy.html

Acid2 is kind of out there, and as others are pointing out, our beloved FF won't pass it, either. The real questions are: Will it even fully support just pure CSS1? And for the person who said this: "At the time that the codebase of IE was starting, the w3 standards weren't as hyped as they were today. As a result, it's no surprise that Microsoft didn't listen to them."--Um, why are we giving them a pass here? Everyone else has gotten their shit together in the meantime, why can't MS? Weren't they one of the original members of the w3c in the first place?

Lying about S5's cross-browser nature? Giving Opera the cold shoulder? Utterly wrong on both counts. I've done everything I can to make sure Opera is still at this particular table.

Everything worked just fine except for two things. One, the browser window had a vertical scroll bar for no apparent reason. Two, the controls were nowhere to be found, either by hovering over where they're supposed to be or using the "C" key to toggle them.

Lying about S5's cross-browser nature? Giving Opera the cold shoulder? Utterly wrong on both counts. I've done everything I can to make sure Opera is still at this particular table.

Everything worked just fine except for two things. One, the browser window had a vertical scroll bar for no apparent reason. Two, the controls were nowhere to be found, either by hovering over where they're supposed to be or using the "C" key to toggle them.

Lying about S5's cross-browser nature? Giving Opera the cold shoulder? Utterly wrong on both counts. I've done everything I can to make sure Opera is still at this particular table.

Everything worked just fine except for two things. One, the browser window had a vertical scroll bar for no apparent reason. Two, the controls were nowhere to be found, either by hovering over where they're supposed to be or using the "C" key to toggle them.

was hoping for some CSS improvements. When I first installed it, I immediately went to a few of the more difficult CSS sites, to see if they'd render correctly. Nope - no such luck. See http://meyerweb.com/eric/css/edge/ for example.

Out of curiosity, does it pass the Acid2 test?

--Paul

I'm writing this post in IE7.

To tell the truth, the only "improvement" I've noticed is the tabs, but tabs have been available as extensions for quite some time.

I was hoping for some CSS improvements. When I first installed it, I immediately went to a few of the more difficult CSS sites, to see if they'd render correctly. Nope - no such luck. See http://meyerweb.com/eric/css/edge/ for example.

The toolbar has been moved around. In my copy of it, at least, the URL bar is just below the titlebar, then there are the tabs, then another bar with text buttons on the left, and some icons on the right for home, favourites, history, rss, and print.

A search bar has been integrated into the same bar as the URL entry box. I expected it to use MSN by default, but it's set to Google. Or maybe that's just on mine?

As a web developer, I was hoping for better CSS support and better debugging tools.

According to their documentation, they've addressed at least two CSS bugs. I haven't seen any improvements at all yet. I will be using Dean Edwards' script for some time yet, it seems...

On the JavaScript end, there does not seem to have been any work done on the debug tools there at all - still the old crappy "error on line X" (of what file? a bit more detail please?).

The RSS doesn't seem as good as Firefox's.

In Firefox, an icon appears on the bottom of the page you're on. You click the icon, then add the feed with another click. Immediately, you have Live Feeds, where you can open your bookmarks, scroll to the feed you want, and a list of the article headlines is immediately available.

In IE7, however, an icon highlights on the top of the page. You click the icon, which opens up the RSS and renders it (nyeh - whatever). Then you click add to favourites. Then you click to confirm that. Now, when you want to view the feeds, you open your favourites from the text toolbar, scroll down and click on the feed.

The main difference is that in IE7, you must click each feed that you want to view, whereas in Firefox, you get a preview of the new items.

Overall, I am not impressed in the slightest. Nothing innovative at all, and their CSS is still nowhere near as good as Firefox, Opera, KDE or Safari's (I know the latter two are basically the same engine...).

If they haven't said they will support 2.1 in IE7, what does that tell you? Until they DO agree to fully support standards, my original point stands regardless of any nitpicking over whether CSS2 is in fact partially flawed or not. BTW, I just did a Google search on IE7 and CSS2. Here's an interesting blog comment. And here's Eric Meyer's thoughts back in March.

Wow... just... wow.

I'm sorry about this, and I don't mean to be an arse, but you can argue hypertext theory and philosophy all day. The fact remains that this is neither insightful, interesting, new nor well-executed.

As you indicate in your post, fat (or multi-) linking is not a new idea.

"This is not about being compatible with a popular browser"

Hate to break it to you bud, but in web design, on the web, it is.

If you were doing something really revolutionary here the shoddy implementation would be cut some slack for the conceptual innovation, but what you've produced is fundamentally a drop-down menu.

These have been around as long as layers/divs and javascript - probably pushing ten years now. We've got them in javascript, cross-browser and even CSS-only incarnations.

In addition, you haven't even implemented fat links properly - true fat links should open all the pages they link to from a single click - this is the only thing that separates "multi-links" from "drop-down menus", and your version doesn't do it.

Now, it might be hard to write a plugin for PmWiki, but that's the only bit of (even potential) innovation here, and it's ridiculously self-aggrandising to submit it to Slashdot as any kind of news item.

You might well be owed some small amount of kudos for extending PmWiki's functionality, but your "solution" is so terribly executed (FFS, cross-browser menus aren't hard) and unprofessionally produced ("SWITCH TO Firefox NOW") that any tiny helpful advance is quite lost in the roaring mediocrity of the "feature".

In fact, I know of several rather more militant webmasters who'd probably rather string you up (for encouraging the use and dissemination of such terrible broken code) than pat you on the back for writing this Wiki plugin.

Basically, possibly apart from the Wiki back-end (which might well be hard, but which nobody's interested in), it's not innovative, interesting or elegant. Submitting such a non-event to a widely-read and volatile environment like Slashdot is just asking for people to beat on you for your presumption, especially when you present it like it's the Philosophers' Stone or something.

I'm assuming from your code that you're a beginner web-developer - if so I humbly apologise for the kicking you're getting, and suggest you gain a bit more experience before hyping your next hack. Hackers (and the Slashdot crowd) are generally very sensitive to over-hyping and BS - make sure it's at least interesting before you start telling people it's revolutionary.

HTH

If not, you should seriously consider reading up - may I suggest A List Apart, CSS Edge and Jakob Nielson's Alertbox. They'll save you a lot of embarrassment before going quite so public next time...

If Mozilla and IE know what elem.innerHTML is and can render it, why can a screenreader not work like a real goddamned web browser?

Actually, one of the biggest real-world problems with screen readers is that some of them (I won't name names, but they know who they are) just use IE to render the page, and then read it out loud. So if you spent a lot of time on, say, carefully putting your columns in order in the page source so that the navigation came last, well, that screenreader may move it back to being first because that's how it renders visually. At least one screen reader (Jaws) does notify the user of JavaScript-driven events which change the page, but that's sketchy at best.

In any event, there is a strong mindset in the screen-reader development community that a proper screen reader should mimic a visual browser as closely as possible; but of course that's about the worst possible way to think if you want to design something visually-impaired people can use. See Eris Meyer's "Don't Read; Speak!" for more on that. Who knows? Maybe someday screen readers will even support the CSS media type that was defined just for them...

If we can pass the user around the page like that, why not include more dynamic pieces in the page and present a non-visible menu for blind people? "Press 1 for My Profile, Press 1 for ... blah blah blah". As they press a button, *javascript and dhtml* take them around the page, reading more parts of the menu.

So... apparently you think access keys don't exist (they do, and screen readers will pick up on them; to be extra safe you can add an accessibility statement which outlines your site's accesskeys and how they can be used for navigation. Several groups have also published recommendations for "standard" sets of accesskeys to accomplish common tasks), and you think the only way to navigate to different parts of the same page is with JavaScript (apparently you're unfamiliar with that "anchor" concept that's only been around since about the beginning of the Web)? Perhaps you should read more about this stuff, since you apparently try to do it for a living.

Have you frequented any other website except /. for the last five years ?

Yes, for example css/edge, which shows some nifty (and sometimes even useful) things you can do with CSS. Note that most of this stuff requires clever use of broken CSS in order to work with IE, mainly because IE doesn't implement the not-quite-new CSS2 correctly.

See?
Really, what's the point of these anymore? We need some essays about things that actually cause harm, not confusion or frustration.
Ingesting Ammonia Considered Harmful
Chemical Burns Considered Harmful
Improperly-Handled Chainsaws Considered Harmful
The Government Considered Harmful
etc. etc.

For an alternative to PowerPoint *and* OO (for presentations), give S5 a try: http://www.meyerweb.com/eric/tools/s5/

It's free, and it runs in your browser...no need to have anything installed on the machine to be used for slideshows. I put the presentations on a USB thumb drive, then run them on whatever machine is available...

And now you do.

Or you can do mouseovers using CSS, http://www.meyerweb.com/eric/css/edge/complexspira l/demo.html does it for instance and looks quite impressive.. Also i use css mouseovers on www.ev6.net

1. Kernelthread.com gives credit to Eric Meyer.
http://www.kernelthread.com/about/

2. Eric Meyer is OK with this. It's with his permission:
http://meyerweb.com/eric/thoughts/2004/01/15/

It appears the design for the kernelthread.com site is a rip-off of an older version of CSS guru Eric A. Meyer's blog site. Compare the site's design to this version pulled out of The Wayback Machine. Time to let Pirated Sites know. And this from somebody who works at IBM? I'm sure somebody at SCO would find this amusing...

So why are they supporting HTML?

Or previous CSS versions?

So why are they supporting HTML?

Or previous CSS versions?

Even when you design a standards compliant webpage you still need to use hacks to get things to work and validate correctly.

This is something I never understood. Granted I don't develop huge pages, but the pages that I have developed (personal, for my church and other small organizations) have these criteria/features:

• All validate XHTML 1.0 Strict
• All validate CSS
• All look good in Firefox, Mozilla, Opera, IE5.5, IE6, Dillo, Lynx, Links and eLinks

The only thing that works in Moz/Firefox/Opera that does not work in IE is the "position: fixed" attribute on some things. But that is not crucial to the look of the page, it is just nice to have.

The thing is that it delivers the exact same HTML/CSS to every browser (no UserAgent checking) and even looks correct in the browsers that ignore CSS.

I got the idea for the design of the sites I have done from Eric Meyer's CSS site. The only difference is that I have made some minor tweaks to get the page to look good in pretty much every browser.

If you were developing some massive site, I could see running into some problems. However, the biggest issue with IE is CSS, and once you have the CSS how you like it, you include the same one in every page.

I'd like to submit someone elses example page of the horrific way IE6 handles CSS2:

http://www.meyerweb.com/eric/css/edge/complexspira l/demo.html

It not only describes what goes wrong, but why, how and where.

Oh: Eric: if you're reading this: Thanks! :)

Demo using CSS1 only.

"We have got to find a way to make MS fully support CSS2."

Make'em support CSS 1 first.

Hey, c'mon, CSS 1 is barely a decade old. Give'em time. :-)

If they actually cared about developers, which they don't, they would make absolute, float, and hover work as expected and on arbitrary elements. For those of you who don't know of these issues, check out this for some nice examples of stuff IE can't handle. It's also work looking at the Zen Garden too.

Bad CSS support in Windows is the main reason I use IE7 (no, that's not from microsoft).

Not when I used it.... and I remember I used at least Opera 8..

Try this CSS Demo in Opera and see how it goes. That was one that never rendered right in Opera. Make sure to try it in firefox or mozilla too so you can see what it is supposed to look like, if you don't see anything wrong right away.

Authors may wish to define additional link types not described in this specification. If they do so, they should use a profile to cite the conventions used to define the link types. Please see the profile attribute of the HEAD element for more details.

I think this last paragraph is important. "nofollow" is not on the official list of link-types. If blog authors wish to use this attribute in anchor elements, they need to define it properly (or at least properly reference a definition).

Remember back in the 90's when Netscape and MS were breaking standards right and left so that their browsers would have an edge on the competition? That was the wrong way to do it, and it created the mess we're in now with sloppy HTML spewed all over the web and designers unable to use compliant designs because the most popular browser doesn't even try to support standards (an example here). Google is doing this the right way. They went back and read the HTML specification to see if it was already capable of doing what they needed. It does? Great! Let's utilize the standard!

Granted, HTML these days has a much better design than it did in the pre-4.0 specifications. Back when Netscape and MS were at each other's throats the document format was actually incapable of doing a lot of things that designers wanted to do on the web. But HTML is a very mature format these days.

If I'm creating documents, it's often for digital dissemination anyhow, in which case I can use HTML, TXT, RTF, or PDF for document distribution, all of which can be created by any tool. I've been thinking about picking up Keynote (as I do have need to do presentations from time to time)

I agree with you and Eric Meyer that many web developers take browser marketshare statistics too seriously, but does that explain why Google would remove their browser statistics?

Sorry, part of the last URL fell out (from now on, I'll check the links in the preview...) Here's the right one: Complex Spiral demo. Check out the distorted version too...