Re: [css-d] Float list items

[Arlen Walker]

On Feb 22, 2008, at 5:50 PM, Rick Faircloth wrote:

> However, I've been wondering lately, if I shouldn't code the HTML  
> content,
> without any design applied, then start applying design.

Yep. Andy Clarke, "Transcending CSS" is a terrific book espousing this.

Have Fun,
Arlen

--
In God we trust, all others must supply data

__
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] Float list items

[Rick Faircloth]

Thanks for those thoughts and links, Georg.

I will check them out and run up on your philosophical perspectives.

Rick

> -Original Message-
> From: Gunlaug Sørtun [mailto:[EMAIL PROTECTED]
> Sent: Saturday, February 23, 2008 10:28 AM
> To: Rick Faircloth
> Subject: Re: [css-d] Float list items
> 
> Rick Faircloth wrote:
> > On a practical note...
> 
> ...which I prefer to respond to "off list".
> 
> > I've been wanting to find a tutorial on constructing CSS based
> > websites that demonstrates best-practice methodology.
> 
> You'll only find loads of "personal preferences" - practices that works
> well for a person or a small group with more or less the same mindset.
> "Best practice" is still a mix of facts and fiction, where "fiction" is
> what some _think_ is best but haven't actually tested in depth.
> 
> > By that, I mean what is the best order to follow in constructing a
> > site, start-to-finish?
> 
> The "best" order is actually: any order, or disorder, that works for
> you, and results in something that works for as many as possible -
> preferably all but that's not always possible.
> 
> > I typically start with a design, then code the CSS and HTML to make
> > the design happen.
> 
> That seems to be how most designers do it. That's also usually how
> developers have to do it when presented with a visual design.
> 
> > However, I've been wondering lately, if I shouldn't code the HTML
> > content, without any design applied, then start applying design.
> 
> That's how many developers do it - more or less, when designing
> something from scratch.
> 
> > This would help focus my attention on the semantic aspects of the
> > site, followed by the style of the site, which is also the order of
> > importance... content first, then style second.
> >
> > Are there any tutorials that could walk me through such an approach?
> > I prefer to learn-by-doing, rather than just read about the
> > philosophy.
> 
> Maybe <http://www.htmldog.com/> will work. I've never really looked into
> it and it is a bit old, but some say it's a good place to start.
> 
> > I could do it on my own, but by working with a pre-coded and designed
> >  site, I can focus more on the methodology rather than the technical
> >  aspects.
> 
> Pre-coded and designed sites becomes outdated in a short time, so using
> one as base means you'll be working with yesterday's methodology and
> solutions to design-problems. That's not always bad, as long as you're
> aware of the limited value some of the old stuff has.
> 
> 
> I can only offer "philosophical views" on the design-process...
> <http://www.gunlaug.no/contents/wd_additions_11.html>
> ...and a few tricks.
> 
> I always design at html level, so my work will usually come through
> quite well at that level...
> <http://www.delorie.com/web/lynxview.cgi?url=http%3A%2F%2Fwww.gunlaug.no%2Fcontents%2Fwd_addit
> ions_11.html>
> 
> I include all sides of web design and development in the term "design",
> so "visual design" is just a small part of it all.
> HTML, CSS, Javascript etc. are tools - different painting-tools if you
> like, and I like to paint on all media that are available to me across
> the web...
> <http://www.gunlaug.no/contents/wd_1_04.html>
> <http://www.gunlaug.no/contents/wd_1_04_01.html>
> <http://www.gunlaug.no/contents/wd_1_05.html>
> This "extended canvas" is constantly changing, so it sometimes feels as
> if I am "painting on water in the midst of a stream".
> 
> The only "constant" I use is an old and well-tuned HTML Tidy...
> <http://www.gunlaug.no/contents/wd_1_07.html>
> ...but that option is of less value for web designers today since all
> recent versions of Tidy seem to have been "made useless by default" and
> almost impossible to make to work properly. Even the Tidy attached to
> the HTML validator is "no good" IMO, because it's infected with
> "personal preferences".
> 
> Sites like <http://www.webaim.org/>, <http://accessites.org/site/> and
> <http://www.accessifyforum.com/> can be very useful, but you'll have to
> develop a sense of what's useful and what isn't, as "personal
> preferences", "quick fixes" and "lack of will and testing" will always
> have to be sorted - especially on the forum.
> 
> 
> Apart from that it's "persistence" and "testing, testing and more
> testing", that is the key. If you aim at developing good strategies,
> then you will. It may just take a while until you reach a "comfort
> level", and once that is reached you can't afford to slow down if you
> want to keep up. Web design/development is still in its infancy.
> 
> 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] Float list items

