I've encountered some layout difficulties in IE9 and I'm struggling to identify the root of the problem. Even though I'm using Foundation 5, I don't believe that's the issue. The content is within a Foundation grid set at large-12 so there should be sufficient space.
In IE9, it appears like this; There shouldn't be any gap.
Here's the HTML code for two cards/links:
<div class="linkPanel">
<div class="lastMod">
<span id="last_modified" class="thisDate">Wed, 17 Jun 2015 09:39:13 CDT</span>
<div class="newItem">
<i class="fa fa-bell"></i>
</div>
</div>
<a href="#">Claims Emergency Contact</a>
</div>
<div class="linkPanel">
<div class="lastMod">
<span id="last_modified" class="thisDate">Wed, 17 Jun 2015 09:39:13 CDT</span>
<div class="newItem">
<i class="fa fa-bell"></i>
</div>
</div>
<a href="#">Claims Emergency Contact</a>
</div>
Below is the CSS:
.linkPanel {
width: 250px;
margin-bottom: 20px;
margin-right: 40px;
border-radius: 0;
background-color: #FFF;
box-shadow: 0 2px 2px 0 rgba(0,0,0,.16),0 0 2px 0 rgba(0,0,0,.12);
cursor: pointer;
float: left;
}
.linkPanel a {
padding: 14px 10px 0 19px;
}
.newItem {
float: right;
padding: 10px;
}
.thisDate {
display: none;
}
I'm at a loss trying to diagnose the issue. If you spot it or are aware of any specific IE9 bug causing this, your guidance would be greatly appreciated.