WordPress.org

1. gbaka
   Member
   Posted 2 years ago #

   I tried using it to make the first row span the 3 columns, it worked for most part except on firefox when i place something in there it doesn't center it just stays where the first column is and doesn't center, it just makes the first column larger if i place more text in there.

2. stvwlf
   Member
   Posted 2 years ago #

   You will need to apply CSS to the table cells to center text
   text-align: center

3. gbaka
   Member
   Posted 2 years ago #

   yea I don't that'll work
   heres what it looks like

4. stvwlf
   Member
   Posted 2 years ago #

   The image you posted has nothing to do with the way you described your setup.

   You said you had the first row span 3 columns. What i see is one row with two cells in it. Where us your table HTML code, or even better, a URL of the page with the problem.

   Are you referring to horizontal centering or vertical centering?

   DO you have a width set on the table that prevents the cells from expanding past a certain width?

5. gbaka
   Member
   Posted 2 years ago #

   it is span 3 rows thats the problem it do it properly on firefox unless I'm doing something wrong with this code
   

   <table border="1">
   <tbody>
   <tr>
     <th rowspan="3" class="avatar"><img src="http://ani-down.com/wp-content/uploads/2009/10/default.gif" alt="" /></th>
     <td>adasda</td>
   
   </tr>
   <tr>
   
     <td>fsdfsdf</td>
   </tr>
   <tr>
   
     <td>sfdfsdf</td>
   </tr>
   </tbody>
   </table>

6. stvwlf
   Member
   Posted 2 years ago #

   I just loaded the code you sent on a web page just by itself and viewed it in FF 3.0 and 3.5. It displayed as you want it to display - all 3 cells in the 2nd column were to the right of the image in the first column which was 3 cells tall.

   Try it yourself - put that code on a page by itself and view in the browser.

   Maybe some other styling is interfering when its on your live page?

7. gbaka
   Member
   Posted 2 years ago #

   that's probably it but i don't see anything in the css that's interfering with it, it might be the other table...

8. ARandomGuy
   Member
   Posted 1 year ago #

   I know this topic is quite old, but since it was one of the first results on google about the issue, and I couldn't find a solution anywhere, I've decided to post it here anyways.

   After a quick bit of hit-and-miss debugging I was able to figure out a solution to this problem. Apparently, FireFox handles some CSS styling differently than IE. Vertical-align is one of those. Changing your CSS a bit should give you the result you want with little to no impact on the rest of your website.

   This was the problematic CSS code I had:
   td {vertical-align: text-top;}

   After changing it to the following, everything worked as expected in both FireFox and IE:
   td {vertical-align: top;}

   As you can see, all I did was chance "text-top" to "top". For some reason, when using text-top alignment in firefox, you end up with some very ugly results when you put images inside of table cells with rowspans. If nothing else, I know I've learned my lesson and will avoid using text-top alignment in my CSS styles in the future.

   Best of luck to anyone else who had this problem.

Topic Closed

This topic has been closed to new replies.