[david]

Rick Faircloth wrote:
> However, I've been wondering lately, if I shouldn't code the HTML content,
> without any design applied, then start applying design.

That's exactly what you should do, because that is how screen readers 
and search engines see it. They don't pay attention to CSS (except 
possibly for aural css, if any, in the case of screen readers).

-- 
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] Float list items

[Rick Faircloth]

On a practical note...

I've been wanting to find a tutorial on constructing CSS based websites
that demonstrates best-practice methodology.

By that, I mean what is the best order to follow in constructing a site,
start-to-finish?

I typically start with a design, then code the CSS and HTML to make the
design happen.

However, I've been wondering lately, if I shouldn't code the HTML content,
without any design applied, then start applying design.

This would help focus my attention on the semantic aspects of the site,
followed by the style of the site, which is also the order of importance...
content first, then style second.

Are there any tutorials that could walk me through such an approach?
I prefer to learn-by-doing, rather than just read about the philosophy.

I could do it on my own, but by working with a pre-coded and designed
site, I can focus more on the methodology rather than the technical aspects.

Links, anyone?

Thanks,

Rick

> -Original Message-
> From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On
> Behalf Of Highpowered
> Sent: Friday, February 22, 2008 3:29 PM
> To: 'CSS Discussion'
> Subject: Re: [css-d] Float list items
> 
> Thierry Koblentz wrote:
> >>> It is about semantic markup, we should use HTML elements for the
> >>> information they convey, not for how they display.
> >>>
> >> Yes, it's all about semantic markup - the very base for conscious web
> >> development.
> >>
> >> However, a general problem here on css-d is that "semantics" is pretty
> >> much "off-topic" - unless (maybe if) the OP supply something that is so
> >> weak on markup level that it simply can't be (visually) solved with CSS.
> >>
> >
> > I see your point Georg, but imho "semantics" is "on-topic" when choices
> > involve different type of hooks.
> > For example nested elements (spans within list items) vs. siblings (dt/dd
> > pairs)
> >
> >
> I'm inclined to agree that the subject of semantic HTML is on point in
> this forum. Semantic HTML is absolutely essential to taking full
> advantage of what CSS offers us as web developers. CSS by itself can do
> nothing, and the power of what it CAN do is directly proportional to the
> quality of the HTML code to which it is applied. Semantic use of HTML
> elements gives us the best method to build pages, indeed whole sites,
> that are flexible, accessible, easier to maintain, portable, modular,
> and lean, delivering pages that load fast, minimize server overhead, and
> are easier for search engines to index and classify properly.
> 
> I'll grant that web standards are not a law, and designers are still
> free to base their layouts in tables if they so choose. Even in 2008,
> the arguments are still made in support of non-semantic table-based
> layout techniques (among other less-than-optimal coding practices),
> usually based on "expediency" in building pages or because CSS
> implementation proved "difficult".  It may surprise some newbies to know
> that most, if not all, advanced CSS practicioners have had occassion
> during their careers to use the same suboptimal techniques that we try
> to dissuade anyone from using today.  We have also found CSS to be
> rather difficult at times. This forum, more than any place on the face
> of the Earth, is a testament to that fact. Yet, those who have kept the
> faith and worked to internalize and solidify their understanding of the
> Semantic HTML/CSS/DOM triumvirate have been able to forge great advances
> if not create a completely new model of web development - one that
> recognizes the critical value of the unseen structure of the front end,
> or as Theodore Roethke wrote: "What shakes the eye but the invisible?"
> 
> Troubles in CSS can frequently be traced to suboptimal HTML structure.
> Semantics are a principle of creating optimal HTML structure. Thus, as
> its catalyst, semantic HTML goes hand-in-hand with CSS in any discussion
> thereof.
> 
> __
> 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] Float list items

[Highpowered]

