1

I have a table with absolute positioneg paragraphs inside <p>. It renders as I want it to in Chrome and Opera, but in Firefox all the numbers are outside the table and crammed together. I've tried adding position: relative; to all parent element, but it didn't help much. Where's the problem? I quess it's something simple.

That's how it looks: http://i50.tinypic.com/34diewz.png (I'm a new user, can't upload images yet)

Also these <p>'s must be postitioned absolute, because there are other element in table cells in full project - this code is just a small part. Here it is:

<!DOCTYPE html>
<html>
   <head>
      <style>
         * { margin: 0; padding: 0; } /* Just a quick reset, I use proper one in full project */

         table {
            background-color: #296B73;
         }

         td {
            position: relative;
            height: 40px; width: 40px;
            border: 1px solid #0F2D40;
         }

         p {
            position: absolute;
            top: 28%; left: 50%;
            margin-left: -5px;
         }

         td:nth-child(1) { width: 50px; }
         td:nth-child(2) { width: 75px; }
         td:nth-child(3) { width: 100px; }
      </style>
   </head>
   <body>
      <table>
         <tr>
            <td><p>1</p></td>
            <td><p>2</p></td>
            <td><p>3</p></td>
         </tr>
         <tr>
            <td><p>1</p></td>
            <td><p>2</p></td>
            <td><p>3</p></td>
         </tr>
         <tr>
            <td><p>1</p></td>
            <td><p>2</p></td>
            <td><p>3</p></td>
         </tr>
      </table>
   </body>
</html>
Brian Tompsett - 汤莱恩
  • 5,753
  • 72
  • 57
  • 129
Robert Kirsz
  • 1,257
  • 1
  • 13
  • 15
  • 1
    Similar to this post: http://stackoverflow.com/questions/4564638/using-position-relative-absolute-within-a-td – jfrank Sep 25 '12 at 21:31
  • @jfrank Right, that's exactly my problem, thanks. I've searched for answer but didn't find it, I'm still a noob here. – Robert Kirsz Sep 26 '12 at 08:59

1 Answers1

1

You can't relative position TD's so instead you need to put an surrounding container for the P's:

<td><div><p>1</p></div></td>
<td><div><p>2</p></div></td>
<td><div><p>3</p></div></td>

Then in CSS:

td div { position: relative }
jtheman
  • 7,421
  • 3
  • 28
  • 39