More CSS

Warning: Lots of techie/nerdie commentary ahead. Folks not fascinated by CSS should just skip this one.

Wow. It's almost the end of the year, and I'm still thinking about this stuff. My latest CSS venture is the website of the store I work at. So I'm actually getting paid for thinking about this stuff at the moment.

Anyway, I embraced CSS and threw out all the tables on my blogs, and I learned the mantra of "tables are BAD". But with the store website I ran into a big issue. I have a lot of tabular data... and most of the pages were massive tables nested into tables.

But I'd learned the mantra, so I ruthlessly went through the pages and started to throw out all the tables there, too. Until I realized that there is no way in CSS to properly display such data. Indeed, it doesn't make any sense to throw out tables if you are using them to display tabular data. Tables were made to display tabular data.

So I went through and removed all the tables that were being used for layout purposes only, which is what all the objection to tables really is. I left in all the tables I was using for data, and started to figure out how to use CSS to style them.

And immediately ran smackdab into another problem.

Because I was trying to preserve the layout of the original website (which was designed by the owner's daughter and works well for our purposes), I used CSS to put in margins that center the content a fixed number of pixels in. I like the look, it makes the page easier to read, and I thought it would work great.

And in Firefox and Opera it does look fine. But a bunch of the tables looked very odd in Internet Explorer. I was at work when I discovered the oddity, and the lightbulb lit in my brain after I'd stewed about it while serving customers. All the tables that looked wrong had the width set. All of them had a percentage, and the tables that looked the worst had the larger percentages set. So if I had set a table to be 100%, it needed a horizontal scrollbar in IE, but looked just fine in Firefox and Opera. That's because IE decided that the 100% meant the width of the browser, not the width of the bit of the page it was in, and yet still honored the left margin! ARGH!

I tried to Google a workaround to fix the problem, but virtually any discussion of tables on the 'net is about why you shouldn't use them to make page layouts, or barring that, really basic "how to set up a table" tutorials. I don't even know for sure that the problem in IE is a bug. I do know that I want some of the tables to span the width of the content part of the pages I'm building, but I can't use the most obvious method because it breaks for anyone using IE to view the site.

I'm still working out options. I think I want to standardize all the tables on the whole site, and that suggests to me using a fixed-width table instead of liquid tables. I'm fond of liquid layouts, because it makes more sense to me to let the user have more control over what they are viewing. But perhaps for a retail site, I need to sacrifice user control to make the site look more uniform?

I must ponder this some more. But in the meantime, I removed a lot of the table width tags to make the page look a little better until I get I chance to figure out how to actually fix it.