HTML:
<div class="navImageLinks">
<div id="fp" class="mainImageNav floatLeft fp">
<img src="../theImages/FindaProvider_icon.png" width="20" height="20" style="vertical-align: middle;" /> Find a Provider
</div>
<div id="sv" class="mainImageNav floatLeft sv">
<img src="../theImages/Services_icon.png" width="20" height="20" style="vertical-align: middle;" /> Services
</div>
<div id="lc" class="mainImageNav floatLeft lc">
<img src="../theImages/Locations_icon.png" width="20" height="20" style="vertical-align: middle;" /> Locations
</div>
<div id="ma" class="mainImageNav floatLeft ma">
<img src="../theImages/MakeAnAppt_icon.png" width="20" height="20" style="vertical-align: middle;" /> Make an Appointment
</div>
</div>
CSS:
.navImageLinks
{
width: 100%;
overflow: hidden;
padding: 0;
margin: 0;
}
.mainImageNav
{
width: 25%;
height: 30px;
line-height: 30px;
vertical-align: middle;
text-align: center;
font-size: small;
padding: 0;
margin: 0;
color: #FFF;
font-family: Arial, Verdana;
font-weight: bold;
}
.fp
{
background: url('../theImages/FindaDoc_NotActive.png') no-repeat;
background-size: 100% 100%;
cursor: pointer;
}
.sv
{
background: url('../theImages/Services_NotActive.png') no-repeat;
background-size: 100% 100%;
cursor: pointer;
}
.lc
{
background: url('../theImages/Locations_NotActive.png') no-repeat;
background-size: 100% 100%;
cursor: pointer;
}
.ma
{
background: url('../theImages/MakeAnAppt_NotActive.png') no-repeat;
background-size: 100% 100%;
cursor: pointer;
}
IE (zoomed out):
Firefox (zoomed out):
Is there a way to modify the CSS to ensure the background also stretches in IE?