Comments on: Learning from Gmail

By: amin

amin — Tue, 02 Oct 2007 04:08:47 +0000

But it also need to specify the cols as well

By: AndrÃ¡s BÃ¡rthÃ¡zi

AndrÃ¡s BÃ¡rthÃ¡zi — Sat, 25 Aug 2007 06:45:08 +0000

Joseph: you were right, I was not able to do something like this. Anyway, it’s possible to use JavaScript to set the width of the column. I wouldn’t say if that’s better than this solution, so it was great to read about it.

Chad: I don’t really understand your laugh, I guess you hadn’t got that “ellipsis” means “…” and nothing like a geometric shape here.

By: Chad

Chad — Fri, 24 Aug 2007 05:21:14 +0000

“And with IE, you can toss in the {text-overflow:ellipsis;} for an added visual treat”

Have no idea what you’re talking about Janos (3 comments up), but as a math guy, it just sounds funny… Microsoft didn’t add a text-overflow:ellipsis; did they??? Ha

-if they really did, I retract my statement and ask what it is

I had the worst time today with table widths and scriptaculous Effect.* (* being any effect). With tables, for some reason, hiding things and then showing them again makes Safari (and only Safari) forget what their width was. Is this similar to “resizing a browser window”, since dimensions of a table are being changed?

By: Jesse Kuhnert

Jesse Kuhnert — Thu, 23 Aug 2007 18:50:56 +0000

@Scott {text-overflow:ellipsis;} ? I’ve never used that one before. thanks =)

p.s. I do have some white-space: nowrap mixed in there in different places – it’s possible I f-ed up the demo page snippet I put together though.

By: Scott

Scott — Thu, 23 Aug 2007 17:22:08 +0000

One more thing that is missing from that code: {white-space:nowrap;}

I don’t think it works otherwise

By: Scott

Scott — Thu, 23 Aug 2007 17:20:45 +0000

And with IE, you can toss in the {text-overflow:ellipsis;} for an added visual treat

By: Janos

Janos — Thu, 23 Aug 2007 09:44:03 +0000

here = http://blog.opencomponentry.com/grid.html

By: amin

amin — Thu, 23 Aug 2007 09:25:45 +0000

I didn’t understand how to use the overflow effectively. I want to make my tables appear just like gmail did. on one line only. Could you show an example of this magic

By: tuan

tuan — Thu, 23 Aug 2007 09:01:59 +0000

Wait, we’re getting a tip about fixed table layout? What’s next, clearing floats with clear: both? While it’s a good tip, it’s not exactly news.

By: anonymous

anonymous — Thu, 23 Aug 2007 08:41:25 +0000

@AndrÃ¡s BÃ¡rthÃ¡zi: problem with DIVs is that you can’t make grid like one in GMail (with one free-sized column) without really bad and big CSS hacks. So tables rulez

By: Joseph Stalin

Joseph Stalin — Thu, 23 Aug 2007 07:50:37 +0000

Why is it defined as “.grid * td”? Would not the “.grid td” be just as good?

By: Lindsey Simon

Lindsey Simon — Thu, 23 Aug 2007 06:59:10 +0000

One thing I noticed with Opera/old Safari is that the 100% width in the td caused some serious rendering issues. Dunno if you noticed that too.

By: AndrÃ¡s BÃ¡rthÃ¡zi

AndrÃ¡s BÃ¡rthÃ¡zi — Thu, 23 Aug 2007 06:43:07 +0000

As using tables sounds not a bad idea for this kind of data, I saw that grid like layouts just using divs instead. I can remember that when I’ve tried implementing a grid layout with tables, I had problems with controlling the column widths/paddings properly. Maybe i was just lame, I don’t know.

Anyway, you can do the same with plain divs, too:
[div style="background: #ddd; float: left; width: 100px; overflow: hidden; white-space: nowrap;"]
Take it eeeeeeaaaaaaassyyyyyyyyy!
[/div]