1 reply [Last post]
jpvalappil
Offline
newbie
Last seen: 12 years 26 weeks ago
Timezone: GMT+5.5
Joined: 2009-11-16
Posts: 1
Points: 2

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. Just rename problem.txt to problem.htm and open it in a browser.

Hope an answer for this from your side and thanks in advance for that.

Regards

JP

AttachmentSize
EPC.png14.35 KB
EP1.png37.57 KB
problem.txt918 bytes
Stomme poes
Stomme poes's picture
Offline
Elder
Netherlands
Last seen: 10 years 29 weeks ago
Netherlands
Timezone: GMT+2
Joined: 2008-02-04
Posts: 1854
Points: 378

Bet it looks great in IE8.

This sure sounds like the IE line-height bug where Haslayout on the div combined with your inline being an image makes IE suck balls.

I'm on some other computer so not tested, but if the page were wrapped in a box, and the divs inside were display: inline-block with a line-height but no Haslayout...
You could center them using text-align: center on the new big parent div. Being inline-block, they would shrink-wrap to the width of their content, the image. They could have a line-height and the images would still be vertical-align: bottom. Note if your line-height ever needs to be very small, IE will instead use the line-height of the default font-size on the divs instead. But so far I see you using very large line-heights.

To make the inline-block divs wrap instead of sitting side-by-side, the big wrapping div could have a width that's just too small to let two of them sit side-by-side:

<body>
  <div id="wrap">
    <div>
      <a href="foo"><img src="foo.jpg" width="170" height="125" alt="HI FOO" /></a>
    </div>
    <div>
      <a href="foo"><img src="foo2.jpg" width="115" height="125" alt="HI GEN FOO" /></a>
    </div>
  </div>
</body>

#wrap {
  width: 180px;
  margin: 0 auto;
  text-align: center;
  background-color: #f00;
}
 
#wrap div {
  display: inline-block;
  padding: 0 5px;
  line-height: 125px;
  background-color: #ff0;
}
/*display: inline needed here for IE?*/
 
img {
  vertical-align: bottom;
  border: 0;
  background-color: #00f;
}

Dunno if something like this would get around IE's bugs. It feels impractical and contrived, though. It introduces bugs in FF2/K-Meleon, and possibly IE would need an additional display: inline on the divs to get around its inline-block bugs.

I'm no expert, but I fake one on teh Internets