Re: [css-d] CSS replacement for table layouts

[christianz]

Geoff,

If a table layout works for you, the project, and the client then go for it. I 
understand the frustrations you have outlined. There really are some things 
that are easier to do with tables. Personally, I never layout a page with 
tables anymore because I need to keep the stuff in my portfolio up-to-date and 
to show that I know how to do CSS layouts. If that's not a concern to you then 
don't lie awake at night worrying about it. I still often work on pages that 
other people have created using tabled layout. Sometimes I can CSSify it 
somewhat, but I can't always clean it all up. But there's definitely people out 
there who still use tables for layout who have never even heard of using CSS 
instead and they make sites that work just fine. Yes, yes, I know all the 
reasoning behind why CSS-based is better and 99% agree with it and 99.9% comply 
with it but am also confronted by the fact that 99.99% of the world just 
doesn't care.

Christian


__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] CSS replacement for table layouts

[Gunlaug Sørtun]

Geoff Hoffman wrote:
> Is it that the browsers don't support what the CSS is supposed to do
>  yet?

Internet Explorer doesn't support CSS table at all up to and including
IE7. That is the only reason CSS table can't be used.

IE8 will render CSS tables ok.

> Or am I incorrect in thinking that display:table; display:table-row; 
> and display:table-cell; etc., are not supposed to help me layout 
> pages...

CSS table _is_ supposed to help you layout pages. No other reasons for
CSS table to be in the spec., as HTML tables are supposed to take take
care of tabular data now and in the future.

> Or am I just a fool for trying?

Until all IE7 and older have been replaced as surfing-tools ... yes :-)

We can't sell clients something that doesn't work at all for 70% of
end-users, so if clients really, really, want table layouts - give them
HTML table layouts.

Not that I think it is difficult to replicate _most_ HTML table layouts
with CSS, but CSS table is not supported well enough to bother with in
regular production - yet. Regular float-based layouts still work best as
table-replacements in _most_ cases.

The only thing CSS table has going for it at the moment, is that it is
easy to turn one into something else, if necessary, without touching the
source-code. The same can be done with an HTML table since nowadays
they're just a set of CSS defaults in browsers anyway, but IE7 and older
still won't play ball.

For now all we can do is to play around with various solutions to
IE/win' lack of support for CSS table...

...in playgrounds well away from regular clients.

regards
Georg
-- 
http://www.gunlaug.no
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] CSS replacement for table layouts

[Angel Martin Alganza]

On Wed, Dec 10, 2008 at 05:10:45PM -0700, Geoff Hoffman wrote:
> Sorry for the long post, but I've been thinking about this for over a
> year now, and it's been asked many times before without a viable answer
> that is actually reliably workable in a production environment. 
> 
> The bottom line is, I still have to resort to using tables for
> grid-based layouts, because I have had no luck making  tags work in
> certain circumstances.
> 
> Particularly I am referring to "3x3 grid" layouts where I need to have
> repeating backgrounds in a tic-tac-toe type of a setup:

Doesn't something as extremely simple and so fast to code as this
example I've just put together meet that?

http://mendel.ugr.es/~ama/tmp/3x3.html

Regards,
Ángel


signature.asc
Description: Digital signature
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] CSS replacement for table layouts

[david]

Angel Martin Alganza wrote:
> On Wed, Dec 10, 2008 at 05:10:45PM -0700, Geoff Hoffman wrote:
>> Sorry for the long post, but I've been thinking about this for over a
>> year now, and it's been asked many times before without a viable answer
>> that is actually reliably workable in a production environment. 
>>
>> The bottom line is, I still have to resort to using tables for
>> grid-based layouts, because I have had no luck making  tags work in
>> certain circumstances.
>>
>> Particularly I am referring to "3x3 grid" layouts where I need to have
>> repeating backgrounds in a tic-tac-toe type of a setup:
> 
> Doesn't something as extremely simple and so fast to code as this
> example I've just put together meet that?
> 
> http://mendel.ugr.es/~ama/tmp/3x3.html

Hmmm, in FF3 here, that just gives me a vertical bulleted list of 
numbers, not a 3x3 "table" layout. I see no background colors, or 
borders or anything. And list items are by default block elements, so 
display block is doing nothing.

-- 
David
[EMAIL PROTECTED]
authenticity, honesty, community
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] CSS replacement for table layouts

[Éric Vesque]

Angel Martin Alganza a écrit :
> On Wed, Dec 10, 2008 at 05:10:45PM -0700, Geoff Hoffman wrote:
>   
>> Sorry for the long post, but I've been thinking about this for over a
>> year now, and it's been asked many times before without a viable answer
>> that is actually reliably workable in a production environment. 
>>
>> The bottom line is, I still have to resort to using tables for
>> grid-based layouts, because I have had no luck making  tags work in
>> certain circumstances.
>>
>> Particularly I am referring to "3x3 grid" layouts where I need to have
>> repeating backgrounds in a tic-tac-toe type of a setup:
>> 
>
> Doesn't something as extremely simple and so fast to code as this
> example I've just put together meet that?
>
> http://mendel.ugr.es/~ama/tmp/3x3.html
>
> Regards,
> Ángel
>   

