5 ms·

List. No CSS hacks. Full cross-browser.

57 points by jollyjerry 18y ago

ph0rque 18y ago
I'm more impressed by the diagrams explaining what's going on with each html tag and its CSS attributes.
- feverishaaron 18y ago
  Agreed. I think this type of patient explanation is what people need to learn CSS well. Too often, sites that get linked up offer specific "css recipes" without any guide as to what is happening. It works sometimes to just copy and paste, but does that really "teach you how to fish"?
mshafrir 18y ago
<nitpicking>It can be argued that the wrapper div is not semantically relevant.</nitpicking>
- gord 18y ago
  interesting point actually... Given the same textual semantic content 'information', a badly laid out and a well laid out site can be orders of magnitude easier/harder to read. One might draw from this that _layout_ has some semantic content. Think of a google result list being randomized - the layout clearly has semantic content [best ranked first in layout]
  - mshafrir 17y ago
    In this case Google could use an ordered list element to give context to the search results.
gord 18y ago
I think its quite a good site for css layout examples... I remember discovering how position:absolute was in fact _relative_ to the enclosing div/element, ayaaay! another css layout approach given here - http://www.digital-web.com/articles/everything_you_know_about_CSS_Is_wrong/ http://www.digital-web.com/articles/everything_you_know_abou... [ although ie6 seems to be broken wrt tabular divs, eek ]
- blasdel 18y ago
  position:absolute only behaves that way relative to a positioned parent -- if the parent doesn't have the position attribute set, it keeps looking up the hierarchy until it finds one that is (or is the root).
  - pmjordan 18y ago
    While we're nit-picking: if the parent doesn't have the position attribute set isn't quite accurate: the containing block must not have static positioning (which it does by default), but one of absolute, relative or fixed.
    - gord 18y ago
      thats kind of my point - its not trivially obvious that "absolute" is not absolute. I know ... RTFM.. but then theres what browsers actually do as a mixin. Hence good examples of motifs that are reasonably portable are all the more valuable.
horatio 18y ago
Doesn't work in my Chrome actually. 2.0.173.1
- juanpablo 18y ago
  It works for me (same Chrome version)
BonsaiKitt3n 18y ago
welcome to 2004!
runningskull 18y ago
Thanks for the timely submission. I was just doing this exact thing last night and was having trouble getting it to behave.
webwright 18y ago
Oh, hell-- I've got some karma to spare... I could do this with a table in about 11 seconds.
ja30278 18y ago
I like CSS, but every time I see an article bragging about a new technique for accomplishing something that _should_ be simple, I lose the faith a little bit. Can't we just give up and add '<tabset>' and '<tab>' tags to html and call it a day. At the very least, we could stop abusing the poor <ul> tag.

57 points by jollyjerry 18y ago

ph0rque 18y ago

I'm more impressed by the diagrams explaining what's going on with each html tag and its CSS attributes.

feverishaaron 18y ago
Agreed. I think this type of patient explanation is what people need to learn CSS well. Too often, sites that get linked up offer specific "css recipes" without any guide as to what is happening. It works sometimes to just copy and paste, but does that really "teach you how to fish"?

mshafrir 18y ago

<nitpicking>It can be argued that the wrapper div is not semantically relevant.</nitpicking>

gord 18y ago
interesting point actually... Given the same textual semantic content 'information', a badly laid out and a well laid out site can be orders of magnitude easier/harder to read. One might draw from this that _layout_ has some semantic content. Think of a google result list being randomized - the layout clearly has semantic content [best ranked first in layout]
- mshafrir 17y ago
  In this case Google could use an ordered list element to give context to the search results.

gord 18y ago

I think its quite a good site for css layout examples... I remember discovering how position:absolute was in fact _relative_ to the enclosing div/element, ayaaay! another css layout approach given here - http://www.digital-web.com/articles/everything_you_know_about_CSS_Is_wrong/ http://www.digital-web.com/articles/everything_you_know_abou... [ although ie6 seems to be broken wrt tabular divs, eek ]

blasdel 18y ago
position:absolute only behaves that way relative to a positioned parent -- if the parent doesn't have the position attribute set, it keeps looking up the hierarchy until it finds one that is (or is the root).
- pmjordan 18y ago
  While we're nit-picking: if the parent doesn't have the position attribute set isn't quite accurate: the containing block must not have static positioning (which it does by default), but one of absolute, relative or fixed.
  - gord 18y ago
    thats kind of my point - its not trivially obvious that "absolute" is not absolute. I know ... RTFM.. but then theres what browsers actually do as a mixin. Hence good examples of motifs that are reasonably portable are all the more valuable.

horatio 18y ago

Doesn't work in my Chrome actually. 2.0.173.1

juanpablo 18y ago
It works for me (same Chrome version)

BonsaiKitt3n 18y ago

welcome to 2004!

runningskull 18y ago

Thanks for the timely submission. I was just doing this exact thing last night and was having trouble getting it to behave.

webwright 18y ago

Oh, hell-- I've got some karma to spare... I could do this with a table in about 11 seconds.

ja30278 18y ago

I like CSS, but every time I see an article bragging about a new technique for accomplishing something that _should_ be simple, I lose the faith a little bit. Can't we just give up and add '<tabset>' and '<tab>' tags to html and call it a day. At the very least, we could stop abusing the poor <ul> tag.