Feeling a little Divvy

Loop13

So this one day I decided that I'd go around looking at company websites. If this site has taught me anything, it's that the most hilarious stuff comes from companies who absolutley fail at IT stuff. My first few website ideas were pretty boring -- either the company had everything wrapped up in Flash, or it was rather normal. In spite of getting almost no laughs, or even some surprise, I continued on. I was determined to find something that would amuse me, if only for that day.

My quest lead me to Bed, Bath, and Beyond. The first thing that tipped me off was the home page link : http://www.bedbathandbeyond.com/default.asp?order_num=-1&

Order number is negative one? Although it wasn't funny, it tipped me off to something funny, so I opened the source. I noticed that my browser was a bit slow to open the source. How odd, since the site looked pretty simple. At most, I expected to see deeply nested tables for the picture alignment on the front page.

I scrolled down. At first, I noticed the usual commented out javascript and actually useful HTML. Nothing fun there. So I scrolled and I scrolled until I hit that magical line number 382.

It was not just a few divs, or even several divs. This was a sea of divs. At first I scrolled down but there was no end in sight, so I began to page down. It still took a while before it was all over. In the end, I saw over 800 divs. Didn't even have to count, since they were all named "div id='cell 2', div id='cell 100'..."

North_Bus

888 DIV's, as of 9:00 this evening.

But... wow. It looks like they've added the capability to make any one class of item appear differently than all the rest. Want your salt shaker text bold and your acryllic grinders headings size 14? No problem! [</sarcasm>]... as long as you have access to the source code, that is.

It's not even oddly beautiful on a rapid scrolldown like so many autogenerated code mistakes are. This one is just flat-out ugly.

DescentJS

So they perfectly replicate the design of a table made layout with a div/css layout, but fail to get the maintanability or clarity or anything that that should provide? Brillant!!

Someone_You_Know

@DescentJS said:

So they perfectly replicate the design of a table made layout with a div/css layout, but fail to get the maintanability or clarity or anything that that should provide? Brillant!!

Sure. You see this a lot with people who have been told TABLES BAD! CSS GOOD! either without being told why, or without understanding why. They just emulate a table without actually using tables, thus satisfying the requirements they've been given by their superiors (who also don't understand why laying out a web page with tables might be a bad idea). Everybody's happy. Except, not really.

bstorer

@DescentJS said:

So they perfectly replicate the design of a table made layout with a div/css layout, but fail to get the maintanability or clarity or anything that that should provide? Brillant!!

Not to mention that it takes far fewer DIVs to make a browser crap out than it does table cells.

Master_Chief

@Someone You Know said:

You see this a lot with people who have been told TABLES BAD! CSS GOOD! either without being told why, or without understanding why.

I like divs and css because then I don't need to fark around with a table which often, in my experience, leads to far worse code and less precision control.

Sir_Twist

It is fine to use tables for tabular data. That's what they're for. They are bad and wrong for layout for accessibility reasons, but also because it mixes content with layout.

derula

@Linked site said:

<div id="cell3" STYLE="TOP:0px; BACKGROUND-COLOR: #EDF9FF; HEIGHT: 17px; text-decoration: none; COLOR: white; FONT-FAMILY: arial; position: absolute; FONT-SIZE: 11px; FONT-WEIGHT: normal; LETTER-SPACING: 1px; PADDING-LEFT: 6px; PADDING-TOP: 2px; WIDTH: 200px; BORDER-BOTTOM: #BED3DD 2px solid;" ><a href="javascript:to2Style(863)" class=menupA onmouseout='doIMouseOut(3,1)' onmouseover='doTMouseOver(-1,1,3,1)' >Bedding                               </a></div>

Can anyone please hit the author of this code with a 20 pound CSS book? Thanks.

db2

@Sir Twist said:

It is fine to use tables for tabular data. That's what they're for. They are bad and wrong for layout for accessibility reasons, but also because it mixes content with layout.

So much this. A lot of folks for so long have been speaking strongly against tables in favor of CSS, divs, etc. (not that I necessarily disagree with that sentiment) that a number of developers have gone to the extreme in the other direction, avoiding tables wherever possible. And then you generally end up with a level of WTFery that goes far, far beyond some measly table-based layouts. The <table> tag is not evil! Use it where appropriate!

toth

@db2 said:

@Sir Twist said:
It is fine to use tables for tabular data. That's what they're for. They are bad and wrong for layout for accessibility reasons, but also because it mixes content with layout.

So much this. A lot of folks for so long have been speaking strongly against tables in favor of CSS, divs, etc. (not that I necessarily disagree with that sentiment) that a number of developers have gone to the extreme in the other direction, avoiding tables wherever possible. And then you generally end up with a level of WTFery that goes far, far beyond some measly table-based layouts. The <table> tag is not evil! Use it where appropriate!