Hi Ángel,
Your solution seems to work only in Opera, other browsers don't like ids 
begining by numbers.
I have rewritten your page with some more stuff in order to have valid html 
(the div#conteneur has nothing to do with validation).
You may see it at http://www.banturle.com/divers/grille3x3.html

Regards,

-- 
Éric Vesque
imprimerie Print, Limoges
http://www.affaire-imprimerie.com



__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] CSS replacement for table layouts

[Angel Martin Alganza]

Hi Éric, everybody,

On Thu, Dec 11, 2008 at 11:53:49AM +0100, Éric Vesque wrote:
> Your solution seems to work only in Opera, other browsers don't like ids 
> begining by numbers.

It was such a quick thing that I didn't bother to check it out in any
other browser than the one I use most of the time while browsing with
graphics (I also use Elinks for just text browsing :-).

> I have rewritten your page with some more stuff in order to have valid html 
> (the div#conteneur has nothing to do with validation).
> You may see it at http://www.banturle.com/divers/grille3x3.html

Thanks for that.  But what have you added the div for?  ul is already
an html element one can style with CSS.

Cheers,
Ángel


signature.asc
Description: Digital signature
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] CSS replacement for table layouts

[Éric Vesque]

Angel Martin Alganza a écrit :
> Hi Éric, everybody,
>
>   
> Thanks for that.  But what have you added the div for?  ul is already
> an html element one can style with CSS.
>
> Cheers,
> Ángel
>   
> 
I took the first of my templates and the div is there...
For sure it is of no use here, but I didn't take the time to remove it.
Cheers,

-- 
Éric Vesque
imprimerie Print, Limoges
http://www.affaire-imprimerie.com



__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] CSS replacement for table layouts

[Kevin Warrington]

Floating of the li's will make it very hard for you to preserve a grid
layout using this approach.  You will rarely will see content with the
same height in the first two rows, if at all.  Try adding a  to
the a12 li.

-Kev

2008/12/11 Angel Martin Alganza <[EMAIL PROTECTED]>:
> On Wed, Dec 10, 2008 at 05:10:45PM -0700, Geoff Hoffman wrote:
>> Sorry for the long post, but I've been thinking about this for over a
>> year now, and it's been asked many times before without a viable answer
>> that is actually reliably workable in a production environment.
>>
>> The bottom line is, I still have to resort to using tables for
>> grid-based layouts, because I have had no luck making  tags work in
>> certain circumstances.
>>
>> Particularly I am referring to "3x3 grid" layouts where I need to have
>> repeating backgrounds in a tic-tac-toe type of a setup:
>
> Doesn't something as extremely simple and so fast to code as this
> example I've just put together meet that?
>
>http://mendel.ugr.es/~ama/tmp/3x3.html
>
> Regards,
> Ángel
>
> -BEGIN PGP SIGNATURE-
> Version: GnuPG v1.4.6 (GNU/Linux)
>
> iD8DBQFJQOMdLOwvgZNB5ZERArA+AKC0JSmCFEeNJFszmEJpzg4t2mPq3wCfYdt5
> oZyWQYTFdC1xqjBU8wqYXrs=
> =5OHl
> -END PGP SIGNATURE-
>
> __
> css-discuss [EMAIL PROTECTED]
> http://www.css-discuss.org/mailman/listinfo/css-d
> List wiki/FAQ -- http://css-discuss.incutio.com/
> List policies -- http://css-discuss.org/policies.html
> Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
>
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] CSS replacement for table layouts

[Éric Vesque]

Kevin Warrington a écrit :
> Floating of the li's will make it very hard for you to preserve a grid
> layout using this approach.  You will rarely will see content with the
> same height in the first two rows, if at all.  Try adding a  to
> the a12 li.
>
> -Kev
>   
This can be done by styling the li's where you want the new "line" to 
begin, as shown here : http://www.banturle.com/divers/grille3x3.html

-- 
Éric Vesque
imprimerie Print, Limoges
http://www.affaire-imprimerie.com



__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] CSS replacement for table layouts

[Éric Vesque]

Kevin Warrington a écrit :
> Floating of the li's will make it very hard for you to preserve a grid
> layout using this approach.  You will rarely will see content with the
> same height in the first two rows, if at all.  Try adding a  to
> the a12 li.
>
> -Kev
>
>   
Ooops.
I've answered too quickly.
My solution doesn't work in IE (of course! Might have been surprising.).

-- 
Éric Vesque
imprimerie Print, Limoges
http://www.affaire-imprimerie.com



