No replies
IHateCss
IHateCss's picture
Offline
newbie
Last seen: 10 years 28 weeks ago
Timezone: GMT+12
Joined: 2010-05-17
Posts: 1
Points: 2

Hi. I've been trying to get a div to vertical-align inside another div. So far it works on Firefox and IE8 but for old IE it wont work if there is more than one listingwrapper div.

The listingimage div seems to go out of whack when there are more than one of them on a page.

I used the tutorial on haslayout.net to get this far

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Test</title>
 
    <style type="text/css">
    .photo {
        max-height:67px;
        max-width:100px;
    }
    .listingwrapper {
        display: table;
        border: 2px solid black;
    }
 
    .listingtext {
        margin-left: 100px;
        display: table-cell;
        background: #0d0;
    }
 
    .listingimage {
        display: table-cell;
        vertical-align: middle;
    }
    </style>
 
    <!--[if lte IE 7]>
    <style type="text/css">
    .listingimage {
        float: left;
        position: relative;
        top: 50%;
    }
    .ie_helper {
        position: relative;
        top: -50%;
    }
    .listingimage,
    .ie_helper,
    .listingwrapper p {
        zoom: 1;
    }
    * html #dynamic_height_giver {
        margin-right: -3px;
    }
    </style>
    <![endif]-->
  </head>
 
  <body>
 
    <div class="listingwrapper">
      <div class="listingimage">
        <div class="ie_helper">
          <img class="photo" src="" alt="Test Image">
        </div>
      </div>
 
      <div class="listingtext">
        Foo bar Foo bar Foo bar Foo bar Foo bar<br>
        Foo bar Foo bar Foo bar Foo bar Foo bar<br>
        Foo bar Foo bar Foo bar Foo bar Foo bar<br>
        Foo bar Foo bar Foo bar Foo bar Foo bar<br>
        Foo bar Foo bar Foo bar Foo bar Foo bar<br>
        Foo bar Foo bar Foo bar Foo bar Foo bar<br>
      </div>
    </div>
 
    <br>
 
    <div class="listingwrapper">
      <div class="listingimage">
        <div class="ie_helper">
          <img class="photo" src="" alt="Test Image">
        </div>
      </div>
 
      <div class="listingtext">
        Foo bar Foo bar Foo bar Foo bar Foo bar<br>
        Foo bar Foo bar Foo bar Foo bar Foo bar<br>
        Foo bar Foo bar Foo bar Foo bar Foo bar<br>
        Foo bar Foo bar Foo bar Foo bar Foo bar<br>
        Foo bar Foo bar Foo bar Foo bar Foo bar<br>
        Foo bar Foo bar Foo bar Foo bar Foo bar<br>
      </div>
    </div>
 
  </body>
</html>