The broken web | Hacker News Reader

The broken web

entertainingcode.com

12 pointsslicedlime8 comments

I'm surprised this article makes no mention of CSS3, which has a solution to equal column heights. Besides, didn't the promotion of CSS-only layouts for tabular content only come about after the introduction of CSS2, with predictable results?

These are the options I see in decreasing order of immediate utility: 1. Use tables if that's the most elegant solution. 2. Promote/advocate for adoption of CSS3. 3. Propose another means for layout. 4. Complain about CSS2.

Ahh! I had forgotten CSS3 already had some new love for columns. Excellent.

Also, I agree with your options. Tables for this one little thing won't kill us until we get widespread CSS3.

I think this article misses the point a bit.

Well, if having to use 6 nestled divs, large-number positive and negative margins and all kinds of bullshit like that isn’t an ugly hack, then I don’t know what is.

Point 1: If your css contains large number positive and negative margins, you are probably doing something wrong in the first instance.

Point 2: Whilst tables may be an easier/less hacky/whatever solution the fact is, is that they are terrible for accessibility. At least with your nested divs a screen reader can still (hopefully) make sense of your document and make the web a little bit nicer for someone who requires assistive technology.

Disclaimer: I'm a front-end developer so this kind of thing is my bread and butter.

Also it misses the point of "CSS hacks", interpreting it to mean hacky CSS, just so they can score points.

In reality a "CSS hack" is a way to write CSS that doesn't get seen by certain browsers, usually by reverse engineering and taking advantage of certain wacky interpretations of CSS. That is "hack" here is used in the good sense.

http://www.webdevout.net/css-hacks

I just was ranting to a friend about this exact problem before clicking this link.

This "using a background image to make your faux columns look like columns" business is bunk. To call it "hack-free" is lunacy.

Is there any other part of CSS that's so jacked up? (Other than all the stuff that's really IE's fault.) I find CSS to work fine in nearly every other way... always takes some trial and error since I don't code CSS every day, but it's sensible and in many ways seems elegant. But equal-height columns really need some love in CSS4 or something.

I'm switching to a table for the one part of my site that needs this. And I won't abide any grief for this "hack" since it's about 50x less hacky than what I'd have to do to make it work in a "non-hacky" way.

I just followed some of the links and came across a very interesting effect, much in line with the theme of the "broken web"...

if you follow the homer simpson link you end up on the blog of Roman Cortes, which happens to be in spanish. Chrome helpfully offers to translate the page into english for me (and does a reasonable job too), which is great, but destroys the CSS effect, and you get a somewhat different homer than everyone's used to...

http://www.romancortes.com/blog/homer-css/

It's not clear from your post if you understand this or not, but for the benefit of anyone else, the reason it breaks is (I guess) because the face is made up of many superimposed letters, colored and positioned with CSS. If you translate the page it's likely that certain letters or runs of letters will be translated to equivalent words in the other language.

This is kind of interesting, but doesn't really say anything about whether the web is broken or not. The fact that it doesn't work for me in Chrome even in the original spanish might though.

I wrote a post on a potential way we could fix the layout problems with HTML, but stay backwardly compatible. This article hits on exactly the problem. Layout. More precisely the default page flow layout of HTML which is great for text layout, but that's about it.

http://wrongnotes.blogspot.com/2009/09/what-if-html-wasnt-to...

Reply on news.ycombinator.com