Results 1 to 3 of 3

Thread: Vertical Bottom & Horizontal Center Alignment Fails in IE

  1. #1
    Join Date
    Sep 2005
    Location
    India
    Posts
    1,627
    Thanks
    6
    Thanked 107 Times in 107 Posts

    Default Vertical Bottom & Horizontal Center Alignment Fails in IE

    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

    Code:
    <!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

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    Code:
            <style type="text/css">            
                .category {
                    height: 125px;
                    font-size: 110px;
                    line-height: 125px;
                    margin: 0 auto;
                    overflow: hidden;
                    width: 170px;
    		border:1px dotted red;
    		text-align:center;
                }
    	   img {
    				border: none;
    				vertical-align:bottom;
    				display:inline;				
    			}			
            </style>
    I took out the padding: 0; because the default padding in all browsers for div is 0. I think you may remove the overflow: hidden. The highlighted addition, the font-size: 110px; is what makes it work in IE 6 and 7, doesn't seem to hurt others.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. The Following User Says Thank You to jscheuer1 For This Useful Post:

    codeexploiter (11-17-2009)

  4. #3
    Join Date
    Sep 2005
    Location
    India
    Posts
    1,627
    Thanks
    6
    Thanked 107 Times in 107 Posts

    Default

    Thanks John for the help (as usual ).

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •