TD Alignment, Firefox vs IE Options

[adafsdfasdfadasd...]

Problem: Unable to vertically align the links on the right labled "google" in firefox.
Example: here

CSS:

CODE

<style type=text/css>

body {
    background-color: white;
    background-image:url('');
    background-position: top center;
    background-repeat: no-repeat;
    background-attachment: scroll;
    }

table, tr, td,div {
    background-color: transparent;
    border: none;
    }

img {
    border: none!important;
    padding: 0px;
    margin: 0px;
    }

div.right {
    visibility: visible!important;
    background-color: white;
    border: none;
    width: 100%;
    height: 100%;
    font: arial;
    font-size: 8px;
    color: 93936E!important;
    margin-right: 0px;
    padding: 0px;
    overflow: auto;
    }
    
a.direc:link, a.direc:visited, a.direc:active {
    text-decoration: none!important;
    font-family: arial;
    font-style:normal;
    font-size: 10px;
    line-height: 20px;
    color: black!important;
    background-color: white!important;
    border-left: none;
    display: block;
    margin: 0px;
    padding: 0px;
    }

a.direc:hover {
    text-decoration: none!important;
    font-family: arial;
    font-style:normal;
    font-size: 10px;
    line-height: 20px;
    color: white!important;
    background-color: black!important;
    border-left: none;
    display: block;
    margin: 0px;
    padding: 0px;
    }

div.holder {
    position:absolute;
    left: 50%; margin-left: -300px; width: 600px;
    top:0%; margin-top: 180px; height: 400px;
    overflow: auto;
    visibility: visible!important;
    }

table.holder {
    visibility: visible!important;
    }    

td.left {
    background-color: 794021!important;
    border: 3px solid;
    border-color: 794021!important;
    width: 200px;
    height: 380px;
    font: arial;
    font-size: 8px;
    color: 93936E!important;
    margin-right: 0px;
    padding: 0px;
    text-align: center;
    vertical-align: middle;
    }

td.middle {
    background-color: white;
    border: 3px solid;
    border-color: 794021!important;
    width: 200px;
    height: 380px;
    font: arial;
    font-size: 8px;
    color: 93936E!important;
    margin-right: 0px;
    padding: 0px;
    }

td.right {
    background-color: white;
    border: 3px solid;
    border-color: 794021!important;
    width: 200px;
    height: 380px;
    font: arial;
    font-size: 8px;
    color: 93936E!important;
    margin-right: 0px;
    padding: 0px;
    vertical-align: middle;
    }

</style>

<style type="text/css">
.contacttable,.whitetext12,.nametext,.lightbluetext8,.orangetext15,.blacktext12,
btext,.redtext,.redbtext{
    display:none;height:0px;!important;visibility:hidden}
td td td td{
    border:0px;width:0px;text-align:left;}
table,td{
    padding:0px;width:;background-color:transparent}
table table table{
    padding:1px;height:.01%;width:100%;}
table table,table table table table,table,tr,td{
    height:0px;!important;border:0px;!important}
a.text,table div font a,table div div,.navbar font,tr td font{
    visibility:hidden;display:none;height:0px;!important;}
table table table table,table table table table td.text, td.text td.text table{
    display:none;}
td.text table table{
    display:inline;visibility:visible;}
table td table tr td.text table{
    visibility:hidden;}
table td table tr td.text table table,table td table tr td.text table table td.text{
    visibility:visible;}
</style>

HTML:

CODE

<div class="holder">
<table class="holder" cellspacing="1px" valign="middle">

<td class="left" align="center">
<img src="http://i89.photobucket.com/albums/k237/ximonolithix/Layout/rawr.jpg" alt="Layout by ximonolithix" border="0">
</td>

<td class="middle">
rawr
</td>

<td class="right">
<a class="direc" href="http://www.google.com">Google</a>
<a class="direc" href="http://www.google.com">Google</a>
<a class="direc" href="http://www.google.com">Google</a>
<a class="direc" href="http://www.google.com">Google</a>
</td>

</table>
</div>

Edit/

After using google I came across this bit of info from this source.

"We already know this works on table cells, so we can set that aside. The fact that it only applies to inline-level element will quickly eliminate some of the confusion, so don't even bother trying to vertically align block-level elements with the vertical-align property. What the second part of the definition is trying to say, in conjunction with the first part, is that the vertical-align property must be applied to the inline-level element that is a child of another element."

Question: My question now is how do you vertically align block objects inside of a cell if the vertical-align attribute does not apply to block elements?

This post has been edited by ximonolithix: Oct 19 2006, 11:39 PM

[freeflow]

Try using this instead:

CODE

<p align="right">
<a class="direc" href="http://www.google.com">Google</a>
<a class="direc" href="http://www.google.com">Google</a>
<a class="direc" href="http://www.google.com">Google</a>
<a class="direc" href="http://www.google.com">Google</a>
</p>

[adafsdfasdfadasd...]

Try using this instead:

CODE

<p align="right">
<a class="direc" href="http://www.google.com">Google</a>
<a class="direc" href="http://www.google.com">Google</a>
<a class="direc" href="http://www.google.com">Google</a>
<a class="direc" href="http://www.google.com">Google</a>
</p>

Why would I use that? I'm trying to vertically align it...

Edit/

"align" only changes the horizontal axis :/