There are certain times that you need to have a html element to have an absolute position. IE does not display the element as intended as seen in all major browsers.
The div element displays the content in the middle of the container. In IE you need to define the top and left as 0px.
Sample (I wanted the image to be displayed inside the div element):
.bannercontainer {
position:relative;
display:table;
width:340px;
height:340px;
}
.banner {
display:table-cell;
position:relative;
width:340px;
height:340px;
}
.banner a{
display:block;
position:absolute;
left:0px;
top:0px;
}
<div class="bannercontainer">
<div class="banner">
<a href="#"><img src="images/grillers.jpg" alt="Meat Grillers" width="340" height="340" border="0"></a>
<a href="#"><img src="images/GRANDE_MEAL.jpg" alt="Amigo Grande Meal" width="340" height="340" border="0"></a>
</div>
</div>
This sample displays the element correctly since the container has been specified at the correct width and height. Otherwise, the content would be placed outside.
Website Development & Programming related to front-end and back-end. Tech news: on gadgets, technology for the web and other things I think will be of use to people to be on the know.
Showing posts with label browser compatibility. Show all posts
Showing posts with label browser compatibility. Show all posts
Monday, November 3, 2014
Subscribe to:
Posts (Atom)