Safari Display of Tables - Cross Browser Problem

Discussion in 'Web Design and Development' started by Jackmartini, May 10, 2010.

  1. Jackmartini macrumors newbie

    Joined:
    May 10, 2010
    #1
    Using AJAX & php to return a randomly generated number of single column tables, and drop them into a <div> element.
    ( http://www.thegreatmartinicompany.co...ace-value.html ). I've set the div to text-align: center, and put auto margins on the tables. The result is the tables are centered and equally spaced in the div element regardless of the number of tables returned. As appropriate FF and IE display the tables side by side, but Safari stacks them on top of each other. An example of the returned code is below. Any ideas why Safari does not display this as IE and FF do?

    <table style="margin-left:auto; margin-right:auto"><tr><td></td></tr>
    <tr><td></td></tr>
    <tr><td></td></tr>
    <tr><td></td></tr>
    <tr><td></td></tr>
    <tr><td></td></tr>
    <tr><td></td></tr>
    <tr><td></td></tr>
    <tr><td></td></tr>
    <tr><td></td></tr>
    </table>
    <table style="margin-left:auto; margin-right:auto"><tr><td></td></tr>
    <tr><td></td></tr>
    <tr><td></td></tr>
    <tr><td></td></tr>
    <tr><td></td></tr>
    <tr><td></td></tr>
    <tr><td></td></tr>
    <tr><td></td></tr>
    <tr><td></td></tr>
    <tr><td></td></tr>
    </table>
    <table style="margin-left:auto; margin-right:auto"><tr><td></td></tr>
    <tr><td></td></tr>
    <tr><td></td></tr>
    <tr><td></td></tr>
    <tr><td></td></tr>
    <tr><td></td></tr>
    <tr><td></td></tr>
    <tr><td></td></tr>
    <tr><td></td></tr>
    <tr><td></td></tr>
    </table>
     
  2. Darth.Titan macrumors 68030

    Darth.Titan

    Joined:
    Oct 31, 2007
    Location:
    Austin, TX
    #2
    Well technically Safari's behavior is the correct one since a table is a block-level element. If you want the tables to appear side-by-side you could try adding a float:left to each table's style. That should work since it looks like the tables are enclosed in an absolutely-positioned div.

    I had to dig a bit to find the page you were referring to as the link you posted didn't work. For the benefit of other posters, here is the page the OP was referring to.
     

Share This Page