Thierry Koblentz wrote:
>>> It is about semantic markup, we should use HTML elements for the
>>> information they convey, not for how they display.
>>>   
>> Yes, it's all about semantic markup - the very base for conscious web
>> development.
>>
>> However, a general problem here on css-d is that "semantics" is pretty
>> much "off-topic" - unless (maybe if) the OP supply something that is so
>> weak on markup level that it simply can't be (visually) solved with CSS.
>> 
>
> I see your point Georg, but imho "semantics" is "on-topic" when choices
> involve different type of hooks.
> For example nested elements (spans within list items) vs. siblings (dt/dd
> pairs)
>
>   
I'm inclined to agree that the subject of semantic HTML is on point in 
this forum. Semantic HTML is absolutely essential to taking full 
advantage of what CSS offers us as web developers. CSS by itself can do 
nothing, and the power of what it CAN do is directly proportional to the 
quality of the HTML code to which it is applied. Semantic use of HTML 
elements gives us the best method to build pages, indeed whole sites, 
that are flexible, accessible, easier to maintain, portable, modular, 
and lean, delivering pages that load fast, minimize server overhead, and 
are easier for search engines to index and classify properly.

I'll grant that web standards are not a law, and designers are still 
free to base their layouts in tables if they so choose. Even in 2008, 
the arguments are still made in support of non-semantic table-based 
layout techniques (among other less-than-optimal coding practices), 
usually based on "expediency" in building pages or because CSS 
implementation proved "difficult".  It may surprise some newbies to know 
that most, if not all, advanced CSS practicioners have had occassion 
during their careers to use the same suboptimal techniques that we try 
to dissuade anyone from using today.  We have also found CSS to be 
rather difficult at times. This forum, more than any place on the face 
of the Earth, is a testament to that fact. Yet, those who have kept the 
faith and worked to internalize and solidify their understanding of the 
Semantic HTML/CSS/DOM triumvirate have been able to forge great advances 
if not create a completely new model of web development - one that 
recognizes the critical value of the unseen structure of the front end, 
or as Theodore Roethke wrote: "What shakes the eye but the invisible?"

Troubles in CSS can frequently be traced to suboptimal HTML structure. 
Semantics are a principle of creating optimal HTML structure. Thus, as 
its catalyst, semantic HTML goes hand-in-hand with CSS in any discussion 
thereof.
 
__
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] Float list items

[Thierry Koblentz]

> > It is about semantic markup, we should use HTML elements for the
> > information they convey, not for how they display.
> 
> Yes, it's all about semantic markup - the very base for conscious web
> development.
> 
> However, a general problem here on css-d is that "semantics" is pretty
> much "off-topic" - unless (maybe if) the OP supply something that is so
> weak on markup level that it simply can't be (visually) solved with CSS.

I see your point Georg, but imho "semantics" is "on-topic" when choices
involve different type of hooks.
For example nested elements (spans within list items) vs. siblings (dt/dd
pairs)

-- 
Regards,
Thierry | http://www.TJKDesign.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] Float list items

[Gunlaug Sørtun]

Thierry Koblentz wrote:

> It is about semantic markup, we should use HTML elements for the 
> information they convey, not for how they display.

Yes, it's all about semantic markup - the very base for conscious web
development.

However, a general problem here on css-d is that "semantics" is pretty
much "off-topic" - unless (maybe if) the OP supply something that is so
weak on markup level that it simply can't be (visually) solved with CSS.

Subsequently, the OP gets to define the "semantics" (or not), and I
get to respond with a CSS solution (if there is one) with almost
complete disregard of "semantic markup". Not an ideal situation, but at
least it reduces the number of cases worth responding to - on css-d.
It also provides me with loads of examples of weaknesses on the basic
level and above, which is useful (to me) even if I don't/can't respond.

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] Float list items

[Thierry Koblentz]

> -Original Message-
> From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED]
> discuss.org] On Behalf Of Rick Faircloth
> Sent: Thursday, February 21, 2008 5:47 PM
> To: 'CSS Discussion'
> Subject: Re: [css-d] Float list items
> 
> Your example below is impressive, Georg, for sure.
> 
> But just look at the CSS hoops you had to jump through
> just to get what looks like a simple table.
> 
> Why go to so much trouble avoid using  ?
> Just because you can or is there a more compelling reason?
> 
> I'm relatively new to the CSS scene, so these are sincere questions.

