#1
  1. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Dec 2012
    Location
    Ithaca
    Posts
    68
    Rep Power
    2

    Two incompatible css file, why is this happening?


    Well I have a dropdown menu css from someone that works like a charm on most pages, but it does not appear on the user profile page in which I am using a tab css. Heres the source code of the two conflicting css:

    Dropdown Menu:
    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;}
    Tab:
    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.profilecomment 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.stats 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 not showing the main css since it does not seem to be affected by the tab css. Its weird though, I dont understand why the tab css would mess up with the dropdown menu and makes this entire widget disappear. Can anyone of you please lemme know what may be the cause of this incompatibility? Please help...
  2. #2
  3. No Profile Picture
    Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    Oct 2009
    Location
    Nebraska, USA
    Posts
    831
    Rep Power
    275
    my guess would be the .hide class.
    how are you loading the css files?
    have you tried loading the dropdown menu css file AFTER the tab css file?
  4. #3
  5. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Dec 2012
    Location
    Ithaca
    Posts
    68
    Rep Power
    2
    Originally Posted by DonR
    my guess would be the .hide class.
    how are you loading the css files?
    have you tried loading the dropdown menu css file AFTER the tab css file?
    Well actually the dropdown menu css is loaded in the html header, while the tab css is loaded much later since it is only needed in specific script files that use tabs. I tried to remove the .hide class css in tab.css file, it doesnt solve the problem.

    Do you think it will fix the issue if I load dropdown menu after the tab css?

IMN logo majestic logo threadwatch logo seochat tools logo