Stylesheets - Converting from tables to CSS

Author

Converting from tables to CSS

Steve Swift

2007-10-16, 6:15 am

For the impatient: Go to http://swiftys.org.uk/div_tables.html then
please try to answer questions 1. and/or 2. below.

For everyone else: I have an HTML table that would probably be better
using DIVs. Each row contains a variable number of cells and they are of
varying width. There is no reason for any of the vertical joins to
align. The effect is like a brick wall made of bricks which all have the
same height, but which have random widths. The actual page is on my
employer's intranet, so not generally visible.

I'm quite new to DIVs so it seems to me that I should use a DIV with
float:left;width:100% to contain each row, and DIVs with
float:left;width:xx% to construct each cell.

You can see my test page at http://swiftys.org.uk/div_tables.html
I have pared it down to the absolute minimum for clarity; maybe too much?

I have a couple of questions:

1. Do I avoid the double borders between adjacent cells by setting the
border-width of one of the adjacent edges to zero? If so, it seems
that I need four basic styles of cells to complete an arbitrary table

2. (Bonus) Why did I have to add <BR><BR> between my last DIV and the
<H2>Table</H2>
(without which, that H2 appeared *inside* the preceding DIV! I'll
bet that some people would love this effect.)

--
Steve Swift
http://www.swiftys.org.uk/swifty.html
http://www.ringers.org.uk

Ben C

2007-10-16, 6:15 am

On 2007-10-16, Steve Swift <Steve.J.Swift@XXXXXXXXXX> wrote:
> For the impatient: Go to http://swiftys.org.uk/div_tables.html then
> please try to answer questions 1. and/or 2. below.
[...]
> I have a couple of questions:
>
> 1. Do I avoid the double borders between adjacent cells by setting the
> border-width of one of the adjacent edges to zero?

I don't see why not.

[...]
> 2. (Bonus) Why did I have to add <BR><BR> between my last DIV and the
> <H2>Table</H2>
> (without which, that H2 appeared *inside* the preceding DIV! I'll
> bet that some people would love this effect.)

Before the <h2> everything is a float-- two big grey floats, with more
floats inside them.

Floats don't normally push down the top edges of subsequent blocks. They
overlap the top border and padding (of the subsequent blocks) and sit on
top of them, while inline content in subsequent blocks flows around
them.

That's what's happening here.

The <br><br> is putting some extra inline content in the <h2>, which
moves its text content (the word "Table") down a bit.

Consecutive <br>s are frowned upon. Better is to set "clear: both" on
the <h2>. But you still lose the <h2>'s top margin since space applied
to clear floats counts as top margin-- the spec says clearance aligns
the top _border edge_ of the element with the bottom outer edge of the
lowest float that must be cleared.

So better still might be to change those grey containers from float:
left; width: 100% to overflow: hidden.

Width: 100% often isn't a great idea because if the element has borders,
padding or margin, it ends up slightly too wide for its container.
Normal flow boxes get their widths calculated automatically so as to get
their outer margin edges nicely fitting in the available space.

The other problem with floating the grey containers is you lose the
normal reference point for the <h2>'s top margin as discussed.

Using overflow: hidden has the side-effect of making a block grow in
height to contain its floats, but allows it to remain normal-flow.

John L.

2007-10-16, 6:15 am

Ben C wrote:

> Using overflow: hidden has the side-effect of making a block grow in
> height to contain its floats, but allows it to remain normal-flow.

Any solution that doesn't work in IE6 is not a good solution in my book.

Bergamot

2007-10-16, 6:20 pm

John L. wrote:
> Ben C wrote:
>
>
> Any solution that doesn't work in IE6 is not a good solution in my book.

Your book isn't very compromising. There is no reason why any one
solution needs to be all-encompassing.

overflow:hidden is a great solution for browsers other than IE.
For IE, zoom:1 on the container does the same thing.

Zoom is an IE-proprietary property that does no harm to other browsers
and does a whole lot of good to IE. It doesn't validate, but so what?

--
Berg

Nik Coughlin

2007-10-16, 6:20 pm

"Bergamot" <bergamot@visi.com> wrote in message
news:5njq2eFiq7ujU1@mid.individual.net...
>
> Zoom is an IE-proprietary property that does no harm to other browsers
> and does a whole lot of good to IE. It doesn't validate, but so what?

It will validate if you stick it in a conditional comment. Additionally it
is safer than assuming that it will do no harm to other browsers (although
this is true).

Bergamot

2007-10-17, 3:16 am

Nik Coughlin wrote:
> "Bergamot" <bergamot@visi.com> wrote in message
> news:5njq2eFiq7ujU1@mid.individual.net...
>
> It will validate if you stick it in a conditional comment.

That's like putting invalid code within a JavaScript write just to get
around the validator flagging an error. Validated code is not an end to
itself, though some people think it is. Validation is a tool, nothing more.

I prefer not to pollute the html on every page with IE crap, be it in
comments or not.

--
Berg

dorayme

2007-10-17, 3:17 am

In article <5nl69pFimcjdU1@mid.individual.net>,
Bergamot <bergamot@visi.com> wrote:

> Nik Coughlin wrote:
>
> That's like putting invalid code within a JavaScript write just to get
> around the validator flagging an error.

Not quite if there are more issues to be dealt with. It is more a
general way to hive off a special sheet just for IE's eyes. Not a
bad bit of bookkeeping really. Whereas the javascript trick is a
mere no-good, lowdown...

> Validated code is not an end to
> itself, though some people think it is. Validation is a tool, nothing more.

You are not wrong about this.

--
dorayme

Steve Swift

2007-10-17, 6:18 am

> overflow:hidden is a great solution for browsers other than IE.
> For IE, zoom:1 on the container does the same thing.

In my case, IE6 and some reasonably recent Firefox are the only browsers
that I'm obliged to support (Corporate standards).

Since I use Opera, that is naturally included in my list. I then add
Safari(Windows) simply for completeness. Then I throw in Off-by-One to
ensure that my pages degrade gracefully.
Finally I test with IE7, otherwise I'll get a nasty surprise when that
becomes the Corporate standard.

Thanks to everyone who has helped me with their comments!

--
Steve Swift
http://www.swiftys.org.uk/swifty.html
http://www.ringers.org.uk