Overlapping tab/drop down divs - links not working - CSS or JS issue?

I am editing the XHTML/CSS for a previously built module that works as a news ticker. Instead of having one scrolling list of links, I am adding tabs so that the user may click between one list of links and another. I am also adding a drop down menu that contains the list of all of the links for the corresponding tab the user is on. I created a non-functioning template for the module to pass to the development team. All XHTML/CSS elements are present, but no JS is attached in order to make the tabs/drop down work (I am not responsible for back end code). My local example shows both the basic state of the module, as well as the state with the drop down showing. In my local example, all of the links work, both in the "zipper" part of the module and the drop down. However, within the context of the functioning site (after back-end dev added tabbed and drop-down functionality), the links inside the zipper are not working, and the first link in the drop down (this link overlaps the zipper) is not working. By not working I mean they are clickable, the path is visible, but they do not do anything. All of the other links in the drop down work (they do not overlap the zipper part). While I am inclined to believe that this is a JS error, I have no way of knowing this. My only experience with JS is through jQuery, and we do not use jQuery at all. My question is - is there anything that I can do to help the situation? Does anyone see anything in my code that raises a red flag or that I can change? They did ask me to add some lines of CSS in order to position the hidden divs off the page. I obliged, and the issue seemed to have been resolved for awhile. I then added a background image and a color change. According to the dev team this caused the issue to happen again, so I am concerned that I am missing something in my code that I horribly erred with. However, I can't be sure, as again, I have no experience with JS or what the back end team is doing. I am mostly looking for some help as to what might be wrong with my code, how I can add or remove parts of my code in order to assist, or if my code is fine and there are in fact JS errors. I am attaching the XHTML of the drop down state (I did not build the original module, and rebuilding the XHTML at this point is almost completely out of the question) and the CSS (for the whole module, not just the tab/drop downs). Thank you in advance and my apologies for the long-winded question but I thought all information might be helpful. CSS .newsTickerContainer {position:relative; z-index:1;} .newsTicker { display:block; background-color:white; position:relative; border-bottom:1px dotted #000; margin-bottom:10px; height:55px; line-height:25px; overflow:hidden; } .newsTicker h4 { float:left; padding:0 4px 0px 8px; margin:0; z-index:1; position:relative; background-color:#FFFFFF; font-weight:bold; font-size:1.1em; color:#444; text-transform:uppercase; } .newsTicker .nav-inline { float:left; padding:0; margin:0; background-color:#FFFFFF; z-index:19; position:relative; } .newsTicker ul.arrows{ margin-left:0; padding:0px 4px 6px 6px; position:relative; z-index:10px; background-color:#fff; right:auto; } .newsTicker ul.arrows .next a { background: url(../img/next_arrow.gif) left top no-repeat; margin-left: 2px; } .newsTicker ul.arrows .prev a { background: url(../img/prev_arrow.gif) left top no-repeat; margin-left: 2px; } .newsTicker ul.arrows .prev a, .newsTicker ul.arrows .next a { width:7px; height:9px; } .newsTicker ul.arrows .next a:hover { background: url(../img/next_arrow.gif) left top no-repeat; margin-left: 2px; } .newsTicker ul.arrows .prev a:hover { background: url(../img/prev_arrow.gif) left top no-repeat; margin-left: 2px; } .newsTicker ul.newsItem { width:20000px; margin-left:28px; position:relative; padding-bottom:0; top:0px; left:0; z-index:0; } .newsTicker ul.newsItem li { width:546px; float:left; } .newsTicker h3, .newsTicker .newsItem p { font-family:arial,helvetica,sans-serif; } .newsTicker .newsItem p { position:absolute; font-size:12px; } .newsTicker ul.newsItem, .newsTicker ul.newsItem li{ padding-top:0px; margin-top:0px;} .newsTicker .newsItem p a {color:#b10717; font-weight:bold; font-size:1.2em;} .newsTicker .zippercontent {overflow:hidden; position:relative;} .newsTicker div {display:block;} .newsTicker .zipperhead { border-bottom:1px dotted #000; position:relative; padding: 0 4px;} .newsTicker .zipperhead h4 {position:relative; color:#003366; font-weight:normal; padding:0 8px; cursor:pointer; top:1px} .newsTicker .zipperhead h4:hover {color:#003366; font-weight:bold;} .newsTicker .zipperhead h4.selected,.newsTicker .zipperhead h4.selected {float:right; z-index:40; width:70px; font-size:1em; text-align:center; } .newsTicker .zipperhead h4.selected a.viewlink:hover, .newsTicker .zipperhead h4.selected a.viewlink:hover {color:#709fcf;} .newsTicker .zipperhead h4.selected:hover {font-weight:normal;} .newsTicker .zipperhead h4.activetab { background-color:#ffffff; border:1px dotted #000; border-bottom:none; color:#333333; } .viewAllactive .newsTicker .zipperhead h4.selected {border:1px solid #ccc; background: #f4f9ff url(../img/fx-arrowdown2.jpg) no-repeat 57px -16px; border-bottom:none; z-index:30; position:relative;} .newsTicker .topNews_panels {overflow:hidden} .newsTicker .zipperhead h4.activetab {font-weight:bold;} .viewAll .newsTicker .zipperhead h4.selected {color:#275475; padding:1px 12px 0 0 ; background:url(../img/fx-arrowdown2.jpg) no-repeat 60px 11px; height:20px;} .newsTicker .zipperhead h4.inactivetab {top:2px; background-color:transparent;} .viewAll h4.selected a.viewlink {color:#04233c;} .viewAll h4.selected a.viewlink .view {display:block;} .viewAll h4.selected a.viewlink .hide {display:none;} .viewAllactive h4.selected a.viewlink .view {display:none;} .viewAllactive h4.selected a.viewlink .hide {display:block;} .viewAllactive .newstickermore a {color:#333333; font-size:1.3em; padding:0 0 4px; font-weight:bold; text-transform:none; line-height:2em; } .viewAllactive .newstickermore a:hover {color:#7aa2cb;} .viewAllactive .newstickermore {display:block; border:1px solid #ccc; background: #f4f9ff url(../img/fx-topNewsBack.jpg) no-repeat left top; padding:8px; position:absolute; top:26px; width:549px ; left:0px; z-index:20; border-top:none;} .viewAll .newstickermore, .viewAllactive .topNews_panels, .viewAll .topNews_panels .hidden {position:absolute; display:none; height:1px; overflow:hidden; z-index:-100;left:-10000px; top:-10000px;} XHTML

以上就是Overlapping tab/drop down divs - links not working - CSS or JS issue?的详细内容,更多请关注web前端其它相关文章!

赞(0) 打赏
未经允许不得转载:web前端首页 » JavaScript 答疑

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

前端开发相关广告投放 更专业 更精准

联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