A LIST Apart: For People Who Make Websites

No. 252

Discuss: Keeping Your Elements’ Kids in Line with Offspring

Pages

« First  <  2 3 4

31 Funny fact

here’s a weird fact:
IE6 & IE7 implement the CSS3 selector “text-overflow” but Firefox and Safari don’t (haven’t cared to check it in Opera).

http://www.css3.info/preview/text-overflow/

Also, this seems like an awful lot of JavaScript for not much benefit you can have clean markup and utilize the selectors without all the extra javaScirpt. I’ll give it a try though.

my2cents

posted at 06:13 pm on February 12, 2008 by Tim Wright

32 Forward Thinking

Of the three forward thinking methods, I like the third one the best, (just use the offspring classes). The reason I like this one is because if I do eventually want to remove offspring I can just do a find/replace on those classes.

posted at 07:35 pm on February 14, 2008 by Christian Schlensker

33 Piped separators: low tech solution

I’m currently working as stylesheet guy on Slantly.com – I developed a method for making pipe-separated horizontal lists with no requirement of :first-child (so no IE problem, either) => http://www.dillerdesign.com/css/cookbook/links_pipes_list_elements.html

posted at 10:27 pm on February 14, 2008 by Drew Diller

34 Should have elaborated...

My motive for leaving my previous comment was that use of :first-child was the first-real world example in the article.

posted at 10:29 pm on February 14, 2008 by Drew Diller

35 Small Error

Interesting script, Alex. I’m playing around with it right now on some dev sites at work :)

I just wanted to let you know that there is a small error in the “Applying Offspring to a specific section of the DOM” section. Where you have “Offspring.init();” and “Offspring.traverseChildren(tableNode);”, those first “O“s should be lowercase.

It took me a few minutes to figure out why I was getting “Offspring is not defined” errors, but a lowercase “o” sets everything right.

posted at 05:48 pm on February 15, 2008 by Jordan Haven

36 Dean Edward's IE7

Has anyone done a proper testing of Dean Edwards IE7 beta 3 script and if so, give some feedback.

I would very much like to use it, however heard a couple of annoying things such as frozen screens and very slow loading times.

Help would be appreciated. Thanks.

posted at 09:32 pm on February 25, 2008 by Andrej Telle

37 List item markers

I’m not qualified to speak on the script aspects of the article as I’m only just dipping my toe into javascript but the section of the article that suggests using an image to separate the items of a horizontal list bothers me a little. I like the reason for using it but if the viewer is using a large font size rather than a screen reader; the list-item markers won’t increase in size as the font increases. Would it not be an idea, especially as horizontal lists are so useful, to lobby for either a vertical line or for customised markers to be included as a list-item marker.

posted at 03:21 pm on February 26, 2008 by Simon Hingley

38 Untitled

The only part of offspring that I haven’t liked is the need to use class notation in your stylesheets instead of pseudo-classes, which means when browser support catches up with CSS3 (sometime around the turn of the next century, I’m sure) you’d have to go through and fix all your stylesheets. So I’ve devised a little script that you can run with offspring called pseudonut. It basically lets you use the css3 pseudo-classes in your stylesheet, and it converts them into the class notation for use with offspring. When CSS3-compatible browsers become commonplace, all you’d have to do is drop the scripts and you’re ready to go.

You can check it out at http://www.cssquirrel.com/2008/03/02/solving-impatience-with-pseudonut/

posted at 09:40 pm on March 3, 2008 by Kyle Weems

39 Thanks a TON!

For me this is perfect – and I’m loading offspring and the class notion styles via a conditional statement in the index file, so there is no extra overhead for any other browser than IE6, and no need to upgrade the CSS later

posted at 08:14 am on September 12, 2008 by Gretchen Zimmermann

Pages

« First  <  2 3 4

Got something to say?

Discuss this article. We reserve the right to delete flames, trolls, and wood nymphs.

Create a new account or sign in below if you’d like to leave a comment.

Remember me

Forgot your password?

Subscribe to this article's comments: RSS (what’s this?)