0

I am having trouble with the navigation tabs on my website. I can select the tab by clicking the appropriate, linked image on every tab except for the final one (tab6). There are no hidden objects on top of it, and tab6 is the only one with issues. Appropriate code snips below, Thanks!

HTML snippet:

<ul id="tabs">
        <li id="tab1"><a href="http://weather.uncc.edu/"> <img src="../src/button_home.png" onmouseover="this.src='../src/button_home_hover.png'" onmouseout="this.src='../src/button_home.png'" height="10%" width="10%"> </a></li>
        <li id="tab2"><a href="http://brianmagiweatheruncc.dreamhosters.com/obs/"><img src="../src/button_obs.png" onmouseover="this.src='../src/button_obs_hover.png'" onmouseout="this.src='../src/button_obs.png'" height="10%" width="10%"></a></li>
        <li id="tab3"><a href="http://brianmagiweatheruncc.dreamhosters.com/models"><img src="../src/button_models.png" onmouseover="this.src='../src/button_models_hover.png'" onmouseout="this.src='../src/button_models.png'" height="10%" width="10%"></a></li>
        <li id="tab4"><a href="http://brianmagiweatheruncc.dreamhosters.com/radar/"><img src="../src/button_radar_push.png" onmouseover="this.src='../src/button_radar_hover.png'" onmouseout="this.src='../src/button_radar_push.png'" height="10%" width="10%"></a></li>
        <li id="tab5"><a href="https://brianmagiweatheruncc.dreamhosters.com/"><img src="../src/button_station.png" onmouseover="this.src='../src/button_station_hover.png'" onmouseout="this.src='../src/button_station.png'" height="10%" width="10%"></a></li>
        <li id="tab6"><a href="https://weather.uncc.edu/faq/"><img src="../src/button_contact.png" onmouseover="this.src='../src/button_contact_hover.png'" onmouseout="this.src='../src/button_contact.png'" height="10%" width="10%"></a></li>
        </ul> 

CSS snippet:

#tabs {
 margin: 0;
 padding: 0;
 }  
#tabs li {
 display:inline; width:192px; height:50px;
 }
 #tabs li a {
 text-decoration: none;
 padding: 0.05em 0.05em;
 } 
5
  • if you could make working fiddle for this would help yourself by helping others to clearly see the problem
    – George G
    Sep 14, 2014 at 20:32
  • Here's your code: jsfiddle.net/LtLbm6tn. What's wrong? Seems to work just fine.
    – shmuli
    Sep 14, 2014 at 20:45
  • If I set position:absolute then the problem disappears. Perhaps there is an issue with other devs set as absolute?
    – WxPilot
    Sep 14, 2014 at 23:26
  • You may have some other element overlapping it.. Set position:absolute or relative with a z-index and see if the problem persists. Sep 15, 2014 at 0:25
  • setting a z-index under relative doesn't seem to make a difference. I used the inspector in Firefox to see if I could identify any other elements, but it seems to confirm that everything is where it should be. The problem is fixed by setting the position to absolute (I just have to adjust other objects' positions). You're right though, clearly something is blocking the button. It just seems odd..
    – WxPilot
    Sep 15, 2014 at 0:59

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.