__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] CSS replacement for table layouts

[Kevin Warrington]

> This can be done by styling the li's where you want the new "line" to begin,
> as shown here : http://www.banturle.com/divers/grille3x3.html

That is true, but keeping in mind that the content within these li's
will be variable, do you really want to be applying clears based on li
height, as opposed to using a simple table structure?

-Kev
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] CSS replacement for table layouts

[Éric Vesque]

Kevin Warrington a écrit :
>> This can be done by styling the li's where you want the new "line" to begin,
>> as shown here : http://www.banturle.com/divers/grille3x3.html
>> 
>
> That is true, but keeping in mind that the content within these li's
> will be variable, do you really want to be applying clears based on li
> height, as opposed to using a simple table structure?
>
>   

Well, for semantic reasons, I use tables only for tabular data.
Sure, a table design may "look" perfect, but what about users with text 
readers?

-- 
Éric Vesque
imprimerie Print, Limoges
http://www.affaire-imprimerie.com



__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] CSS replacement for table layouts

[Kevin Warrington]

> Well, for semantic reasons, I use tables only for tabular data.
> Sure, a table design may "look" perfect, but what about users with text
> readers?

I do agree that tables should only be used in extreme cases where
there is really no other alternative.  However, some of the CSS design
choices you make should also take into account the target audience,
determined by you and your client.  Maybe you are willing to sacrifice
some accessibility to get that extra wow.
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] CSS replacement for table layouts

[David Hucklesby]

On Thu, 11 Dec 2008 12:23:15 +0100, Angel Martin Alganza wrote:
> Hi Éric, everybody,
>
> On Thu, Dec 11, 2008 at 11:53:49AM +0100, Éric Vesque wrote:
>
>> Your solution seems to work only in Opera, other browsers don't like ids 
>> begining by
>> numbers.
>>
> It was such a quick thing that I didn't bother to check it out in any other 
> browser
> than the one I use most of the time while browsing with graphics (I also use 
> Elinks for
> just text browsing :-).
>
>> I have rewritten your page with some more stuff in order to have valid html 
>> (the
>> div#conteneur has nothing to do with validation).
>> You may see it at http://www.banturle.com/divers/grille3x3.html
>>
> Thanks for that.  But what have you added the div for?  ul is already an html 
> element
> one can style with CSS.
>

Your solution is very close, Angel. Some very minor tweaks got it working
this end in all my browsers -

 - Add a DOCTYPE for IE's sake. I used 

 - Replace the child selector (>) with a space so IE 6 understands

 - Replace 'display: block;' with 'display: inline;' to fix IE double margins

 - Add 'overflow: hidden; *overflow: visible;' to the UL to contain
   the floats in other than IE (where the width adds "layout" for this)

Nice demo. It's unfortunate, but IE is so prevalent we do need to test
with that browser -- even IE 5 is important, as recent IE versions revert
to IE 5.5 rendering in quirks mode. If a visitor comes via the Google
cached version, they get quirks in any IE version. Yikes!

Cordially,
David
--

__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] CSS replacement for table layouts

[David Hucklesby]

On Thu, 11 Dec 2008 10:53:34 +0100, Angel Martin Alganza wrote:
>
> Doesn't something as extremely simple and so fast to code as this example 
> I've just put
> together meet that?
>
> http://mendel.ugr.es/~ama/tmp/3x3.html
>

Oops. In my reply, the DOCTYPE should read:

  

Sorry.

Cordially,
David
--

__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] CSS replacement for table layouts

[Angel Martin Alganza]

On Thu, Dec 11, 2008 at 12:20:10PM -0800, David Hucklesby wrote:
> Your solution is very close, Angel. Some very minor tweaks got it working
> this end in all my browsers -

As I already said, it was a couple of minutes typing to just show that
what the OP claimed he was trying for years (even asking on different
fora and so on) was as simple as a floated list.
> Nice demo.

Thanks.  Just wanted to show how easy the OP requirements could be meet
on a few lines of code.  That's all.

> It's unfortunate, but IE is so prevalent we do need to test
> with that browser -- even IE 5 is important, as recent IE versions revert
> to IE 5.5 rendering in quirks mode. If a visitor comes via the Google
> cached version, they get quirks in any IE version. Yikes!

I don't care about IE unless I get paid for it ;-) and so, of course,
I was not going to try to get the 3x3 demonstration working on it (I
even have to remote log to a W2k3 server to fire up IE, which I only
do at the end of all my web developments just to see if the site looks
sufficiently good there (of course I usually don't try to get web
sites to look identical in web browsers and InfernalEngine, it's
enough for me if the site is readable and doesn't look too ugly
---again, unless I get paid to fix it on IE, when I take the time to
make an special CSS loaded using condicional comments for the IE).

Cheers,
Ángel


signature.asc
Description: Digital signature
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/