codeexploiter
11-16-2009, 03:29 PM
Hi All,
I am looking for a cross-browser based method for achieving vertical bottom & horizontal center alignment together. The method that I've tried is based on the line-height property and it works perfectly fine in browsers except IE7 (I haven't checked it with IE6 though).
You can find my page source below
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Vertical Bottom Alignment Test</title>
<style type="text/css">
.category {
height: 125px;
line-height: 125px;
margin: 0 auto;
overflow: hidden;
padding: 0;
width: 170px;
border:1px dotted red;
text-align:center;
}
img {
border: none;
vertical-align:bottom;
display:inline;
}
</style>
</head>
<body>
<div class="category">
<a href="http://www.google.com"><img src="EPC.png" /></a>
</div>
<br/>
<div class="category">
<a href="http://www.yahoo.com"><img src="EP1.png" /></a>
</div>
</body>
</html>
As you've noticed above the image container can have a width and height of 170px and 125px respectively, images can have random size but it goes upto 170 X 125. The first div block uses an image with a width 115px and height 68px. In Firefox, Google Chrome & Apple Safari, the image goes to the bottom of the 'category' class element correctly.
But in IE the image goes and stuck up in the middle section of the 'category' class element.
I am looking for a way to make the image goes to the bottom of 'category' class element without using absolute positioning at all. As I want horizontal centering I don't want to use the absolute positioning for the image for getting it to the bottom.
I have attached the page and the images through which you can view the issue.
Hope an answer for this from your side and thanks in advance for that.
Regards
I am looking for a cross-browser based method for achieving vertical bottom & horizontal center alignment together. The method that I've tried is based on the line-height property and it works perfectly fine in browsers except IE7 (I haven't checked it with IE6 though).
You can find my page source below
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Vertical Bottom Alignment Test</title>
<style type="text/css">
.category {
height: 125px;
line-height: 125px;
margin: 0 auto;
overflow: hidden;
padding: 0;
width: 170px;
border:1px dotted red;
text-align:center;
}
img {
border: none;
vertical-align:bottom;
display:inline;
}
</style>
</head>
<body>
<div class="category">
<a href="http://www.google.com"><img src="EPC.png" /></a>
</div>
<br/>
<div class="category">
<a href="http://www.yahoo.com"><img src="EP1.png" /></a>
</div>
</body>
</html>
As you've noticed above the image container can have a width and height of 170px and 125px respectively, images can have random size but it goes upto 170 X 125. The first div block uses an image with a width 115px and height 68px. In Firefox, Google Chrome & Apple Safari, the image goes to the bottom of the 'category' class element correctly.
But in IE the image goes and stuck up in the middle section of the 'category' class element.
I am looking for a way to make the image goes to the bottom of 'category' class element without using absolute positioning at all. As I want horizontal centering I don't want to use the absolute positioning for the image for getting it to the bottom.
I have attached the page and the images through which you can view the issue.
Hope an answer for this from your side and thanks in advance for that.
Regards