SitePoint Sponsor

User Tag List

Page 1 of 11 12345 ... LastLast
Results 1 to 25 of 268
  1. #1
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,355
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)

    CSS - Test Your CSS Skills Number 27

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

    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.

    Yurikolovsky 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.

    Code:
    <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

    Edit:


    Here are some additional comments from Yurikolovsky that may aid with your task.
    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)





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

    Solutions to the quiz will be posted at the end of the week (or longer) depending on how it goes

    Have fun .

    Paul

    PS. : In case you missed the other tests you can find them here:
    test 1: test 2: test 3: test 4: test 5: test 6: test 7: test 8: test9: test10: test11: test12:
    test13: test 14: test 15: test 16: test 17:test18 test 19:
    test 20 test 21: test 22:test 23 :test 24 : test 25: test 26
    Attached Images Attached Images

  2. #2
    Hibernator YuriKolovsky's Avatar
    Join Date
    Nov 2007
    Location
    Malaga, Spain
    Posts
    1,072
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    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.

  3. #3
    Hibernator YuriKolovsky's Avatar
    Join Date
    Nov 2007
    Location
    Malaga, Spain
    Posts
    1,072
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    its not really "that" hard,
    so lets see who is "css" enough

  4. #4
    SitePoint Member
    Join Date
    Aug 2009
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I think that I know CSS well but your tests realize me that I know only a little about it.

  5. #5
    SitePoint Wizard ryanhellyer's Avatar
    Join Date
    Oct 2006
    Location
    New Zealand
    Posts
    2,323
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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

  6. #6
    Hibernator YuriKolovsky's Avatar
    Join Date
    Nov 2007
    Location
    Malaga, Spain
    Posts
    1,072
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    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.

  7. #7
    SitePoint Wizard ryanhellyer's Avatar
    Join Date
    Oct 2006
    Location
    New Zealand
    Posts
    2,323
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  8. #8
    Hibernator YuriKolovsky's Avatar
    Join Date
    Nov 2007
    Location
    Malaga, Spain
    Posts
    1,072
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ryanhellyer View Post
    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.

  9. #9
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,355
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    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.

  10. #10
    SitePoint Wizard ryanhellyer's Avatar
    Join Date
    Oct 2006
    Location
    New Zealand
    Posts
    2,323
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I've pounding away at this for over an hour and am getting no where What on earth apart from an <a> tag can handle :hover?

  11. #11
    Hibernator YuriKolovsky's Avatar
    Join Date
    Nov 2007
    Location
    Malaga, Spain
    Posts
    1,072
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    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.

  12. #12
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,278
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    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...

  13. #13
    Non-Member
    Join Date
    Mar 2005
    Location
    Bangkok
    Posts
    105
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  14. #14
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,355
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by andrew-bkk View Post
    I don't have time to work out the exact code, but I know how it could be done.

    No that won't work I'm afraid

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

    Think again

  15. #15
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,355
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by Ryan
    What on earth apart from an <a> tag can handle :hover?
    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.

  16. #16
    SitePoint Addict rochow's Avatar
    Join Date
    Oct 2006
    Location
    Queensland, Australia
    Posts
    300
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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 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

  17. #17
    SitePoint Wizard ryanhellyer's Avatar
    Join Date
    Oct 2006
    Location
    New Zealand
    Posts
    2,323
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by rochow View Post
    Without putting much thought into it, using negative margin to pull the <ul> up on hover.
    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.

  18. #18
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    I have a dropdown on hover in IE6

    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.

  19. #19
    SitePoint Addict rochow's Avatar
    Join Date
    Oct 2006
    Location
    Queensland, Australia
    Posts
    300
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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

  20. #20
    SitePoint Wizard ryanhellyer's Avatar
    Join Date
    Oct 2006
    Location
    New Zealand
    Posts
    2,323
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by rochow View Post
    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
    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.

  21. #21
    SitePoint Wizard ryanhellyer's Avatar
    Join Date
    Oct 2006
    Location
    New Zealand
    Posts
    2,323
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I sent an email to Stu Nicholls about this topic. Hopefully he'll chime in with some ideas too

  22. #22
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,656
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Rayzur View Post
    I have a dropdown on hover in IE6

    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.
    I'm currently at the same stage Ray. Seems I've exhausted every way I can think of to hold it open. Time to change direction I'm afraid...

  23. #23
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,278
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    Rochow, brilliant! That gives me an area to look into!

    Remember the above HTML code from Paul is only a suggestion. You can add tons of other junk if you want.

  24. #24
    SitePoint Wizard ryanhellyer's Avatar
    Join Date
    Oct 2006
    Location
    New Zealand
    Posts
    2,323
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I have something working ... if you don't mind your site visitors needing to have ninja fast reflexes to click the link before it disappears from view :P

  25. #25
    Hibernator YuriKolovsky's Avatar
    Join Date
    Nov 2007
    Location
    Malaga, Spain
    Posts
    1,072
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by rochow View Post
    Without putting much thought into it, using negative margin to pull the <ul> up on hover.



    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 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
    1. i have 2 simultaneous big projects, and i wanted one of them to have REAL css dropdowns, so i invented a way to do it.
    2. yes, lots of cross testing, opera seemed to misbehave more than other browsers.
    3. i am this someone, eh? XD
    plus its never time wasted when you learn something new.



    Quote Originally Posted by ryanhellyer View Post
    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.

    you just made me invent another 3rd way of doing this, although its not valid css .
    adding the ul to the a haha


    Quote Originally Posted by Rayzur View Post
    I have a dropdown on hover in IE6

    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.
    your on the same one i was.

    Quote Originally Posted by Stomme poes View Post
    Rochow, brilliant! That gives me an area to look into!

    Remember the above HTML code from Paul is only a suggestion. You can add tons of other junk if you want.
    exactly Stomme poes!!


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •