CSS - Test Your CSS Skills Number 27

rochow · September 2, 2009, 11:14pm

and probably cursed it

Gee, things that make me curse IE… that narrows it down!

<spoiler> hasLayout? </spoiler>

Too bad I’m running behind on work, I have an idea in my head of how it could work just not enough time to mess around with it. Maybe later tonight I’ll have a few drinks and see if I can come up with something.

YuriKolovsky · September 3, 2009, 7:09am

<spoiler> hasLayout? </spoiler>

<hint>no (not what paul meant)</hint>

PaulOB · September 3, 2009, 8:58am

Ok - We won’t drop anymore hints until you all give up

PicnicTutorials · September 3, 2009, 11:46am

I did it!

I definitely just stuck a square peg into a round hole! Not exactly the solution I was hoping to find, but it does satisfy the rules of the quiz. After at east 10 hours of messing with it, it will have to do. I didn’t bother making it work in good browsers. I only submitted an IE6 version.

kohoutek · September 3, 2009, 12:06pm

Hurray, Eric! Congrats.

I’m still sitting on it, literally.

PaulOB · September 3, 2009, 12:10pm

Well done Eric the solution does work in IE6

It’s not the definitive solution we were looking for but it’s a good attempt at lateral thinking. The real solution is actually easier to implement

Thanks to all who are still working on this and I know that Maleika has been very close to an answer also.

PicnicTutorials · September 3, 2009, 12:21pm

Thanks! It’s not all that though. All I did was fake it. But, even that was incredibly hard.

YuriKolovsky · September 3, 2009, 12:53pm

hahaha, good solution Eric! it looks and works exactly like a real dropdown…visually.

getting very original and working in ie6 solutions so far, shows that there are a lot of thinkers in here.

PicnicTutorials · September 4, 2009, 12:16am

Paul_O_B:

If no one offers anything close by tomorrow we’ll drop some bigger hints.

However we were hoping that people would come up with their own new ways to do this now that they know it’s possible. There are a number of possible solutions (although some are better than others) and as yuri just mentioned a fixed with menu can be done with this minimal html (the css of which is based heavily from Yuris original idea and works in IE, Safari3+ and FF3+ using the same code with no hacks or forking of code).
<ul class="nav">
        <li><b></b><a class="main" href="#">Main 1</a>
            <ul>
                <li><a href="http://www.google.com">Google</a></li>
                <li><a href="http://www.yahoo.com">Yahoo</a></li>
                <li><a href="http://www.pmob.co.uk">pmob.co.uk</a></li>
                <li><a href="http:www.sitepoint.com">Sitepoint</a></li>
            </ul>
        </li>
</ul>
That’s enough help for today

I just noticed the “b” is sitting outside the anchor. That gives me some more ideas to try! It’s just that one “b”, no other “b” needed right?

YuriKolovsky · September 4, 2009, 6:44am

I just noticed the “b” is sitting outside the anchor. That gives me some more ideas to try! It’s just that one “b”, no other “b” needed right?

yea, pretty much, for the fixed width version at least.

YuriKolovsky · September 4, 2009, 9:55am

after 2 hours of fiddling with the fixed width dropdown, I have made it into a multilevel dropdown that works in ie5-6.

YuriKolovsky · September 4, 2009, 10:19am

ok, now the fixed width multilevel dropdown works in all browsers except Opera.

i mean the links are clickable (if you add a couple of lines of css) in opera, only the hover background is messing up (sometimes not appearing), but its completely usable.

kohoutek · September 4, 2009, 10:50am

I hope this quiz will stay open over the weekend. I haven’t gotten around to finishing my ideas as I had to do client work. keeps fingers crossed

PaulOB · September 4, 2009, 10:56am

Good work Timo (Yurikolovsky)

Yes we’ll leave the quiz open over the weekend when people may have a bit more time to have a go.

ryanhellyer · September 4, 2009, 12:21pm

LMAO. I have no idea where to even start to get a multi-level dropdown!

I assumed that was impossible - but then I also assumed doing a simple dropdown was also impossible, so go figure! … that god analogy is becoming more fitting all the time.

YuriKolovsky · September 4, 2009, 12:23pm

so you know, when i said multilevel (paul tipped me to that it was not yet a complete multilevel dropdown) i meant that it can have sub sub links (2 levels of sublinks), but currently one per sublinks for all browsers except ie5-7 (works fine in them with some extra contional comments in the head), also it currently requires extra css for the subsections, although thats also fixable.

also i made it work in opera… that pesky little browser.

PicnicTutorials · September 4, 2009, 8:32pm

Uh-oh… looks like I’m guna win by default…?

PaulOB · September 4, 2009, 9:20pm

Maleika is still working on a solution so you’ll have to wait and see

PicnicTutorials · September 4, 2009, 9:37pm

I know, just egging people on. Good luck Maleika! I’ll be impressed…

YuriKolovsky · September 4, 2009, 9:42pm

agh, god darn multilevel dropdowns with multiple multilevels per level!! eating away all my time and driving me nuts! (single multilevels work fine)
and believe it or not, but firefox and opera are the ones that refuse to play ball.

EricWatson
Uh-oh… looks like I’m guna win by default…?

Maleika had a solution that satisfies all the rules before you, although she is not completely satisfied with hers as its not usable in real life. [hint, hint]

so to win hands-down you have to provide a solution that is usable in real life. xD