I'm really trying to go table-less on the site in my sig, and have fixed a few problems (the revisions, once uploaded, will have it work down to 800x600--that was a big oversight). (Edit: Those fixes are uploaded, it's good to 1024x768, and somewhat passable below that)

But I actually want the child pages to look like tables, so I used the table-row and table-cell properties for display: in nested divs (it's a look, so I don't consider it a cheat). But IE7, and I presume below, apparently do not recognize those properties and display them as if they were :block. Hideous.

Is there some kind of conditional comment fix I can use, do I have to completely rework it, or should I just go back to using tables thanks to our good friends at Microsoft?

I'm strongly considering:
<!--[if IE]>
body{display:none;}
<![endif]-->

If more people did that, maybe Microsoft would catch the clue.

Did you use display:table on the div ? I'm pretty sure the IE monsters obey that.

Microsoft catch a clue???
The only thing they are capable of catching is a virus!

Originally Posted by LadynRed

Did you use display:table on the div ? I'm pretty sure the IE monsters obey that.

I tried display:table; no, IE doesn't support that either. So I got everything how I wanted it with display:table-row and table-cell in my divs for the standards-compliant browsers, then put in conditional comments to display:block for the rows and display:inline for the cells, with floats to correct for IE. It did nothing, it is still displaying as if I had made everything display:block. So I took it back out.

This is one of those where you can kind of cheat for everyone, since your "tables" are a fixed width.

Put a left float on each "cell" in IE using conditional commenting, give each "cell" a fixed width, and create a div to clear the IE floats and you'll be good to go.

I'll have to try that when I get back home, along with a couple other errors I found (these actually *were* my doing, though ). Here's adding to your TP dominance.....

Originally Posted by ADAM Web Design

This is one of those where you can kind of cheat for everyone, since your "tables" are a fixed width.

Put a left float on each "cell" in IE using conditional commenting, give each "cell" a fixed width, and create a div to clear the IE floats and you'll be good to go.

Well, I tried that, or at least I think I did. What happens is IE refuses to float the "cells" and stacks them one atop the other, as if I hadn't done anything. This is getting infuriating. What you see in the other browsers is how I intended it to look. I'm tempted to just leave it as is. I have about had it with fixing things for IE; I'm not on Microsoft's payroll, so that's it for me with creating workarounds for their sorry excuse for a browser. Anyone misguided enough to use it can look upon a broken mess when looking at my site.

Thanks for your help again, though. Have you an example of what you're talking about that I can look at in case I change my mind?

OK, rant over. IE has a way of eliciting that in me.

So does anyone have a code example of the conditional comments and CSS within required to make IE float my "cells", then clear them? I must have missed something somewhere.

I've just tried this CSS and it seems to work roughly. Essentially (as Adam said) I've floated the cells left and cleared the rows. I've also added a height to the rows and fiddled a bit with the borders. It still needs a little work and some things may not work as they should (e.g. cells now vertically align top, not center and the rows don't expand if the text overflows). This looked OK in IE7 and Fx when I tested it quickly. (The display table things are optional and make the Fx version look more like your original.)

        .table{
        border-collapse: separate;
        border-style: double;
        border-color: #ACACAC;
        background-color: #000000;
        padding: 10px;
        /*display: table;*/
        text-align: center;
        }
        .row{
        border-collapse: separate;
        background-color: #000000;
        /*display: table-row;*/
        clear: both;
        height: 260px;
        text-align: center;
        }
        .cell{
        border-collapse: separate;
        border-style: double;
        border-color: #ACACAC;
        background-color: #000000;
        height: 240px;
        /*display: table-cell;*/
        padding: 10px;
        width: 230px;
        float: left;
        vertical-align: middle;
        }

If you do want to use conditional comments, stick something like this in your header (obviously after the main CSS link):

    <!--[if lte IE 7]>
    <link rel="stylesheet" type="text/css" href="http://example.com/ie7.css" />
    <![endif]-->

Edit: I also meant to say that, if you are genuinely using a table as here (e.g. 3 rows * 3 cols), is it not legitimate to use a real table...?

Edit 2: Actually, you shouldn't need the row objects at all as everything's fixed width.

I don't understand it. You guys are 100% correct. This should work. But now the "cells" are stacking on one another. I have never seen the like of this in my life. I thank all of you, truly. But this is a mystery that just blows me back....

I may be missing something, Tim, but I don't see a float or any fixed widths on this page:

http://bellsouthpwp2.net/j/a/jam331/...bdesigns1.html

Hmmm... Don't wish at all to appear patronising, but have you removed the clear: both from the cells...?

Here are the files I used. Does that work for you? (I would have attached them, but the attach thing seems to be broken.)

Originally Posted by ADAM Web Design

I may be missing something, Tim, but I don't see a float or any fixed widths on this page:

http://bellsouthpwp2.net/j/a/jam331/...bdesigns1.html

That's because I haven't uploaded any changes, I tried your suggestions locally first. I'll take a look at this .zip, I'm sure I've overlooked something. Yeah, I took the clear: both out, but something's still not quite right.

Well, Andrew, the way you've done it, it works. Which means I may have to rework all my pages, because I tried doing the same thing with conditional comments (yes, after the link to the css page) and all IE displayed was crap, cells stacked on cells. It should have worked, because it was the exact same CSS that should have overridden the stylesheet. Hmmm. Maybe I should use that page as a separate CSS page and try a conditional comment link instead. That might work, just in case there's something conflicting I'm not seeing.

Well, back to work, then. Thanks again; I'll let you know what happens....

Update: Andrew, if I use your stylesheet as the stylesheet, IE 7 will display things as it should. But if I try to link to it in a conditional comment, then the very same stylesheet breaks down again. Same location, same everything. I know that IE for Mac does not support conditional comments, but I'm running Win XP SP2.

I finally did it!!! Thing is, I didn't want to sacrifice my decent layout in the standards-compliant browsers, so I had to figure out what was conflicting. The big one was putting a clear:none; in the IE stylesheet. I also had to put a div to clear for IE between the sections. But I think I finally got a good approximation. Sometimes I think that for all I can do in other areas, I'm still a perpetual noob.

Thanks again to everyone for your help.

Glad it worked out for you dude...although your picture is really starting to creep me out.

Originally Posted by ADAM Web Design

Glad it worked out for you dude...although your picture is really starting to creep me out.

ROTFLMAO! Yeah, but it fits the theme....viewed out of context it's a pretty gruesome pic.

This has been a learning experience...I'm getting fairly decent at using the document flow--the homepage is an example--but what a nightmare the child pages were!