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;
}