
The broken web - slicedlime
http://www.entertainingcode.com/archives/the-broken-web/
======
westbywest
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.

~~~
glhaynes
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.

------
hellotoby
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.

~~~
ZeroGravitas
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>

------
glhaynes
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.

------
jurjenh
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/>

~~~
ZeroGravitas
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.

------
chubbard
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...](http://wrongnotes.blogspot.com/2009/09/what-if-html-wasnt-top-dog.html)