It is about semantic markup, we should use HTML elements for the information
they convey, not for how they display.
Another option here could be to use a DL (Definition List), as it is a list
of item/price pairs.

-- 
Regards,
Thierry | http://www.TJKDesign.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] Float list items [medium]

[Rick Faircloth]

Hi, Peter, and thanks for the reply!  :o)

Rick

> -Original Message-
> From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On
> Behalf Of Peter Hyde-Smith
> Sent: Thursday, February 21, 2008 10:55 PM
> To: 'CSS Discussion'
> Subject: Re: [css-d] Float list items [medium]
> 
> 
> - Original Message -
> From: "Rafael" <[EMAIL PROTECTED]>
> To: "Rick Faircloth" <[EMAIL PROTECTED]>
> Cc: "'CSS Discussion'" 
> Sent: Thursday, February 21, 2008 9:32 PM
> Subject: Re: [css-d] Float list items [medium]
> 
> 
> > Rick Faircloth wrote:
> >> Your example below is impressive, Georg, for sure.
> >>
> >> But just look at the CSS hoops you had to jump through
> >> just to get what looks like a simple table.
> >>
> >> Why go to so much trouble avoid using  ?
> >> Just because you can or is there a more compelling reason?
> >>
> >> I'm relatively new to the CSS scene, so these are sincere questions.
> >>
> >> Rick
> >>
> >Hi, Rick.
> >George's example is a quite complex one (from my point of view,
> > anyway), so that, and the lack of standard support by IE (and some
> > others?), is probably the reason why you see such code.
> >
> >Anyway, back to your question: Why not using a table? As George said
> > before, that's simply because the data shown is not tabular data. For
> > tabular data we will understand that which has no sense if not seen in
> > such a way (tabulated), e.g. a calendar. Now, aside from this, tables
> > are actually complex elements, and as such, they have been problematic
> > or "expensive" to deal with by browsers and other softwares (like
> > screen-readers).
> >
> >There are cases, though, where the desired layout calls for the help
> > of a table, and although basically everyone here would ask you not to
> > use it (or simply to use another layout) it could be your best or even
> > only choice. If I recall correctly, George had to make use of JavaScript
> > to make IE's behave as desired.
> >
> >But I went beyond the topic, the point here (and what semantic
> > markup is about) is to use the actual HTML elements that are supposed to
> > enclose your data, like using  for addresses (of course), 
> > for keyboard sample,  for code (duh!),  for sample output,
> >  for definitions,  for abbreviations,  for paragraphs,
> > ++ for definition lists (such as glossaries), etc. And not
> > using  just because you want to indent the code, or using
> >  to add some spacing.
> >
> >I hope this helped, and sorry if I bored you along the way.
> >Rafael.
> > __
> 
> 02/21/2008
> 
> Hello Rick:
> 
> As a follow on to Rafal, it is a case of using the right tool for the right
> job. HTML for structural markup, CSS for layout and style. The business end
> of the tools aren't broken, it's the handles (the browsers) that tend to
> have ergonomic problems.
> 
> Peter
> www.fatpawdesign.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/


__
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] Float list items

[Rick Faircloth]

Thanks for the explanation, Georg!  :o)

Rick

> -Original Message-
> From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On
> Behalf Of Gunlaug Sørtun
> Sent: Thursday, February 21, 2008 10:34 PM
> To: 'CSS Discussion'
> Subject: Re: [css-d] Float list items
> 
> Rick Faircloth wrote:
> > Your example below is impressive, Georg, for sure.
> >
> > But just look at the CSS hoops you had to jump through just to get
> > what looks like a simple table.
> >
> > Why go to so much trouble avoid using  ? Just because you can
> > or is there a more compelling reason?
> >
> > I'm relatively new to the CSS scene, so these are sincere questions.
> 
> In addition to the reasons I've given in the relevant article...
> <http://www.gunlaug.no/contents/wd_additions_22.html>
> ...it's because...
> 
> 1: that type of content doesn't fit the description "tabular data", I
> just wanted it to appear in a certain way. Its appearance can be changed
> and restyled (for different media for instance) without touching the
> actual document, which is impossible if a table had been used.
> 
> 2: one day a version of that MS-excuse for a browser may support the
> relevant CSS, and not be in need of proprietary MS-garbage like
> IE-expressions for simulating standard CSS.
> Maybe IE8 (with an opt-in)...
> 
> 3: by always pushing and testing what can and can not be done with CSS
> today to the limits across browser-land in test-cases like that, I learn
> what choices I have and how to make things work whenever I need to for
> real-world cases. Such knowledge sure comes handy at times :-)
> 
> 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/


