Encountering an issue with image alignment in Internet Explorer - they are aligning vertically instead of horizontally, while functioning correctly in all other browsers. Moreover, in IE8 and 7, the images are not being displayed at all. Is there a workaround for this problem? Provided below is the code snippet:
<div class="header_right_christmas">
<div class="preflang_christmas">
<a href="#" class="delivery_xmas">
</a>
<a href="#" target="_blank" class="facebook_xmas">
</a>
<a href="#" target="_blank" class="twitter_xmas">
</a>
<a href="#" target="_blank" class="pintrest_xmas">
</a>
<a href="#" target="_blank" class="google_xmas">
</a>
</div>
.preflang_christmas {float:right; display:inline-flex;}
.delivery_xmas {
height:40px;
width:196px;
display:block;
background-image:url('myimage.png')no-repeat;
}
.delivery_xmas:hover {
background-image:url('myimage.png');
}
.facebook_xmas {
width:40px;
height:40px;
display:block;
background:transparent url('myimage.png')no-repeat;
}
.facebook_xmas:hover {
background-image:url('myimage.png');
}
.twitter_xmas {
height:40px;
width:40px;
display:block;
background:transparent url('myimage.png')no-repeat;
}
.twitter_xmas:hover {
background-image:url('Christmas_Homepage_Images/twitter.png');
}
.pintrest_xmas {
height:40px;
width:40px;
display:block;
background:transparent url('Christmas_Homepage_Images/pintrest_bw.png')no-repeat;
}
.pintrest_xmas:hover {
background-image:url('Christmas_Homepage_Images/pintrest.png');
}
.google_xmas {
height:40px;
width:40px;
display:block;
background:transparent url('Christmas_Homepage_Images/google_plus_bw.png')no-repeat;
}
.google_xmas:hover {
background-image:url('Christmas_Homepage_Images/google_plus.png');
}