Grow your CSS skills. Land your dream job.

Vertical Bottom & Horizontal Center Alignment Fails in IE

  • # November 16, 2009 at 10:20 am

    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">



    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. Unzip the zip file, keep the content of it in same location and double-click on 1.htm file in Firefox and in IE and look at the first image position in both Firefox and IE. I would like to have the image in IE in the same position in Firefox.

    Thanks in advance for the answer.

    Regards

    JP

    Edit



    I have solved the issue by changing the following css class

    .category {
    height: 125px;
    line-height: 125px;
    margin: 0 auto;
    overflow: hidden;
    padding: 0;
    width: 170px;
    border:1px dotted red;
    text-align:center;
    font-size:100px;
    }

Viewing 1 post (of 1 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".