__
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] Float list items [medium]

[Rick Faircloth]

Not boring at all!
Thanks for the explanation, Rafael!  :o)

Rick

> -Original Message-
> From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On
> Behalf Of Rafael
> Sent: Thursday, February 21, 2008 10:32 PM
> To: Rick Faircloth
> Cc: 'CSS Discussion'
> Subject: Re: [css-d] Float list items [medium]
> 
> Rick Faircloth wrote:
> > Your example below is impressive, Georg, for sure.
> >
> > But just look at the CSS hoops you had to jump through
> > just to get what looks like a simple table.
> >
> > Why go to so much trouble avoid using  ?
> > Just because you can or is there a more compelling reason?
> >
> > I'm relatively new to the CSS scene, so these are sincere questions.
> >
> > Rick
> >
> Hi, Rick.
> George's example is a quite complex one (from my point of view,
> anyway), so that, and the lack of standard support by IE (and some
> others?), is probably the reason why you see such code.
> 
> Anyway, back to your question: Why not using a table? As George said
> before, that's simply because the data shown is not tabular data. For
> tabular data we will understand that which has no sense if not seen in
> such a way (tabulated), e.g. a calendar. Now, aside from this, tables
> are actually complex elements, and as such, they have been problematic
> or "expensive" to deal with by browsers and other softwares (like
> screen-readers).
> 
> There are cases, though, where the desired layout calls for the help
> of a table, and although basically everyone here would ask you not to
> use it (or simply to use another layout) it could be your best or even
> only choice. If I recall correctly, George had to make use of JavaScript
> to make IE's behave as desired.
> 
> But I went beyond the topic, the point here (and what semantic
> markup is about) is to use the actual HTML elements that are supposed to
> enclose your data, like using  for addresses (of course), 
> for keyboard sample,  for code (duh!),  for sample output,
>  for definitions,  for abbreviations,  for paragraphs,
> ++ for definition lists (such as glossaries), etc. And not
> using  just because you want to indent the code, or using
>  to add some spacing.
> 
> I hope this helped, and sorry if I bored you along the way.
> Rafael.
> __
> 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] Float list items [medium]

[Peter Hyde-Smith]

- Original Message - 
From: "Rafael" <[EMAIL PROTECTED]>
To: "Rick Faircloth" <[EMAIL PROTECTED]>
Cc: "'CSS Discussion'" 
Sent: Thursday, February 21, 2008 9:32 PM
Subject: Re: [css-d] Float list items [medium]


> Rick Faircloth wrote:
>> Your example below is impressive, Georg, for sure.
>>
>> But just look at the CSS hoops you had to jump through
>> just to get what looks like a simple table.
>>
>> Why go to so much trouble avoid using  ?
>> Just because you can or is there a more compelling reason?
>>
>> I'm relatively new to the CSS scene, so these are sincere questions.
>>
>> Rick
>>
>Hi, Rick.
>George's example is a quite complex one (from my point of view,
> anyway), so that, and the lack of standard support by IE (and some
> others?), is probably the reason why you see such code.
>
>Anyway, back to your question: Why not using a table? As George said
> before, that's simply because the data shown is not tabular data. For
> tabular data we will understand that which has no sense if not seen in
> such a way (tabulated), e.g. a calendar. Now, aside from this, tables
> are actually complex elements, and as such, they have been problematic
> or "expensive" to deal with by browsers and other softwares (like
> screen-readers).
>
>There are cases, though, where the desired layout calls for the help
> of a table, and although basically everyone here would ask you not to
> use it (or simply to use another layout) it could be your best or even
> only choice. If I recall correctly, George had to make use of JavaScript
> to make IE's behave as desired.
>
>But I went beyond the topic, the point here (and what semantic
> markup is about) is to use the actual HTML elements that are supposed to
> enclose your data, like using  for addresses (of course), 
> for keyboard sample,  for code (duh!),  for sample output,
>  for definitions,  for abbreviations,  for paragraphs,
> ++ for definition lists (such as glossaries), etc. And not
> using  just because you want to indent the code, or using
>  to add some spacing.
>
>I hope this helped, and sorry if I bored you along the way.
>Rafael.
> __

