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>
datamobilityAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

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

Regards

-r-
0
datamobilityAuthor Commented:
Thanks for the sugesstion.  Unfortunately, it made no difference.

.pd.
0
neesterCommented:
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>
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

datamobilityAuthor Commented:
Welcome to my hell.  :-)

Rowspan does't work either.  :-\

.pd.
0
rcmwizbitCommented:

Is this in any way helpful?! Relies on small amount of javascript in addition to CSS - couldn't see how it was achievable otherwise, but it's nearly the end of the week so I could be missing something... ;)

You can see how it looks at http://ee.wizbit.net/css.php - any good?


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

.cellHideshowHover {
     vertical-align : middle;
     background-color : lightsteelblue;
     color : black;
     width : 5px;
     height : 100%;
     font : arial;
     border-top : solid 3 steelblue;
     border-left : solid 3 steelblue;
     border-bottom : solid 3 azure;
     border-right : solid 3 azure;
     cursor: hand;
}

.vmHideshow
{
     vertical-align : middle;
     background-color : lightsteelblue;
     color : black;
     width : 5px;
     font : arial;
     border: none;
}

.vmHideshow:hover
{
     vertical-align : middle;
     background-color : lightsteelblue;
     color : black;
     width : 5px;
     font : arial;
         border: none;
}

</style>
<table border="2">
     <tr>
          <td rowspan="5" id="buttonCell" class="cellHideshow" onClick="document.location='somewhere';" onMouseOver="this.className='cellHideshowHover';" onMouseOut="this.className='cellHideshow';">
               <a href="somewhere" class="vmHideshow">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>
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
neesterCommented:
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
0
lombardpCommented:
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>
0
datamobilityAuthor Commented:

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.
0
lombardpCommented:
valign="middle" should be placed in the <TD>, just like the CLASS attribute
0
datamobilityAuthor Commented:
>        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.
0
datamobilityAuthor Commented:
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.
0
lombardpCommented:
If I understand your need, you want all the TD area to be sensible to click, just like a button.

So why don't you use a button?

          <td class="vm_hideshow" rowspan="5" valign="middle">
               <input style="height: 100%;" type="button" value="CLICK" onclick="click()" />
          </td>
0
datamobilityAuthor Commented:
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.
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.