I, fortunately, have never encountered a <div>-table like in the OP. I can't imagine the headache in making that look right. Why do people have so much trouble using things for their purpose and not trying to violently force them into doing something ungodly?

derula

@toth said:

I can't imagine the headache in making that look right.

Column 1

Column 2

Row 1

This

is a

Row 2

CSS

table

<div style="display:table">
  <div style="display:table-row">
    <div style="display:table-cell"></div>
    <!-- ... -->
  </div>
  <!-- ... -->
</div>

Okay, this only works in real browsers (non-IE), but it does give a huuuge advantage over tables. Right? Right?

toth

@derula said:

@toth said:
I can't imagine the headache in making that look right.

Column 1

Column 2

Row 1

This

is a

Row 2

CSS

table
<div style="display:table">
  <div style="display:table-row">
    <div style="display:table-cell"></div>
    
  </div>
  
</div>
Okay, this only works in real browsers (non-IE), but it does give a huuuge advantage over tables. Right? Right?

Ah yes, I forgot about the table display values. Curse you, CSS, making me look foolish!

snover

@derula said:

Okay, this only works in real browsers (non-IE)

To be fair, Microsoft finally implemented this in IE8. Of course, in most cases where you’re using creating grid displays of products like this, you’re probably better off using inline-blocks instead, but that’s not particularly here nor there.

morbiuswilters

@snover said:

@derula said:
Okay, this only works in real browsers (non-IE)
To be fair, Microsoft finally implemented this in IE8. Of course, in most cases where you’re using creating grid displays of products like this, you’re probably better off using inline-blocks instead, but that’s not particularly here nor there.

Are you better off using tables instead, since that's what they are for?

snover

@morbiuswilters said:

Are you better off using tables instead, since that's what they are for?

Tables are for multi-dimensional data, like

Food	Price
Bread	$2.99
Milk	$1.40

If you’re creating a visual grid of one-dimensional data, like a list of products, you should use one of the list types (ol, dl, ul) instead with an inline-block display for the list items. One of the major benefits of doing this is that your grid can be fluid, so elements from one row will move up if there is enough space.

belgariontheking

@snover said:

I edit my posts habitually after posting them because I can never make a decision on anything.

False. I'm convinced that you do it entirely to piss me off. I read your post, then upon reloading the "not read" page, I saw you had posted again, but you hadn't, but had merely edited.

That or CS fucked up. That works too.

esd

@Sir Twist said:

It is fine to use tables for tabular data. That's what they're for. They are bad and wrong for layout for accessibility reasons...

This is actually a myth. There is nothing in Section 508 that says you can't use tables for layout. And screen readers generally parse table-based layout just as well as a pure CSS layout.

snover

@esd said:

This is actually a myth. There is nothing in Section 508 that says you can't use tables for layout

Section 508 is not the only major guideline for accessibility. WCAG is clear that tables should not be used for layout. Guideline 3 gives “using a table for layout” as a specific example of bad behaviour. Guideline 5.3 is a bit more specific and states “Do not use tables for layout unless the table makes sense when linearized. Once user agents support style sheet positioning, tables should not be used for layout.”

@esd said:

screen readers generally parse table-based layout just as well as a pure CSS layout

This isn’t necessarly true. If you are giving a list of items and you put it in a basic table, the screen reader has no semantic information to derive from, so instead of being told “ordered list of 12 items”, you end up being dictated table information that really doesn’t make sense in context.

derula

@snover said:

Tables are for multi-dimensional data, like

Food Price

Bread $2.99

Milk $1.40

If you’re creating a visual grid of one-dimensional data, like a list of products, you should use one of the list types (ol, dl, ul) instead with an inline-block display for the list items.

What about

<ul>
  <li><ul><li>Food</li><li>Price</li></ul></li>
  <li><ul><li>Bread</li><li>$2.99</li></ul></li>
  <li><ul><li>Milk</li><li>$1.40</li></ul></li>
</ul>

and some CSS?

li { list-style-type:none }
ul { display:table }
ul > ul { display:table-row }
ul > ul > li { display:table-cell }
ul:first-child > ul > li { font-weight:bold; text-align:center }

(No guarantee that it will work though, probably need some more)

snover

I assume you are trying to be TRWTF with that attempt. :)

@derula said:

ul > ul { display:table-row }
ul > ul > li { display:table-cell }
ul:first-child > ul > li { font-weight:bold; text-align:center }

This will not work; your second group of <ul>s are not direct descendants. I am sure with a little more work you will come up with the ultimate solution to tables though. ;)

derula

@snover said:

This will not work; your second group of <ul>s are not direct descendants. I am sure with a little more work you will come up with the ultimate solution to tables though. ;)

There you are.
Are you happy now?

Edit: Okay, I could also add a solution involving <span>'s... or one or two that combine some of the above... but that wouldn't change much anyway.