02/21/2008

Hello Rick:

As a follow on to Rafal, it is a case of using the right tool for the right 
job. HTML for structural markup, CSS for layout and style. The business end 
of the tools aren't broken, it's the handles (the browsers) that tend to 
have ergonomic problems.

Peter
www.fatpawdesign.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] Float list items

[Gunlaug Sørtun]

Rick Faircloth wrote:
> Your example below is impressive, Georg, for sure.
> 
> But just look at the CSS hoops you had to jump through just to get 
> what looks like a simple table.
> 
> Why go to so much trouble avoid using  ? Just because you can 
> or is there a more compelling reason?
> 
> I'm relatively new to the CSS scene, so these are sincere questions.

In addition to the reasons I've given in the relevant article...

...it's because...

1: that type of content doesn't fit the description "tabular data", I
just wanted it to appear in a certain way. Its appearance can be changed
and restyled (for different media for instance) without touching the
actual document, which is impossible if a table had been used.

2: one day a version of that MS-excuse for a browser may support the
relevant CSS, and not be in need of proprietary MS-garbage like
IE-expressions for simulating standard CSS.
Maybe IE8 (with an opt-in)...

3: by always pushing and testing what can and can not be done with CSS
today to the limits across browser-land in test-cases like that, I learn
what choices I have and how to make things work whenever I need to for
real-world cases. Such knowledge sure comes handy at times :-)

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] Float list items [medium]

[Rafael]

Rick Faircloth wrote:
> Your example below is impressive, Georg, for sure.
>
> But just look at the CSS hoops you had to jump through
> just to get what looks like a simple table.
>
> Why go to so much trouble avoid using  ?
> Just because you can or is there a more compelling reason?
>
> I'm relatively new to the CSS scene, so these are sincere questions.
>
> Rick
>   
Hi, Rick.
George's example is a quite complex one (from my point of view, 
anyway), so that, and the lack of standard support by IE (and some 
others?), is probably the reason why you see such code.

Anyway, back to your question: Why not using a table? As George said 
before, that's simply because the data shown is not tabular data. For 
tabular data we will understand that which has no sense if not seen in 
such a way (tabulated), e.g. a calendar. Now, aside from this, tables 
are actually complex elements, and as such, they have been problematic 
or "expensive" to deal with by browsers and other softwares (like 
screen-readers).

There are cases, though, where the desired layout calls for the help 
of a table, and although basically everyone here would ask you not to 
use it (or simply to use another layout) it could be your best or even 
only choice. If I recall correctly, George had to make use of JavaScript 
to make IE's behave as desired.

But I went beyond the topic, the point here (and what semantic 
markup is about) is to use the actual HTML elements that are supposed to 
enclose your data, like using  for addresses (of course),  
for keyboard sample,  for code (duh!),  for sample output, 
 for definitions,  for abbreviations,  for paragraphs, 
++ for definition lists (such as glossaries), etc. And not 
using  just because you want to indent the code, or using 
 to add some spacing.

I hope this helped, and sorry if I bored you along the way.
Rafael.
__
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] Float list items

[Rick Faircloth]

Your example below is impressive, Georg, for sure.

But just look at the CSS hoops you had to jump through
just to get what looks like a simple table.

Why go to so much trouble avoid using  ?
Just because you can or is there a more compelling reason?

I'm relatively new to the CSS scene, so these are sincere questions.

Rick



/* almost equal height in IE7/win - standard compliant mode */
html>body .row div {min-height: 
expression(parseFloat(this.parentNode.offsetHeight)-33);}

/* almost equal height in IE6/win - mode independency */
* html .row div {height: expression(eval(document.compatMode &&
document.compatMode=='CSS1Compat') ?
(parseFloat(this.parentNode.offsetHeight)-33)
:(parseFloat(this.parentNode.offsetHeight)-1));}

