vertical-align:middle works on IE but not Firefox

ihsin · **Joined:** Mon Jan 14, 2008 8:38 am **Posts:** 6

Hi there,

I'm trying to display paragraph with a table embedded in there inline. I hope the table can behave like a big letter in the paragraph, with the line aligned in the center of the table. For example, if I want to make "1/2" to a vertical "1 <hr/> 2", I
would put it in a table and change the "display" property as follows:

Code:

<p> This is a long paragraph. This is a long paragraph. This is a long paragraph. This is a long paragraph. This is a long paragraph. This is a long paragraph.

I HAVE <table style="display:inline;vertical-align:middle"> <tr> <td> 1 <hr /> 2 </td> </tr> </table>  PIZZA.

This is a long paragraph. This is a long paragraph. This is a long paragraph. This is a long paragraph. 

This works perfectly for me on IE, but on Firefox only the "inline" property works, and the "vertical-align" property doesn't (i.e., the table and the line text are aligned at the bottom still).

Did I do something wrong? Or is this a Firefox bug?

Thanks

rangana · **Posted:** Wed Feb 27, 2008 6:40 am

Changing your codes to quoted below will work:

Code:

<p> This is a long paragraph. This is a long paragraph. This is a long paragraph. This is a long paragraph. This is a long paragraph. This is a long paragraph. 

I HAVE
<table>
<tr>
   <td>1</td>
</tr>
<tr>
      <td><hr/></td>
      <td>PIZZA</td>
</tr>
   <td>2</td> 
</tr>
</table>
This is a long paragraph. This is a long paragraph. This is a long paragraph. This is a long paragraph.

Haven't you know that http://www.hotdesign.com/seybold/ designing in table is not a good practice. You should start building your page w/o tables.

See if the code helps

vertical-align:middle works on IE but not Firefox

Who is online