CSS - Test Your CSS Skills Number 13 :

**Erik J** · Feb 7, 2009 00:59

Originally Posted by AutisticCuckoo

Just as information: this exercise is based on a real-life situation where I needed to do the very same thing for our office intranet.
...

An intranet without IE6 must be a dream come true.

This Quiz I have not been involved in. But I can't participate before thursday at earliest. If it is still open then I absolutely want to give it a try.

Anyway, I will read through all marvellous entries posted and learn a lot.

**Centauri** · Feb 7, 2009 01:05

Originally Posted by Vim.F

Does this need to be scalable?...

Don't think this is a requirement, but I did make mine scalable with text size - in a real world situation, having things not break when the user resizes text is a plus.

**AutisticCuckoo** · Feb 7, 2009 01:46

Originally Posted by Fre420

Code:

<dt>Employees</dt>
<dd>89</dd>

just out of curiosity, but is this semantically correct?

Yes, in my opinion it is. 'Employees' is an ellipsis for 'Number of employees' in this case.

Originally Posted by Vim.F

Does this need to be scalable?...

The sample code I submitted to Paul is elastic, so it scales with changes in text size (although IE7 does some odd things if you use zoom). Making it elastic instead of fixed width isn't any harder, so I think it should be your aim.

The real-world implementation I did also needed to adapt to changes in viewport width, i.e., be fluid. That made it difficult to get pixel perfect cross-browser, but I decided it didn't have to be pixel-perfect.

**Vim.F** · Feb 7, 2009 02:59

Thanks... just sent in mine with full page elastic (not fluid yet).

**Paul O'B** · Feb 7, 2009 04:08

We have more correct entries.

RoObear, Centauri and Vim.F

Well done to all

**ro0bear** · Feb 7, 2009 05:48

Originally Posted by markbrown4

I thought so

It was just a complete mess but it had a bit of charm.

can you PM it to me please?

**YuriKolovsky** · Feb 7, 2009 08:30

just noticed something new, that made life easier, i think it was the trick that tommy meant

**Stomme poes** · Feb 7, 2009 11:39

Um, the blue strip on the right is not part of the quiz, right? That's from a clipped screen shot?

Just making sure, it looked like a different, maybe even... Windowsy blue. Not like those nice, coffee Ubuntu-Gnome colours : )

**Paul O'B** · Feb 7, 2009 11:52

Originally Posted by Stomme Poes

That's from a clipped screen shot?

That's the edge of the browser window

**Paul O'B** · Feb 7, 2009 11:54

I have a correct entry from Raffles - well done

**YuriKolovsky** · Feb 7, 2009 14:57

i made a ultra dirty version, with position absolute and negative margins everywhere

now all i need to do is to do it again, but better and cleaner.

**PicnicTutorials** · Feb 7, 2009 19:00

Over my head...

**Paul O'B** · Feb 8, 2009 04:20

Originally Posted by YuriKolovsky

i made a ultra dirty version, with position absolute and negative margins everywhere

now all i need to do is to do it again, but better and cleaner.

Good attempt - it all seems to be working (more or less)

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

ok, FINALLY i made a decent working version.

this was a pretty hard quiz, considering that i didn't know anything involved, didn't know the HTML neither the css selectors...

now all that is left is to see the proper example and to see how this can be done in ie6 (the hack that makes it work in ie6).

**RyanReese** · Feb 9, 2009 12:33

It's not really a hack that you need to make this work in IE6 (depending on how you did this). Just some extra code you needa add in there.

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

I'm surprised this one hasn't attracted more attention, especially considering its real-world application. I enjoyed it quite a lot.

**RyanReese** · Feb 9, 2009 12:51

<--School work. I got half of it done but I'm swamped right now with spring sports and such.

**YuriKolovsky** · Feb 9, 2009 13:05

Raffles
I'm surprised this one hasn't attracted more attention, especially considering its real-world application. I enjoyed it quite a lot.

you knew about the trick beforehand didn't you?

most people don't like to think on weekends, and don't like real world messy work, they prefer the more simple quizzes, ones that require less time to write, or it might be because people are sick of the real life/job related monotony...

