CSS - Test Your CSS Skills Number 27

CSS - Test Your CSS Skills Number 27 : Quiz now closed - Solution posted in post #126 (page 6)

[SIZE=4][SIZE=2]This week we have possibly the toughest quiz so far of all these quizzes and once again is something that was deemed impossible to do.

[SIZE=3][B]Yurikolovsky[/B][/SIZE] has come up with a way of making a single level drop down that works in IE6 without any javascript.

Whaaat! I hear you say “that’s impossible”.

That’s what I though until he told me he had a fully working version that uses valid html and css. As an exercise and before looking at his code I thought I’d give it a try and see if I could come up with something as I didn’t want to set a quiz that nobody could do. After a few hours of fiddling around I managed to get a version working in IE6 although it is a little buggy but it did show me that it was possible to do and that there were perhaps a few other ways this could be done also.

Look at the attached screenshot and you will see Yurikolvsky’s menu in its normal and expanded state (and also a screenshot of my attempt).

Your mission is therefore to create a single level drop down that will work in IE6 without javascript and also work in other browsers (though of course you can offer good browsers more advanced code etc).

The basic rules are:

valid css/html
no tables
no javascript
No expressions/behaviours etc
no conditional comments in the body of the html (conditional comments in the head of the page are acceptable )
No invalid nested anchors.

The top row of the menu should be a fluid width if possible although I will be lenient with the rules as this is a very hard task. The sub menus can be fixed width but I will be interested in any method that is working in some form or another.

You can use your own html but I will reproduce the html from my example as a starting point.


<div id="navigation">
    <h1>IE6 only Demo</h1>
    <ul class="nav">
        <li><a class="target" href="#">Top Link1</a>
            <ul class="sub">
                <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>
        <li><a class="target" href="#">Top Link2</a>
            <ul class="sub">
                <li><a href="#1">Link1</a></li>
                <li><a href="#2">Link2</a></li>
                <li><a href="#3">Link3</a></li>
                <li><a href="#4">Link4</a></li>
            </ul>
        </li>
        <li><a class="target" href="#">Top Link3</a>
            <ul class="sub">
                <li><a href="#1">Link1</a></li>
                <li><a href="#2">Link2</a></li>
                <li><a href="#3">Link3</a></li>
                <li><a href="#4">Link4</a></li>
            </ul>
        </li>
        <li><a class="target" href="#">Top Link4</a>
            <ul class="sub">
                <li><a href="#1">Link1</a></li>
                <li><a href="#2">Link2</a></li>
                <li><a href="#3">Link3</a></li>
                <li><a href="#4">Link4</a></li>
            </ul>
        </li>
    </ul>
</div>
<div class="content">
    <p>This is some following content : This is some following content : This is some following content : This is some following content : This is some following content : This is some following content : This is some following content : This is some following content : This is some following content : This is some following content : This is some following content : This is some following content : This is some following content : This is some following content : This is some following content : This is some following content : </p>
</div>


The above html is all that I needed for my example but as I mentioned already my example is a bit buggy and extra elements are used in Yurikolovskys example which makes it work flawlessly.

NOTE:I know there is a clever version out there by Stu Nichols that doesn’t use any javascript but Stu’s version relies on the fact that a table is nested inside an anchor which is invalid. To make it valid the nested code is hidden using conditional comments in the html but in essence the code is still invalid but just hidden from the validator. It also means that the html is more complicated because of all the extra table tags and conditional comments on every level.

That’s the reason that I have not allowed any conditional comments in the body of the html and that the html must indeed be valid html and you can’t just nest anchors.

Oh and if you want to add tab support to the menu and it’s drop down then feel free :slight_smile:

[edit]
Here are some additional comments from Yurikolovsky that may aid with your task.
[/edit][/SIZE][/SIZE][edit]

i would also give the structure of this quiz, because
essentially its 1 big quiz consisting out of (at least) 4 little quizzes

to start: this is the dropdown
MAIN LINK
sublink
sublink
sublink

1.- getting the main link to move the sublinks
2.- getting the sublinks to move the sublinks
3.- hiding the dropdown links when the main link is not being hovered
4.- maintaining a background on the main link when the sublinks are being hovered (initially i thought this would be impossible)

[SIZE=4][SIZE=2]

[/SIZE][/SIZE][/edit][SIZE=4][SIZE=2]

Any questions or if anything is unclear just ask and remember this is just for fun :slight_smile: (although this solution will indeed be a workable solution for IE6)

