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

HTML & CSS
1

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:


/* ================================================================
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:



*
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

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

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

On the profile pages, you have a script that is setting the menu links to display: none …

element.style {
position: relative;
top: 0px;
left: 0px;
[COLOR="#FF0000"]display: none;[/COLOR]
}

With JS off, this .hide style kicks in to move the links off screen again:

.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

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

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

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

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

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/profile/view/Hall%20of%20Famer

10

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:

.ddmenu li a {}
11

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

You’re welcome. Glad to be able to help. :slight_smile: