asked on

vertical-align : middle doesn't work with height : 100%

Hey folks,

What I'm trying to do is have a long thin button running vertically down the side of a form with its text vertically aligned in the middle.

Eg.

+-------+---------+
| | rest |
| +---------+
| | of |
| text +---------+
| | form |
| +---------+
| | stuff |
+-------+---------+

So I wrote the example at the bottom. If I run with the heights as 100%, the anchor doesn't fill the cell but it is aligned in the middle. If specify the height in pixels, it does fill the cell but the text is at the top. That's all by the by anyway cuz in the real app I can't use an absolute height.

So how do I get text vertically aligned in the middle when using 100% height?

Cheers,
.pd.

<html>
<style>
.vm_hideshow
{
      vertical-align : middle;
      background-color : lightsteelblue;
      color : black;
      width : 5px;
/*      height : 300px; */
      height : 100%;
      font : arial;
      border-top : solid 3 azure;
      border-left : solid 3 azure;
      border-bottom : solid 3 steelblue;
      border-right : solid 3 steelblue;
}

.vm_hideshow:hover
{
      vertical-align : middle;
      background-color : lightsteelblue;
      color : black;
      width : 5px;
/*      height : 300px; */
      height : 100%;
      font : arial;
      border-top : solid 3 steelblue;
      border-left : solid 3 steelblue;
      border-bottom : solid 3 azure;
      border-right : solid 3 azure;
}
</style>
<table border="2">
      <tr>
            <td valign="middle">
                  <a href="somewhere" class="vm_hideshow">click</a>
            </td>
            <td>
                  <table>
                        <tr>
                              <td>one</td>
                        </tr>
                        <tr>
                              <td>one</td>
                        </tr>
                        <tr>
                              <td>one</td>
                        </tr>
                        <tr>
                              <td>one</td>
                        </tr>
                        <tr>
                              <td>one</td>
                        </tr>
                  </table>
            </td>
      </tr>
</table>
</html>

Roonaan

You could try adding display:table-cell to the class.

Regards

-r-

datamobility

ASKER

Thanks for the sugesstion. Unfortunately, it made no difference.

.pd.

neester

easy
Your not ROWSPANNING it...
It should VALIGN middle anyway
Here - change to:

<table border="2">
<tr>
<td rowspan="5">
<a href="somewhere" class="vm_hideshow">click</a>
</td>
<td>
<table>
<tr>
<td>one</td>
</tr>
<tr>
<td>one</td>
</tr>
<tr>
<td>one</td>
</tr>
<tr>
<td>one</td>
</tr>
<tr>
<td>one</td>
</tr>
</table>
</td>
</tr>
</table>

datamobility

ASKER

Welcome to my hell. :-)

Rowspan does't work either. :-\

.pd.

ASKER CERTIFIED SOLUTION

rcmwizbit

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

neester

This code SHOULD work, unless youhave some CSS screwing it up...

<table border="2">
<tr>
<td rowspan="5">
<a href="somewhere" class="vm_hideshow">click</a>
</td>
<td>
<table>
<tr>
<td>one</td>
</tr>
<tr>
<td>one</td>
</tr>
<tr>
<td>one</td>
</tr>
<tr>
<td>one</td>
</tr>
<tr>
<td>one</td>
</tr>
</table>
</td>
</tr>
</table>

Put that into a text file, open it in IE, or Moz...
Works fine :)

look here: http://img.neester.com/506.jpg

lombardp

Just a very simple change: apply the style not to the anchor (its size is limited to the inner text), but to the <TD>

Before:

<td rowspan="5">
<a href="somewhere" class="vm_hideshow">click</a>
</td>

After:

<td class="vm_hideshow" rowspan="5" valign="middle">
<a href="somewhere">click</a>
</td>

datamobility

ASKER

The clickable TD works fine so long as everything I need to do can be done in javascript. But TD's don't have serverside click events so I would guess I would then need to start looking at Request.Form["__EVENTTARGET"] manually in Page_Load to simulate catching a click event? Anyway - it's a lot of work when if I could just use a control that has a (server)Click event...

...and the problem with this anchor exists independently of tables too. Try this:

<a height="200px" width="5px" style="background-color : orange; height : 200px; vertical-align : middle;" valign="middle" href="somewhere">&gt</a>

The ">" appears at the top and I want it in the middle. Is it possible? Is vertical-align broken or am I using it wrongly?

.pd.

lombardp

valign="middle" should be placed in the <TD>, just like the CLASS attribute

datamobility

ASKER

> valign="middle" should be placed in the <TD>

That will only align the *anchor* to the middle of the *cell*. I want to align the text *in* the anchor to the middle of the *anchor*.

Just stick that single anchor in a file and open it in IE.

Done? Good - now how do I get the text in the middle?

.pd.

datamobility

ASKER

If anyone can figure out how to vertically align text to the middle of a tall anchor, then cool. In the meantime, I've found a solution that lets me use serverside click events.

Using rcmwizbit's clickable TD idea as a base, I then added an empty anchor to the page:

<a id="hiddenAnchor" runat="server"/>

In the TD's onclick javascript:

document.getElementById('hiddenAnchor').click();

Server-side:

protected HtmlAnchor hiddenAnchor;
Page_Load()
{
hiddenAnchor.ServerClick += new EventHandler(hiddenAnchor_Click);
}

Thanks to everyone for your contributions.

Cheers,
.pd.

SOLUTION

lombardp

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

datamobility

ASKER

Honestly? Because I was being lazy wanted to make use of the anchor's :hover sensitivity than set onmouseover/out attributes. I've been habitually using this method for "button"s ever since I discovered ":hover" so I didn' think of it for that reason and also, I'm so new to this, I just felt it was more likely to be my ignorance rather than a bug (IMHO) in <a>.

I mean, come on:

<a style="vertical-align : middle; height=200px; background-color : orange">click me</a>

That *should* work, right? It works for buttons and table cells, why not anchors?

Now, I've already given the points to wizbit but fair's fair. Your solution is simpler and closer to the original problem than the clickable td, so I'll create another question with your name in the title and give you some points that way.

.pd.