CSS - Test Your CSS Skills Number 13 :

**RyanReese** · Feb 9, 2009 16:13

If I'm not mistaken Paul just gave the hint away...

There is no way to uniquely target the content in IE6 unless you add some classes.

**Raffles** · Feb 9, 2009 16:47

I don't think that's much of a trick - it's pretty obvious that without a particular selector that IE6 is oblivious to, this is impossible. More of a trick is what to use to create the black connector lines, especially without absolute positioning.

**YuriKolovsky** · Feb 9, 2009 17:03

@Ryan
i see no hint there.

@Raffles

More of a trick is what to use to create the black connector lines, especially without absolute positioning.

ie6 doesn't have absolute positioning?

@Raffles

It's a lot more fun using the interesting selectors, and good respite from still having to write boring CSS because of IE6's existence! In the future I wouldn't mind if all the quizzes excluded IE6.

so i see

about ie6 ruining the fun, well you could see the method i suggested above, make a separate style for ie6, and just store it (like and archive), and live life as if ie6 doesn't exist, i see lots of people that do that.

disclaimer: the above message has been written in a half in sleep condition, it might contain things that the writer did not mean, he is only up because he wanted to improve the quiz thing that he keeps sending paul, the writer hopes paul doesn't mind.

good night you all!

**RyanReese** · Feb 9, 2009 17:11

Haha I'm hauling out posts on this forum so I'm a bit tired myself

. It sorta makes sense, but IE6 DOES have absolute positioning, just not fixed positioning (IE7 doesn't unless it has a DTD).

**Black Max** · Feb 9, 2009 22:42

Darn it, I know I don't have the chops for this, but I'm really curious as to the solution. Come on, Paul, don't make us wait....

**AutisticCuckoo** · Feb 10, 2009 01:11

Originally Posted by Raffles

To be honest, I don't know what this "trick" that keeps getting mentioned is.

Let's just say that it's a relatively simple trick.

The reason Paul and I decided not to require this to work in IE6 is that it wouldn't require any special skill, only a lot of unnecessary work. If you were allowed to add classes or identifiers to the markup it would be somewhat easier, but it wouldn't add anything worthwhile to the skill quiz.

**Stomme poes** · Feb 10, 2009 04:07

Lawlz, Tommy.

Actually, I haven't run into any tricks yet either.

But, I did it backwards-- I built entirely in a single browser (FF which I normally never do) and checking in everyone else, everything's fine... until I see IE7, where I expected something to die. It looked like everything died!

But looking closer it was actually the same single problem in like, 2 places... and I haven't actually seen any way around those so I'm going to be randomly setting Haslayout on every parent until I see something different : )

So far I've only used "positioning" to take some folks out of the document, mostly to get around IE's float-wrapping bs. So I suppose I should see if Tommy's hint does anything. I'm thinking that'll mean a rewrite though. : (

**Paul O'B** · Feb 10, 2009 05:54

Had an entry form k3liutzu which is very close but needs just a little more work to be pixel perfect but has the general idea so well done

**Stomme poes** · Feb 10, 2009 05:56

Ok, submitting mine. It's actually not the same in IE7 as the others but most eyeballs would need to compare side-by-side to see it... I never did solve that margin issue. : (

I never did find the trick : (

Be sure to hover the mouse over the three categories. : )

**Paul O'B** · Feb 10, 2009 06:15

Thanks for the entry Stomme Poes - it looks pretty good

There are no tricks - just CSS

**Stomme poes** · Feb 10, 2009 06:22

I hope afterwards to be directed to wherever I can find definitively what IE7's doing-- I thought it was the Haslayout margin-collapse/no collapse thing but I'm not sure, and would like to know how to get around it if it was (Brunildo pages etc didn't seem to have a solution, only showed the problem).

It seemed I had Haslayout on all important parents.

**alexneil** · Feb 10, 2009 15:38

I'll try it too that may be helpful for me I'm a web developer and have interest in designing too.

**YuriKolovsky** · Feb 10, 2009 15:54

@alexneil
sure alex, knock yourself out : )

note:
this is not of the easiest of quizzes, so if it doesn't work, don't get disappointed.
but keep in mind, im not saying that it wont work for you : )

and welcome to sitepoint! (the posting side)

