SitePoint Sponsor

User Tag List

Results 1 to 12 of 12
  1. #1
    SitePoint Addict bronze trophy Hall of Famer's Avatar
    Join Date
    Apr 2013
    Location
    Ithaca
    Posts
    368
    Mentioned
    6 Post(s)
    Tagged
    2 Thread(s)

    Ajax tabs css messing up with dropdown menu css, what should I do?

    Well hello there, I have this problem that has been bugging me for more than a year now without a solution. Thought it shouldnt be that bad, but I just cant seem to find a way. On my site I have this dropdown menu using a css file as below, note I am not the one who designed the css:

    Code:
    /* ================================================================ 
    This copyright notice must be untouched at all times.
    
    The original version of this stylesheet and the associated (x)html
    is available at http://www.cssplay.co.uk/menus/dd_valid.html
    Copyright (c) 2005-2007 Stu Nicholls. All rights reserved.
    This stylesheet and the assocaited (x)html may be modified in any 
    way to fit your requirements.
    =================================================================== */
    /* common styling */
    .ddmenu {width:100%; position:relative; z-index:100;}
    .ddmenu ul li a, .ddmenu ul li a:visited {display:block; text-decoration:none; font-size:12px; color:#000;width:182px; height:20px; text-align:center; color:#fff; border:1px solid #fff; background:#222; line-height:20px; overflow:hidden;}
    .ddmenu ul {padding:0; margin:0; list-style: none;}
    .ddmenu ul li {float:left; position:relative;}
    .ddmenu ul li ul {display: none;}
    
    /* specific to non IE browsers */
    .ddmenu ul li:hover a {color:#fff; background:#acacac;}
    .ddmenu ul li:hover ul {display:block; position:absolute; top:21px; left:0; width:182px;}
    .ddmenu ul li:hover ul li a.hide {background:#222; color:#fff;}
    .ddmenu ul li:hover ul li:hover a.hide {background:#222; color:#000;}
    .ddmenu ul li:hover ul li ul {display: none;}
    .ddmenu ul li:hover ul li a {display:block; background:#ddd; color:#000;}
    .ddmenu ul li:hover ul li a:hover {background:#ededed; color:#000;}
    .ddmenu ul li:hover ul li:hover ul {display:block; position:absolute; left:182px; top:0;}
    .ddmenu ul li:hover ul li:hover ul.left {left:-182px;}
    And then I have an ajax profile tab for user profile pages, and the tabs css will make the dropdown menu disappear completely, nowhere to be find. I tried to alter the loading sequence of dropdown menu and profile tabs css, and it aint making any differences. I dont understand at all... Heres the ajax tab css, again I was not the designer of this css:

    Code:
    * 
    body { }
    html { overflow-y: scroll; }
    a { text-decoration: none; }
    a:focus { outline: 0; }
    p { margin: 0 0 20px 0; }
    #page-wrap { width: 640px; margin: 30px;}
    h1 { font: bold 40px Sans-Serif; margin: 0 0 20px 0; }
    
    /* Generic Utility */
    .hide { position: absolute; top: -9999px; left: -9999px; }
    
    
    /* Specific to example one */
    
    #profile { background: #eee; padding: 10px; margin: 0 0 20px 0; -moz-box-shadow: 0 0 5px #666; -webkit-box-shadow: 0 0 5px #666; }
    
    #profile .nav { overflow: hidden; margin: 0 0 10px 0; }
    #profile .nav li { width: 97px; float: left; margin: 0 10px 0 0; }
    #profile .nav li.last { margin-right: 0; }
    #profile .nav li a { display: block; padding: 5px; background: #959290; color: white; text-align: center; border: 0; }
    #profile .nav li a:hover { background-color: #111; }
    
    #profile ul { list-style: none; }
    #profile ul li a { display: block; border-bottom: 1px solid #666; padding: 4px; color: #666; }
    #profile ul li a:hover { background: #fe4902; color: white; }
    #profile ul li:last-child a { border: none; }
    
    #profile ul li.nav0 a.current, #profile ul.visitormessage li a:hover { background-color: #0575f4; color: white; }
    #profile ul li.nav1 a.current, #profile ul.aboutme li a:hover { background-color: #d30000; color: white; }
    #profile ul li.nav2 a.current, #profile ul.adopts li a:hover { background-color: #8d01b0; color: white; }
    #profile ul li.nav3 a.current, #profile ul.friends li a:hover { background-color: #FE4902; color: white; }
    #profile ul li.nav4 a.current, #profile ul.contactinfo li a:hover { background-color: #Eac117; color: white; }
    I am completely stuck, and totally out of idea on how I can possibly fix it. I'd appreciate it very much if anyone of you can point out where the problem is and what I should do to fix it. If the worst came to worst, I may have to get rid of the tab css, although it will be a painful loss...

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,475
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    Have you got a link to the page in question as it will be easier to debug that way?

    At the least we will need the html that goes with the above to make a demo that exhibits the bug you mention

  3. #3
    SitePoint Addict bronze trophy Hall of Famer's Avatar
    Join Date
    Apr 2013
    Location
    Ithaca
    Posts
    368
    Mentioned
    6 Post(s)
    Tagged
    2 Thread(s)
    Thanks for your reply. And yeah, heres the profile page for a demo site of my script. If you click on a user from the memberslist, you will notice that the dropdown menu disappears out of nowhere. Also you can use the 'view page source' to see loaded styles and what they are like:
    http://mysidiarpg.com/site/mys133/profile

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,297
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    On the profile pages, you have a script that is setting the menu links to display: none ...

    Code:
    element.style {
    position: relative;
    top: 0px;
    left: 0px;
    display: none;
    }
    With JS off, this .hide style kicks in to move the links off screen again:

    Code:
    .hide {
    position: absolute;
    top: -9999px;
    left: -9999px;
    }
    ... so you have two knives in the back of your menu! I don't see much use in that script and the CSS, it might be better to ditch them altogether. What do you actually want that script to do?

  5. #5
    SitePoint Addict bronze trophy Hall of Famer's Avatar
    Join Date
    Apr 2013
    Location
    Ithaca
    Posts
    368
    Mentioned
    6 Post(s)
    Tagged
    2 Thread(s)
    Well the profile has an ajax tab system that works in a similar way as VBulletin's user profile tabs. The default tab is 'About Me', and if you click the other tabs the page will load these contents without refreshing. This is exactly the same effect I wish to achieve, but the css of dropdown menu is gone so long as you load the stylesheet of tabs. I doubt this has anything to do with javascript, since even if I load the stylesheet of profile tabs on other pages that do not use that javascript at all, the dropdown menu also disappear magically. So yeah, with or without the javascript the two css are conflicting. Do you know if theres a way to resolve the problem? o_o

  6. #6
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,297
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    What happens if you just remove the class='hide' from your top menu links? That is causing CSS to apply that seems to be intended for the tab menu instead.

  7. #7
    SitePoint Addict bronze trophy Hall of Famer's Avatar
    Join Date
    Apr 2013
    Location
    Ithaca
    Posts
    368
    Mentioned
    6 Post(s)
    Tagged
    2 Thread(s)
    I see, that was the problem. I changed the class .hide to .hides in the dropdown menu and its working perfectly now. Thank you so much for this advice!

  8. #8
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,297
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    Cool, glad that helped. I don't see the change online yet, but presumably you don't need the class at all, unless there is some .hides {} code in your style sheet.

  9. #9
    SitePoint Addict bronze trophy Hall of Famer's Avatar
    Join Date
    Apr 2013
    Location
    Ithaca
    Posts
    368
    Mentioned
    6 Post(s)
    Tagged
    2 Thread(s)
    Oh yeah, it was great help, I appreciate your comment very much. For a while I thought the javascript was the cause of this issue, turns out that it was the css instead. The demo site was for the current version(v1.3.3) of my script, I fixed the profile tabs glitch in the next version which is still in alpha stage(v1.3.4 alpha). Here is the link if you want to take a look, the profile tabs are not interfering with dropdown menu anymore:
    http://mysidiarpg.com/site/mys134a/p...l%20of%20Famer

  10. #10
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,297
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    Cool, nice to see. As I mentioned, class="hides" has no purpose (at least at this stage) so you might as well remove it. If you ever need to target those <a>s, you can do so like this:

    Code:
    .ddmenu li a {}

  11. #11
    SitePoint Addict bronze trophy Hall of Famer's Avatar
    Join Date
    Apr 2013
    Location
    Ithaca
    Posts
    368
    Mentioned
    6 Post(s)
    Tagged
    2 Thread(s)
    I see, that sounds like a good option. I will give a try later on and see how it goes, again I appreciate all your helps for this issue. I've posted this on various php/html/css forums and never got an answer as insightful before, let alone this quickly. Thank you so much.

  12. #12
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,297
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    You're welcome. Glad to be able to help.


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
  •