CODEWITHSUNDEEP
htmlcss
Abhishek Fulzele
Abhishek Fulzele

Reputation: 33

Table Positioning difference in Chrome, Firefox and IE

I cannot figure out the positioning problem using table in firefox and IE. The fiddle will show the complete problem properly http://jsfiddle.net/qfDB9/ Even after providing proper height and width the problem persists. The actual reason I created the table is perfectly shown in Chrome whereas IE and Firefox has positioning problem.

CSS:

table tr #number_table {
    width:50px;
    height:50px;
    text-align:center;
    font-size:50px;
}
table tr #photo_table {
    width:150px;
    height:100%;
    text-align:center;
}
table tr #description_table {
    width:400px;
    padding-bottom:2em;
    font-size:20px;
}
table tr #band_name {
    text-align:center;
    height:25px;
}

HTML :

<table border="1" cellpadding="0" cellspacing="5"  width="600px" style="color:#000;">
<tr>
    <td id="number_table">1</td>
    <td rowspan="2" id="photo_table"><a href="http://upload.wikimedia.org/wikipedia/commons/d/df/The_Fabs.JPG" target="_blank"><img src="http://upload.wikimedia.org/wikipedia/commons/d/df/The_Fabs.JPG" width="140px" height="140px"/></a></td>
    <td rowspan="4" id="description_table">something something <br><br><br><br>something something <br><br><br><br>something something <br><br><br><br>something something <br><br><br><br></td>
</tr>
<tr>
    <td rowspan="3"></td>
</tr>
<tr>
     <td id="band_name">Something</td>
</tr>
</table>

Is there a way to resolve this.

Upvotes: 2

Views: 1467

Answers (3)

UID
UID

Reputation: 4494

Suggestion, Always try too use the semantic code. like using thead, tbody, as it helps in implementing the CSS too. Also help in streamlining the CSS throughout the site.

Solution You can add this CSS "table tbody td{vertical-align:top;}" so all the content in all <td>s should be align to top. So if you have to give some table heading which are usually align bottom then you can handle by <thead> <th> "vertical-align:bottom.".

Please refer the code here:

HTML

    <table border="1" cellpadding="0" cellspacing="5"  width="600px" style="color:#000;">
  <thead>
    <tr>
      <th>Heading 1</th>
      <th>Heading 2</th>
      <th>Heading 3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td id="number_table">1</td>
      <td rowspan="2" id="photo_table"><a href="http://upload.wikimedia.org/wikipedia/commons/d/df/The_Fabs.JPG" target="_blank"><img src="http://upload.wikimedia.org/wikipedia/commons/d/df/The_Fabs.JPG" width="140px" height="140px"/></a></td>
      <td rowspan="4" id="description_table">something something <br>
        <br>
        <br>
        <br>
        something something <br>
        <br>
        <br>
        <br>
        something something <br>
        <br>
        <br>
        <br>
        something something <br>
        <br>
        <br>
        <br></td>
    </tr>
    <tr>
      <td rowspan="3"></td>
    </tr>
    <tr>
      <td id="band_name">Something</td>
    </tr>
  </tbody>
</table>

CSS

table thead th{vertical-align:bottom;}
table tbody td{vertical-align:top;}


table tr #number_table {
    width:50px;
    height:50px;
    text-align:center;
    font-size:50px;

}
table tr #photo_table {
    width:150px;
    height:100%;
    text-align:center;
}
table tr #description_table {
    width:400px;
    padding-bottom:2em;
    font-size:20px;
}
table tr #band_name {
    text-align:center;
    height:25px;
}

You can refer to the fiddle too: http://jsfiddle.net/aasthatuteja/sU3SS/

Let me know if the helps!

Enjoy!!

Upvotes: 0

Hassan Sardar
Hassan Sardar

Reputation: 4523

[SOLVED] Check This out. Just Add valign="top" to the <tr> or <td>

DEMO HERE: http://jsfiddle.net/qfDB9/9/

Upvotes: 0

Jon Harding
Jon Harding

Reputation: 4946

You need to vertically align the content in the <tr> tags

table tr { vertical-align:top; }

See DEMO

I might also add that you should consider using div's instead of tables

Upvotes: 2

Related Questions