when i looked at it first, i thought, oh nooo, i don't want to do something like that, doesn't look exciting at all, after looking at it for some time, i realized that i had no idea how to create the combining lines, i got slightly interested and blindly tackled the problem

, so when i eventually go those lines working, i realized that i didn't know how to select the other dl's and li's because they were identical.
after fruitlessly searching the Internet, i got a little tired, took a break, then suddenly and finally found the "trick" on the Internet, so i continued to work on my already made messy thing, i then "Forced" it to work, which took some time... and which was my messy version (i was afraid paul would get seizures from it), then i was away from the house/pc for the whole day, then i redid the whole thing from ground up again, and managed to get it to a bearable level.

pretty satisfied now, but when someone looks at this, most will think, oh no, organizational charts!

no one ever says, oh, look, spreadsheets yay!

so @ everyone, this quiz IS more than just a organizational chart.

**ro0bear** · Feb 9, 2009 13:56

Originally Posted by RyanReese

It's not really a hack that you need to make this work in IE6 (depending on how you did this). Just some extra code you needa add in there.

Im interested to see how you have got it working in IE6 with pure CSS! I cant think of a way to achieve that!

**Raffles** · Feb 9, 2009 14:00

To be honest, I don't know what this "trick" that keeps getting mentioned is. Do you mean how to create the black connecting lines? If that's the case, then there was similar "trickery" in creating some of the black lines in quiz no. 11 - well, at least in how I did it.

And Ryan, surely it's impossible to do in IE6 without modifying the HTML or using horrid expressions?

**RyanReese** · Feb 9, 2009 14:24

Well it's whatever you consider a hack. I don't consider expressions hacks and I mentioned previously that I didn't finish it. Also I think either Paul or Tommy said that all you need to get this working in IE6 was a little bit of different code. I'm just quoting them <_< lol.

**Raffles** · Feb 9, 2009 14:38

I think by that they meant a few class names sprinkled in the HTML. And expressions make the CSS invalid and are used to make up for IE's lack of modernity - that seems pretty hacky to me!

**YuriKolovsky** · Feb 9, 2009 14:44

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

AutisticCuckoo
I thought it would be an interesting challenge to see if I could make it without any extra markup at all. It turned out to be surprisingly simple, once I figured out the crucial 'trick'.

and in terms of ie6, i think that if someone gets a version that works in ie6 the same way as in every other web browser, without conditional comments or invisible markup to other browsers or hacks, will get an instant competition win.
xD

@RyanReese

Paul O'B
We are not catering for IE6 in this example as it could easily be catered for with a few hacks and alternative code anyway.

a couple of hack for ie6 wouldn't harm anyone, and in a couple of years no one will even care.

i have been looking at this simple/complex problem with ie6 and its hacks, the best solution i have found out is to use mod_rewrite to rewrite the link for a css file into a different one that gets detected by php (or any other server language) and instantly adapts the css file to include the hacks, or just sends a completely separate style sheet that has a static boring version that will never ever change again.

its the same as the hacky conditional comments, but its not detected as a hack and has no additional code/markup for the good browsers.

**Paul O'B** · Feb 9, 2009 15:55

Thanks for the entries from Yurikolovsky and coothead - well done to both

Originally Posted by Raffles

I think by that they meant a few class names sprinkled in the HTML

Yes that what I meant

There was no point including IE6 as all it would take would be a few strategically placed classes to make up for its lack of decent selectors. There is no way to uniquely target the content in IE6 unless you add some classes.

I think the quiz was a good challenge with a real world application but may have been a little complex for some ............... but that was the general idea anyway

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

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.

Originally Posted by AutisticCuckoo

I thought it would be an interesting challenge to see if I could make it without any extra markup at all. It turned out to be surprisingly simple, once I figured out the crucial 'trick'.

@ Yuri: Yeah, OK, but he doesn't actually say what the trick is (for obvious reasons)! Hence my ignorance as to what it is.

User Tag List

Thread: CSS - Test Your CSS Skills Number 13 :

Thread Tools

Display

Bookmarks

Bookmarks

Posting Permissions