/* almost equal width in IE/win - mode independency */
.row .three {width: expression(eval(document.compatMode &&
document.compatMode=='CSS1Compat') ?
154
:158);}

/* border-width compensation - mode independency */
.row .one {margin-left: expression(eval(document.compatMode &&
document.compatMode=='CSS1Compat') ?
-1
:0);}

/* vertical centering in IE/win */

html body div.vam p {
margin-top: expression(((this.parentElement.offsetHeight/2)
-(parseInt(this.offsetHeight)/2) -2) <0 ? "0" : 
(this.parentElement.offsetHeight/2)
-(parseInt(this.offsetHeight)/2) -2 +'px') ;}
/* see: <http://www.gunlaug.no/contents/wd_additions_20.html> for more info on 
vertical centering */


}

/* overriding IE-expressions used on screen, so they do not apply when document 
is printed */
@media print {
html .row div {height: auto!important;}
html .row div {min-height: 0!important;}
.row .three {width: auto!important;}
.row .one {margin-left: 0!important;}
#three p {margin-top: 6px!important;}
}









> -Original Message-
> From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On
> Behalf Of Gunlaug Sørtun
> Sent: Thursday, February 21, 2008 5:53 PM
> To: 'CSS Discussion'
> Subject: Re: [css-d] Float list items
> 
> Rick Faircloth wrote:
> > What difference does it make?
> 
> The difference is (already made) at the most basic level: what it is,
> and what it can be made to look as when we add a bit of styling.
> 
> - An HTML table will always be a table and nothing but a table, no
> matter how it's styled.
> - Some text in a list will always be some text in a list and can not be
> anything but some text in a list, no matter how it's styled.
> 
> For instance, this...
> <http://www.gunlaug.no/tos/moa_11g.html>
> ...is not a table, regardless of its appearance in CSS capable browsers
> and a few others.
> 
> regards
>   Georg
> --



__
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] Float list items

[Gunlaug Sørtun]

Rick Faircloth wrote:
> What difference does it make?

The difference is (already made) at the most basic level: what it is,
and what it can be made to look as when we add a bit of styling.

- An HTML table will always be a table and nothing but a table, no
matter how it's styled.
- Some text in a list will always be some text in a list and can not be
anything but some text in a list, no matter how it's styled.

For instance, this...

...is not a table, regardless of its appearance in CSS capable browsers
and a few others.

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] Float list items

[Rick Faircloth]

What difference does it make?

Rick

> -Original Message-
> From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On
> Behalf Of Gunlaug Sørtun
> Sent: Thursday, February 21, 2008 1:35 PM
> To: Usamah M. Ali
> Cc: Brian Jones; CSS Discuss
> Subject: Re: [css-d] Float list items
> 
> Usamah M. Ali wrote:
> 
> > My normal approach would be using a table. ;~)
> 
> For tabular data - yes, but not if it was just a visual effect I were after.
> 
>   Georg
> --



__
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] Float list items

[Gunlaug Sørtun]

Usamah M. Ali wrote:

> My normal approach would be using a table. ;~)

For tabular data - yes, but not if it was just a visual effect I were after.

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] Float list items

[Usamah M. Ali]

>
>  My normal approach would be something like...
>
>  
>  item 1   price1
>  item 2   price2
>  item 3   price3
>  
>
>  li {text-align: right;}
>  li span {float: left;}
>
>  ...as CSS can only target elements, not the content within them ... at
>  least not yet.
>

My normal approach would be using a table. ;~)

Usamah
__
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] Float list items

[Gunlaug Sørtun]

Brian Jones wrote:

> I have a list

> How can I contruct my css so that the 'item' is to the left of the
> div and the 'price' floats to the far right of the div

My normal approach would be something like...


item 1   price1
item 2   price2
item 3   price3


li {text-align: right;}
li span {float: left;}

...as CSS can only target elements, not the content within them ... at
least not yet.

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/

[css-d] Float list items

[Brian Jones]

Hi,

I have a list

 
  item 1   price1
  item 2   price2
  item 3   price3
 


How can I contruct my css so that the 'item' is to the left of the div
and the 'price' floats to the far right of the div


-- 
-Bdot
"There are only 10 kinds of people in this world. Those who understand
binary and those who don't"
__
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/