[/SIZE][/SIZE]Solutions to the quiz will be posted at the end of the week (or longer) depending on how it goes :slight_smile:

Have fun .

Paul

PS. : In case you missed the other tests you can find them here:
test 1: [URL=“http://www.sitepoint.com/forums/showthread.php?t=169710”]test 2: [URL=“http://www.sitepoint.com/forums/showthread.php?t=170190”]test 3: [URL=“http://www.sitepoint.com/forums/showthread.php?t=171221”]test 4: [URL=“http://www.sitepoint.com/forums/showthread.php?t=172472”]test 5: [URL=“http://www.sitepoint.com/forums/showthread.php?t=173786&highlight=test+css+skills”]test 6: [URL=“http://www.sitepoint.com/forums/showthread.php?p=3216244#post3216244”]test 7: [URL=“http://www.sitepoint.com/forums/showthread.php?p=3235664#post3235664”]test 8: [URL=“http://www.sitepoint.com/forums/showthread.php?p=4108145#post4108145”]test9: [URL=“http://www.sitepoint.com/forums/showthread.php?p=4119063#post4119063”]test10: [URL=“http://www.sitepoint.com/forums/showthread.php?t=595943”]test11: [URL=“http://www.sitepoint.com/forums/showthread.php?t=597256”]test12:
test13: [URL=“http://www.sitepoint.com/forums/showthread.php?t=600332”]test 14: [URL=“http://www.sitepoint.com/forums/showthread.php?t=601564”]test 15: [URL=“http://www.sitepoint.com/forums/showthread.php?t=602808”]test 16: [URL=“http://www.sitepoint.com/forums/showthread.php?t=604228”]test 17:[URL=“http://www.sitepoint.com/forums/showthread.php?t=605819”]test18 [URL=“http://www.sitepoint.com/forums/showthread.php?p=4218017#post4218017”]test 19:
test 20 [URL=“http://www.sitepoint.com/forums/showthread.php?t=611825”]test 21: [URL=“http://www.sitepoint.com/forums/showthread.php?t=615364”]test 22:[URL=“http://www.sitepoint.com/forums/showthread.php?t=617015”]test 23 :[URL=“http://www.sitepoint.com/forums/showthread.php?t=618512”]test 24 : [URL=“http://www.sitepoint.com/forums/showthread.php?t=626405”]test 25: [URL=“http://www.sitepoint.com/forums/showthread.php?t=630173”]test 26

in my version, there are 2 extra divs per table to make it work, and then 2 more tags per main link for background color styling and 1 extra div for extra styling.
this is so the background on the main link remains lit when the sublinks are being hovered.

in my version tabbing also works very good, a little buggy when hovering and tabbing in the flexible width version but i also have a version with fixed with main-links where tabbing works flawlessly, this is a side-effect of the valid html/css used (to say, when making it, i did not intent it to support tabbing, but it does, which is nice).

also i think the html is clean enough for real life use, although this depends from person to person.

its not really “that” hard,
so lets see who is “css” enough :stuck_out_tongue:

I think that I know CSS well but your tests realize me that I know only a little about it.

I’m guessing this will require using an <a> tag in an odd-ball way? I can’t think of any other way to trigger a hover effect in IE6. Or perhaps there are other tags which support the :hover pseudo class?

I just took at the HTML you used and it doesn’t use the <a> tag in an odd-ball way.

You have me stumped! I assumed this was entirely impossible. Kudos to YuriKolovsky for figuring this out.

I’m guessing there needs to be an IE conditional comment to serve different CSS to the different browsers, but beyond that I have absolutely no idea where to even start :frowning:

I’m guessing there needs to be an IE conditional comment to serve different CSS to the different browsers, but beyond that I have absolutely no idea where to even start

the only browser that doesn’t understand this trick is surprisingly Opera, all of the other browsers work just fine with it (i was a little amazed that its so well supported, probably because its clean css mechanics and no odd ball trickery, can’t say the same for paul’s version, so feel free to use odd balls in your solution :)).
luckily Opera supports li.link:hover .sub {maintain dropdown} which i used for opera to remove all buggy-ness it had, all the other modern browsers see this css too, and it does no harm or good (i think it slightly improves smoothness in firefox3, although its already very smooth)

the version i provided has no conditional comments at all but it does have things like #nav > .link:hover .sub {} to only serve css to modern browsers, i did this to demonstrate that it could be done without any conditional comments, but using some might make the code more tidy.

notes:
my version:
works identically in ie5-6 no conditional comments
slight improvements for modern browsers, but functionality is basically the same.

pauls version:
slightly buggy in IE6, but potentially can be fixed.
modern browsers use modern techniques.

to start, what CAN you hover in all browsers? now use that to the fullest.

The big question is … how come no one has discovered this before?

People have been trying to come up with a cross-browser way to do this for years and the best route that I’ve seen is to use IE conditional comments around table tags which produces some horrid looking HTML.

hahaha that is a excellent question, and i have no idea why! maybe lack of lateral thinking? or maybe css has not yet been explored enough? or maybe everyone said it was impossible and people simply never tried to make it work.

i mean, it is perfectly possible, else paul would not be hosting this quiz.

edit:
a little story: about a couple years ago some sailors discovered a huge sunken (several hundred year old) treasure near gibraltar, governments of spain and gb were fighting over who it belongs to, but why did none of the millions of ships passing by discover it before? just proves that there are things that have not been discovered lurking behind every corner.

edit:
what makes this quiz hard is the lack of Internet aid you will be getting, i could not find any tutorials or dropdowns like this.

or maybe everyone said it was impossible and people simply never tried to make it work.

I must admit I never bothered to even try previously as I assumed it wasn’t possible but after a few hours of playing around I could see ways that this could be done in a few ways although some are a bit buggy.

I’ve pounding away at this for over an hour and am getting no where :frowning: What on earth apart from an <a> tag can handle :hover?

What on earth apart from an <a> tag can handle :hover?

to the best of my knowledge not even <a> supports :hover across all browsers, i think only <a href=“”> (href=“” is very important) supports hover cross all browsers, not sure, i may be wrong here.

What on earth apart from an <a> tag can handle :hover?

asked that way, I thought <area>s did as well (dunno, never used them).

Interesting. As usual I will be my lazy self and reap the rewards after other people lose their hair figuring it out : ) Hm wait, I had an idea…

I don’t have time to work out the exact code, but I know how it could be done.

Today, I started redesigning a site I made for a client a couple of years back. The menu is pure CSS. Though it is vertical rather than horizontal (and features graphics rather than dropdowns), it could very easily be adapted to achieve the result you are looking for.

This is the link, http://www.andrew-brundle.com/fisher/index.html

My example uses dual classes (ie; class=“site point”), and this would probably be one of the keys to a fully functional dropdown menu. My code also uses an MS conditional statement to access a dedicated IE6 stylesheet, but with further tweaking it may be possible to do away with this.

No that won’t work I’m afraid :slight_smile:

With that method you can only have one link destination. The drop down requires multiple link destinations.

Think again :slight_smile:

You don’t need to look for anything else as the hover on the anchor is all you need.

Think of ways that hovering on an anchor can push something else into view. Remember to test with IE6 as other browsers may not exhibit the same behaviour and they can be fixed in the normal way anyway.

If we don’t get any takers for this we will give out more hints and tips along the way to point you in the right direction.:slight_smile:

Without putting much thought into it, using negative margin to pull the <ul> up on hover.

The big question is … how come no one has discovered this before?

  1. Too busy doing paid projects, gotta pay the bills!
  2. Have you tried finding out new ways of doing things? Lots of time + stress when its working, only to find its broken in X browser. Fix X browser and it’s broken in Y browser. And round and round she goes.
  3. Someone else can do the hard and stressful work, then you can implement it :slight_smile: I figured out a way of not needing <li class=“first”> or <li class=“last”> to negate certain effects, say a border separating all menu items except its not needing on either the first or last item (in certain situations at least). However, I later found out someone else had already figured it out… so I basically wasted half a day :slight_smile:

But how are you going to target the <ul> tag on hover? You need an <a> tag for that, but the one you would typically be targetting does not have the UL tag nested inside it which makes it impossible to make it work with IE6 … or so I thought until seeing this forum topic.

I have a dropdown on hover in IE6 :smiley:

Now I got to figure out how to hold it open when I go to the first link in the sublist. I don’t know if I am on the right trial or not though.

Which <ul>, the one with the sub items? You don’t need too. Say you have 20000px bottom margin on <a class=“target”> or whatever it is. This pushes the menu out of site (until you scroll that is ;)). Then, on hover, you make the margin 0. Pow, it’s now visible as it’s brought back up beneath the <a>. Though I haven’t figured out how you’d hide it… like I said, quick theory :smiley:

Hmmm, interesting theory.

I guess I’ve always ruled out stuff like that since it’s likely to mess up other code on the page.