Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 4690
  • Last Modified:

Top align nested div in IE

The link in the following DIV displays lower on IE than in Firefox
Why? and how do I fix it?


<html>
<body>
<style type="text/css">
.mreResult { background: #ffffff; line-height: 14px; margin: 0px 0px; padding: 0px 0px; border: 0px 0px; }
.mreTitle { font-family: arial, sans-serif; font-size: 11px; font-weight: bold; text-decoration: underline; color: #336699; }
.mreTitleNoBold { font-family: arial, sans-serif; font-size: 11px; text-decoration: underline; color: #336699; }
.mreDescription { font-family: arial, sans-serif; font-size: 11px; }
.mreURL { font-family: arial, sans-serif; font-size: 9px; color: #798bb5; }
.mreCell { background: #f5f5f5; border: 1px solid; border-color: #999999; }
</style>

<body>
<table width=468px class=mreResult>
      <tr height=60px>
            <td class=mreCell>
                  <div style="height:52px; overflow: hidden; margin: 0px 0px; width:100%; ">
                        <div style="height:100%; margin: 0px 0px; width:100%; display: table;">
                              <div style="_position: absolute; _top: 50%; margin: 0px 0px; display: table-cell; vertical-align: middle;">
                                    <span class=mreTitle>
                                          <a href="http://www.objects.com.au" target=_top>Objects Pty Ltd</a>
                                    </span><br>
                                    <span class=mreDescription>
                                          For all your Java needs.
                                    </span>
                              </div>
                        </div>
                  </div>
            </td>
      </tr>
</table>
</body>
</html>
0
objects
Asked:
objects
1 Solution
 
BatalfCommented:
If you put in a doctype, you will probably see that your code doesn't work in any of those two browsers. A doctype is needed for the browser in order to know how to render your document.

This is a modified version of your code:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<body>
<style type="text/css">
.mreResult {
      width:468px;
      background: #f5f5f5;
      height:50px;  
      line-height: 14px;
      margin: 0px 0px;
      padding: 0px 0px;  
      border: 1px solid;
      border-color: #999999;
      padding-top:10px;
}

.mreTitle { font-family: arial, sans-serif; font-size: 11px; font-weight: bold; text-decoration: underline; color: #336699; }
.mreDescription { font-family: arial, sans-serif; font-size: 11px; }
.mreURL { font-family: arial, sans-serif; font-size: 9px; color: #798bb5; }
</style>

<body>
  <div class="mreResult">

      <span class=mreTitle>
           <a href="http://www.objects.com.au" target=_top>Objects Pty Ltd</a>
      </span><br>
      <span class=mreDescription>
           For all your Java needs.
      </span>

  </div>
</body>
</html>
0
 
objectsAuthor Commented:
My apologies, I should have given more details about where I was going with this.
I actually need to have multiple cells displayed horizontally, with the text in each one centre aligned vertically. ie. for banner ads
I'll close this one and rephrase the question I think.
0

Featured Post

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Tackle projects and never again get stuck behind a technical roadblock.
Join Now