@Stomme poes
i did nothing extraordinary with haslayout, so i can't point you in any meaning direction, i just regularly checked for ie7 inconsistency, and i did re-do it once

**Paul O'B** · Feb 10, 2009 16:34

Originally Posted by alexneil

I'll try it too that may be helpful for me I'm a web developer and have interest in designing too.

If you want to have a go you have until Friday (if you want to do it on your own) and then I'll post the submitted solutions for all to see

**Paul O'B** · Feb 11, 2009 10:35

Another correct entry form Tyssen - thanks and well done

.

I have quite a few correct entries now so you are all brighter than you think

**RyanReese** · Feb 11, 2009 10:45

Yay finally off work today so I'll give this a test run tonight. I'll see how fast I can do it...or if I even can

. I'm not feeling smart today.

**RyanReese** · Feb 11, 2009 16:50

It's official I suck.

**markbrown4** · Feb 12, 2009 01:33

Originally Posted by RyanReese

It's official I suck.

It's not a simple quiz.
If I hadn't seen Paul's previous work on layouts like this I'd be clueless.
You also need to use selectors in the quiz that you don't really ever need to use in the real world - Some would argue with that but I rarely use selectors other that the obvious id, class, descendant, psuedo and attribute selectors. I find they cover about 99.9% of what I need.

**AutisticCuckoo** · Feb 12, 2009 02:43

Originally Posted by markbrown4

You also need to use selectors in the quiz that you don't really ever need to use in the real world

Let me remind you that this quiz is based on a real-world example.

By using the power of CSS selectors you can make a significant reduction in the code bloat caused by excessive classes and IDs. You'll have to be careful, though, since it may create a strong dependency on the document structure. A good designer/developer must know when to add a class or ID and when to use contextual selectors.

**Stomme poes** · Feb 12, 2009 02:51

I may have done it wrong, but I would have added a few id's for this if I could, simply because once I+start+getting+really>long+selectors I start worrying that it's getting silly. Because of IE7 I couldn't pare it down a bit with some of the other options out there.

I do use these selectors in the real world, quite a bit actually, esp the + selector, but not quite so much per line : ) Safari-Chrome having a bug with the + and :hover is sad, but hopefully it'll get fixed... some day...

**RyanReese** · Feb 12, 2009 05:58

I'm not saying it's an easy quiz but me not being able to complete this and others are is just unacceptable to me.

**YuriKolovsky** · Feb 12, 2009 06:17

@RyanReese
if you keep trying you will get it to work eventually
(even just sitting and looking blankly at it helps

)

if you give up, you won't get it to work, for sure.

i realize that this is obvious, but its what keeps me driving forward.

[and as a tip, you can read the comments, they contain lots of spoilers on how to do it, you can also look at pauls previous work, and you can read the sitepoint css reference a little more, just in case you missed something]

i personally, did not look at pauls previous work to figure this out (why did't i think of that!), what i did was to draw the boxes (li's, dl's, dd's) in the <body></body> onto a piece of paper, because as html tags they made no sense to me, and suddenly, while looking at it in a more visually friendly way, it all started to make sense, but thats just me.

edit:
@Stomme poes
the only thing that gets me is the selectors support in ie6, sadly a still existing browser...
id love to use them tho, and if i get the chance i will.

**AutisticCuckoo** · Feb 12, 2009 06:24

I use a more object-oriented approach. I start with the unstyled semantic markup and look at how it's rendered. Then I compare that visual image with the target image of what I would like to achieve, and wonder, 'how can I make this element appear in that location?'

That's how I solved the real-world problem on which this quiz is based. Starting from the top and working my way down, it wasn't too difficult. You can do this iteratively, applying rules for one visual 'level' at a time.

**RyanReese** · Feb 12, 2009 06:55

I tried doing that but I don't have the brain power (ADHD) to keep doing the adjacent sibling selector for 3/4ths of my selectors. I lose interest to the point I don't want to even do it.

**YuriKolovsky** · Feb 12, 2009 07:11

this is why not as many people apply to this quiz.

RyanReese
I lose interest to the point I don't want to even do it.

it's a real world example.

[yuri looks at ryan, looks at tommy, runs far away]

edit: well, if you don't want to do it, and you don't do it, how does it make you suck?

User Tag List

Thread: CSS - Test Your CSS Skills Number 13 :

Thread Tools

Display

Bookmarks

Bookmarks

Posting Permissions