SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  1. #1
    SitePoint Wizard gold trophysilver trophybronze trophy dc dalton's Avatar
    Join Date
    Nov 2004
    Location
    Right behind you, watching, always watching.
    Posts
    5,431
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    CSS drop downs using ul pushing IE content to bottom

    OK, maybe Ive stared at this too long BUT I am trying to build an onclick drop down menu using CSS & the old html ul situation ....... I have it working wonderfully in Firefox, Mozilla & OMG Even Opera six is rendering it ok (one minor problem buts that another post) but as usual idiot IE 6 has managed to completely screw it up.

    It took me a while to see it but I finally realized the divs below the drop downs were pushed the EXACT amount the opened menus would take, even though I have them on a z-index: 100; Ive beat my head on the desk for 2 hours & Im just not seeing what I need to do to stop this. Here is the code IM using on these menus (they are driven by a header tag above them but that doesnt seem to be an issue:

    #toc, #toc2, #toc3 {
    position: relative;
    z-index: 100;
    right: 1%;
    top: 10px;
    margin: 0;
    padding: 0;
    visibility: hidden;
    }
    #toc LI, #toc2 LI, #toc3 LI {
    list-style:none;
    list-style-image:none;
    width: 150px;
    margin: 0;
    padding: 0;
    text-indent:0;
    border: 1px solid #FFFFFF;
    }
    #toc A, #toc2 A, #toc3 A {
    display:block;
    padding:0.5em 0.5em;
    color:#FFFFFF;
    background:#000000;
    text-decoration:none;
    font-weight:normal;
    }
    #toc A:hover, #toc2 A:hover, #toc3 A:hover {
    display:block;
    margin: 0;
    padding:0.5em 0.5em;
    background-color:#C90000;
    color:#000000;
    border: none;
    }

    and then I built a javascript function to show them when the header is clicked. (that works fine cross-browser) If IE had "bounced" the content down when I opened them I MIGHT understand but these are hidden.

    BTW, heres an example of one of the divs:

    <div id="process">
    <h4><a href="javascript:;" id="but1" onclick="javascript:dropMenu('toc'');">Header Text</a></h4>
    <ul id="toc">
    <li><a href="javascript:">Menu One</a></li>
    <li><a href="javascript:">Menu Two</a></li>
    <li><a href="javascript:">Menu Three</a></li>
    <li><a href="javascript:">Menu Four</a></li>
    <li><a href="javascript:">Menu Five</a></li>
    </ul>
    </div>

    Im stumped!

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    I'd need to see the whole code to work out whats going on but I can tell you that visibility hidden just makes the elements invisible. It does not remove them from the page. They are still there in the same place but you just can't see them.

    display:none removes the element from the page and collapses the space completely. Display:block will then show it.

    It also seems to me that when displayed you should want the drop down to be position:absolute so that it takes up no space either and doesn't push anything down.

    Heres an example of a simple drop down based on the suckerfish menus that works in browsers from ie5 -6 and most modern browsers including ie5mac. It uses unobtrusive dhtml to provide ie with the hover fincyionality on elements other than anchors.

    http://www.pmob.co.uk/temp/dropdown_horizontal2.htm

    If you can get a working version of your example online I will take a look.

    Paul

  3. #3
    SitePoint Wizard gold trophysilver trophybronze trophy dc dalton's Avatar
    Join Date
    Nov 2004
    Location
    Right behind you, watching, always watching.
    Posts
    5,431
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    thanks

    what Im trying to do here is show another design group ways to make their code cleaner AND search engine friendly ....... this page is an example for them, attempting to recreate one of their clients pages ........... its going good so far until i hit this ...... managed to eliminate 400+ lines of html AND a 1400 line peice of javascript for their existing menus ........ what a mess!

    anyways Im babbling here but I did want to explain WHY I was doing this.
    Ive posted the page at http://www.dcpromotionsltd.com/index-new.html and the css file is at http://dcpromotionsltd.com/styles/new-styles.css ...... all of the css that pertains to the menus is below the large comment line as I did the site first & than added in the menus once I had them working..

    thanks Paul!

  4. #4
    SitePoint Wizard gold trophysilver trophybronze trophy dc dalton's Avatar
    Join Date
    Nov 2004
    Location
    Right behind you, watching, always watching.
    Posts
    5,431
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    BTW, that is some awesome code in that example you posted - do you mind if I swipe it to play & learn! The hovers is what really got me - very nice indeed!

  5. #5
    SitePoint Member
    Join Date
    Jun 2004
    Location
    Sydney, Australia
    Posts
    10
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The quick answer off the top of my head is that the uls which dropdown need to be taken out of the document flow.

    Basically what's happening is that when they appear, the document reflows to accomodate them, thus moving other things down.

    How to take them out of the document flow? Use position: absolute to that their position on the page doesn't affect anything else around them.

    Best way to do this is with the following code:
    Code:
    <div id="process">
    <h4><a href="javascript:;" id="but1" onclick="javascript:dropMenu('toc'');">Header Text</a></h4>
    <ul id="toc">
    <li><a href="javascript:">Menu One</a></li>
    <li><a href="javascript:">Menu Two</a></li>
    <li><a href="javascript:">Menu Three</a></li>
    <li><a href="javascript:">Menu Four</a></li>
    <li><a href="javascript:">Menu Five</a></li>
    </ul>
    </div>
    (as you had, and the the following CSS)
    Code:
    div#process {
        position: relative; /* position relative so that it will contain any other positioned elements */
    }
    
    ul#toc {
        position: absolute;
    }
    It's also good to provide width and height for absolutely positioned elements, but you don't have to.

    On another note, some excellent standards-compliant code for dropdowns can be found at:
    http://www.htmldog.com/articles/suckerfish/dropdowns/

  6. #6
    SitePoint Member
    Join Date
    Jun 2004
    Location
    Sydney, Australia
    Posts
    10
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Whoops.. mental note to self: read other people's replies first.

  7. #7
    SitePoint Wizard gold trophysilver trophybronze trophy dc dalton's Avatar
    Join Date
    Nov 2004
    Location
    Right behind you, watching, always watching.
    Posts
    5,431
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thanks Brad I must have brain farted on the absolute position thing - DUH, it does fix it now I just have to get IE to drop them straight below the menus ..... I guess in IE the positioning means "move it about 30px to the left of the page. The more I learn of this the more IE has become my most hated browser, not that I have ever been a M'Soft fan. IM not Sun certified for nothing.

    I did have a question about how you code - while do you do ul#toc when in fact toc is a unique identifier for the ul element? Just my programmer curiousity - Im always interested in how different people code

    Im going to fight with this and take a REAL hard look at the example you both gave - Ill let you know the outcome

  8. #8
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    BTW, that is some awesome code in that example you posted - do you mind if I swipe it to play & learn! The hovers is what really got me - very nice indeed!
    Yes you can use the code. The original menu is in the suckerfish link that Brad posted but I have tweaked the code to work in more browsers.

    Using the tag name as identifier locks the id into that tag only e.g.. ul#toc . Therefore you couldn't use #toc anywhere else even if you were allowed to. Theres not much real difference apart form that except that when you look through the css it becomes immediately apparent where that style is applied and makes things much easier to read.

    Also it will add more weight to the id (if it was needed) as it becomes more specific.

    Brad offered the solution that I hinted would work before I even saw the code lol

    You may need to add a top:100% to move it down and add the same styles to the other divs of course (#news & #profile). It looks the same position now in IE and firefox to me.

    Paul

  9. #9
    SitePoint Wizard gold trophysilver trophybronze trophy dc dalton's Avatar
    Join Date
    Nov 2004
    Location
    Right behind you, watching, always watching.
    Posts
    5,431
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    working well

    I added that to the code on my local machine & its working fine.... I did have a major problem with IE 5 sliding the drop downs about 25px to the left and tried the holly hack to beat it but it fouled up IE 6 also (which I knew was going to happen anyways)

    This is going to be enough to show them - as I mentioned I was just trying to show them that you didnt need 1500 + lines of javascript to do menus & seeing as how their client was getting murdered in the search engines they were willing to listen...

    that dom based example you posted is really making me twitch . I can almost see what its doing but I havent even tried dom based code since I got out of school because there were so many issues with it at that time........ any great resources you can point me to for a "recap" of it ........ I REALLY want to relearn this stuff ----- honestly IM trying to do a "makeover" on how I approach a website from this point on - IM sick of sliced up images & nested tables! Its time for a change!

    thanks again - great advice as always!

  10. #10
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    I did have a major problem with IE 5 sliding the drop downs about 25px to the left and tried the holly hack to beat it but it fouled up IE 6 al
    If you look at the example menu in my link above you will see that it works perfectly in ie5 so you could just copy that format etc. As a last resort you can parse styles to just ie5 as there are a number of hacks about (e.g. using the voice family hack cause s ie5 to miss the whole next style block and not just styles in the current definition. Ie5.5. just misses the styles in the same block and ie6 reads both.)

    Have a lot at the litsapart article linled in brads post for more info about the suckerfish menus or try here also :

    http://www.htmldog.com/articles/suckerfish/dropdowns/

    Heres is ome infor about the DOM and some other good articles about CSS:
    http://www.quirksmode.org/index.html?/dom/fir.html

    Paul


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
  •