Question

I have a table. In my td I have 2 li. In the first li I have 2 <p>. The first <p> represents the day and the second one the month. I would like to rotate by 90 degrees the second <p>, and I would like it to be displayed next to the day. My code is not working if I put display:inline on <p>. If I remove display:inline the rotation is working great but the 2 <p>s are not displayed next to each other but one below each other. And this is not what I would like. Hope someone can help. Thank you in advance for your replies. Cheers. Marc.

Here my HTML:

<td>
  <ul>
    <li>
      <p>12</p>
      <p>FEB</p>
    </li>
    <li>
    </li>
  </ul>
</td>

My CSS:

#div td li p{
    display:inline;
    font-size:10px;}

#div td li p:last-child{
  -moz-transform: rotate(270deg);
  -moz-transform-origin: 50% 50%;
  -webkit-transform: rotate(270deg);
  -webkit-transform-origin: 50% 50%;}

Answer 1

<table>
    <tr>
        <td>
            <ul>
                <li>
                    <p>12</p>
                    <p>FEB</p>
                </li>
                <li>
                </li>
            </ul>
        </td>
    </tr>
</table>


td li p{
    display:inline-block;
    /* for lte IE7 */
    #zoom: 1
    #display: inline;
    font-size:10px;
}

td li p:last-child{
  -moz-transform: rotate(270deg);
  -moz-transform-origin: 50% 50%;
  -webkit-transform: rotate(270deg);
  -webkit-transform-origin: 50% 50%;}