Menu icon Foundation
Icon Side Nav Links Not Working in IE - Please Help!

I have a side navigation based on the Side Nav and Icon Bar that is working fine in every browser except IE (of course). In IE, if you try to click a sidebar link, it does not work if you try to click the text. If you click the box around the text or the icon, it works. I'm guessing this has something to do with the weird way that IE treats tags, but I'm not sure how to fix it. Anyone know what I should do to get the links working?

If there's a way to get this working without removing the label tags, that would be great. Removing the label tags messes up the CSS quite a bit...

Here is a jsFiddle: http://jsfiddle.net/regularmegs/j7ezudra/3/

    <!-- Sidebar Navigation -->
    <div class="sidebar left clearfix">
    	<div class="icon-bar vertical five-up label-right left clearfix">
		  <a class="item" id="home">
		    <i class="fa fa-home fa-2x fa-fw"></i>
		    <label>Home</label>
		  </a>
		  <a class="item" id="resources">
		    <i class="fa fa-folder-open fa-2x fa-fw"></i>
		    <label>Resources</label>
		  </a>
		  <a class="item" id="reports">
		    <i class="fa fa-pie-chart fa-2x fa-fw"></i>
		    <label>Reports</label>
		  </a>
		  <a class="item" id="team">
		    <i class="fa fa-users fa-2x fa-fw"></i>
		    <label>Team</label>
		  </a>
		  <a class="item" id="support-tickets">
		  	<span class="notification-container">
			    <i class="fa fa-envelope fa-2x fa-fw"></i>
			    <span class="notification-counter">1</span>
			    <label>Support Tickets</label>
		  	</span>
		  </a>
		  <!-- These Last 2 Items to Be Displayed Only On Certain Pages as Necessary -->
		  <a class="item" id="director-info">
		    <i class="fa fa-shield fa-2x fa-fw"></i>
		    <label>Director Info</label>
		  </a>
		  <a class="item" id="merge-accounts">
		    <i class="fa fa-compress fa-2x fa-fw"></i>
		    <label>Merge Account</label>
		  </a>
		</div>
    </div>
    <!-- End Sidebar -->
            

         

Internet Explorersidebariconnavside navicon barlabellinks

I have a side navigation based on the Side Nav and Icon Bar that is working fine in every browser except IE (of course). In IE, if you try to click a sidebar link, it does not work if you try to click the text. If you click the box around the text or the icon, it works. I'm guessing this has something to do with the weird way that IE treats tags, but I'm not sure how to fix it. Anyone know what I should do to get the links working?

If there's a way to get this working without removing the label tags, that would be great. Removing the label tags messes up the CSS quite a bit...

Here is a jsFiddle: http://jsfiddle.net/regularmegs/j7ezudra/3/

    <!-- Sidebar Navigation -->
    <div class="sidebar left clearfix">
    	<div class="icon-bar vertical five-up label-right left clearfix">
		  <a class="item" id="home">
		    <i class="fa fa-home fa-2x fa-fw"></i>
		    <label>Home</label>
		  </a>
		  <a class="item" id="resources">
		    <i class="fa fa-folder-open fa-2x fa-fw"></i>
		    <label>Resources</label>
		  </a>
		  <a class="item" id="reports">
		    <i class="fa fa-pie-chart fa-2x fa-fw"></i>
		    <label>Reports</label>
		  </a>
		  <a class="item" id="team">
		    <i class="fa fa-users fa-2x fa-fw"></i>
		    <label>Team</label>
		  </a>
		  <a class="item" id="support-tickets">
		  	<span class="notification-container">
			    <i class="fa fa-envelope fa-2x fa-fw"></i>
			    <span class="notification-counter">1</span>
			    <label>Support Tickets</label>
		  	</span>
		  </a>
		  <!-- These Last 2 Items to Be Displayed Only On Certain Pages as Necessary -->
		  <a class="item" id="director-info">
		    <i class="fa fa-shield fa-2x fa-fw"></i>
		    <label>Director Info</label>
		  </a>
		  <a class="item" id="merge-accounts">
		    <i class="fa fa-compress fa-2x fa-fw"></i>
		    <label>Merge Account</label>
		  </a>
		</div>
    </div>
    <!-- End Sidebar -->
            

         
Hans Gelok over 4 years ago

Hi Megan,
I have the same issue, did you find a solution?
I've changed label for span which works for me (with some css changes).