Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 12 of 12

Thread: Table Alignment

  1. #1
    New Coder
    Join Date
    Dec 2009
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Table Alignment

    Well I thought I was going to re-do the site and messed it up.. there is some alignment issues on every page in ie but here is the worst of them all


    <script src="peel.js" type="text/javascript"></script>
    <SCRIPT TYPE="text/javascript">
    <!--
    // copyright 1999 Idocs, Inc. http://www.idocs.com/tags/
    // Distribute this script freely, but please keep this
    // notice with the code.

    var rollOverArr=new Array();
    function setrollover(OverImgSrc,pageImageName)
    {
    if (! document.images)return;
    if (pageImageName == null)
    pageImageName = document.images[document.images.length-1].name;
    rollOverArr[pageImageName]=new Object;
    rollOverArr[pageImageName].overImg = new Image;
    rollOverArr[pageImageName].overImg.src=OverImgSrc;
    }

    function rollover(pageImageName)
    {
    if (! document.images)return;
    if (! rollOverArr[pageImageName])return;
    if (! rollOverArr[pageImageName].outImg)
    {
    rollOverArr[pageImageName].outImg = new Image;
    rollOverArr[pageImageName].outImg.src = document.images[pageImageName].src;
    }
    document.images[pageImageName].src=rollOverArr[pageImageName].overImg.src;
    }

    function rollout(pageImageName)
    {
    if (! document.images)return;
    if (! rollOverArr[pageImageName])return;
    document.images[pageImageName].src=rollOverArr[pageImageName].outImg.src;
    }
    //-->
    </SCRIPT>
    <script language="javascript" type="text/javascript">
    <!--
    function popitup(url) {
    newwindow=window.open(url,'name','height=200,width=150');
    if (window.focus) {newwindow.focus()}
    return false;
    }

    // -->
    </script>


    </head>

    <style type="text/css">
    body{ background-image: url(bg.jpg); }
    </style>


    <!-- ImageReady Slices (anita.psd) -->
    <table id="Table_01" width="1025" height="769" border="0">
    <tr>
    <td colspan="5" rowspan="3">
    <img src="images/index_01.png" width="261" height="237" alt=""></td>
    <td colspan="25">
    <img src="images/index_02.png" width="763" height="47" alt=""></td>
    <td>
    <img src="images/spacer.gif" width="1" height="47" alt=""></td>
    </tr>
    <tr>
    <td colspan="21">
    <img src="images/index_03.png" width="551" height="1" alt=""></td>
    <td rowspan="16">
    <img src="images/index_04.png" width="42" height="369" alt=""></td>
    <td colspan="2" rowspan="16">
    <img src="images/index_05.png" width="169" height="369" alt=""></td>
    <td rowspan="17">
    <img src="images/index_06.png" width="1" height="370" alt=""></td>
    <td>
    <img src="images/spacer.gif" width="1" height="1" alt=""></td>
    </tr>
    <tr>
    <td rowspan="4">
    <img src="images/index_07.png" width="1" height="213" alt=""></td>
    <td colspan="20" border="0">
    <img src="images/index_08.jpg" width="550" height="189" alt=""></td>
    <td>
    <img src="images/spacer.gif" width="1" height="189" alt=""></td>
    </tr>
    <tr>
    <td colspan="5" rowspan="3">
    <img src="images/index_09.png" width="261" height="24" alt=""></td>
    <td colspan="7">
    <img src="images/index_10.jpg" width="150" height="1" alt=""></td>
    <td colspan="13" rowspan="2">
    <img src="images/index_11.jpg" width="400" height="21" alt=""></td>
    <td>
    <img src="images/spacer.gif" width="1" height="1" alt=""></td>
    </tr>
    <tr>
    <td colspan="7" rowspan="2">
    <img src="images/index_12.jpg" width="150" height="23" alt=""></td>
    <td>
    <img src="images/spacer.gif" width="1" height="20" alt=""></td>
    </tr>
    <tr>
    <td colspan="5" rowspan="3">
    <img src="images/index_13.jpg" width="140" height="32" alt=""></td>
    <td rowspan="5">
    <img src="images/index_14.jpg" width="112" height="37" alt=""></td>
    <td colspan="7" rowspan="6">
    <img src="images/index_15.jpg" width="148" height="45" alt=""></td>
    <td>
    <img src="images/spacer.gif" width="1" height="3" alt=""></td>
    </tr>
    <tr>
    <td colspan="4">
    <img src="images/index_16.png" width="251" height="1" alt=""></td>
    <td colspan="7" rowspan="3"cellpadding="0" cellspacing="0" border="0">
    <a href="http://www.MYSITEe.com/index.html"
    onMouseOver = "rollover('home')"
    onMouseOut = "rollout('home')">
    <img src="images/aboutme.jpg" name="home" width="106" height="33" border="0" alt=""></a><SCRIPT TYPE="text/javascript">
    <!--
    setrollover("images/aboutmerollover.jpg");
    //-->
    </SCRIPT>
    </td>
    <td colspan="2" rowspan="7">
    <img src="images/index_18.png" width="55" height="115" alt=""></td>
    <td>
    <img src="images/spacer.gif" width="1" height="1" alt=""></td>
    </tr>
    <tr>
    <td colspan="4" rowspan="2">
    <img src="images/index_19.png" width="251" height="32" alt=""></td>
    <td>
    <img src="images/spacer.gif" width="1" height="28" alt=""></td>
    </tr>
    <tr>
    <td colspan="5" rowspan="7"cellpadding="0" cellspacing="0" border="0">
    <img src="images/index_20.jpg" width="140" height="106" alt=""></td>
    <td>
    <img src="images/spacer.gif" width="1" height="4" alt=""></td>
    </tr>
    <tr>
    <td colspan="7" rowspan="4">
    <img src="images/index_21.png" width="273" height="82" alt=""></td>
    <td colspan="4" rowspan="3">
    <a href="http://www.MYSITE.com/buyers.html"
    onMouseOver = "rollover('buyers')"
    onMouseOut = "rollout('buyers')">
    <img src="images/index_22.jpg" name="buyers" width="84" height="42" border="0" alt=""></a><SCRIPT TYPE="text/javascript">
    <!--
    setrollover("images/buyersrollover.jpg");
    //-->
    </SCRIPT></td>
    <td>
    <img src="images/spacer.gif" width="1" height="1" alt=""></td>
    </tr>
    <tr>
    <td rowspan="5">
    <img src="images/index_23.jpg" width="112" height="101" alt=""></td>
    <td>
    <img src="images/spacer.gif" width="1" height="8" alt=""></td>
    </tr>
    <tr>
    <td rowspan="4">
    <img src="images/index_24.png" width="1" height="93" alt=""></td>
    <td colspan="4" rowspan="3">
    <img src="images/index_25.jpg" width="135" height="92" alt=""></td>
    <td colspan="2" rowspan="6">
    <img src="images/index_26.jpg" width="12" height="113" alt=""></td>
    <td>
    <img src="images/spacer.gif" width="1" height="33" alt=""></td>
    </tr>
    <tr>
    <td colspan="4">
    <a href="http://www.MYSITE.com/sellers.html"
    onMouseOver = "rollover('sellers')"
    onMouseOut = "rollout('sellers')">
    <img src="images/sellers.jpg" name="sellers" width="84" height="40" border="0" alt=""></a><SCRIPT TYPE="text/javascript">
    <!--
    setrollover("images/sellersrollover.jpg");
    //-->
    </SCRIPT></td>
    <td>
    <img src="images/spacer.gif" width="1" height="40" alt=""></td>
    </tr>
    <tr>
    <td rowspan="22">
    <img src="images/index_28.png" width="222" height="392" alt=""></td>
    <td rowspan="3">
    <img src="images/index_29.png" width="18" height="26" alt=""></td>
    <td colspan="10" rowspan="3">

    <script type="text/javascript">
    <!--
    function myWindow(address) {
    window.open( address, "myWindow",
    "status = 1, height = 370, width = 380, resizable = 0" )
    }
    //-->
    </script><a href="javascript:myWindow('http://www.MYSITE.com/contact.php')"
    onMouseOver = "rollover('contact')"
    onMouseOut = "rollout('contact')">
    <img src="images/contact.jpg" name="contact" width="128" height="26" border="0" alt=""></a><SCRIPT TYPE="text/javascript">
    <!--
    setrollover("images/contactmerollover.jpg");
    //-->
    </SCRIPT></td>
    <td rowspan="3">
    <img src="images/index_31.png" width="44" height="26" alt=""></td>
    <td>
    <img src="images/spacer.gif" width="1" height="19" alt=""></td>
    </tr>
    <tr>
    <td colspan="2">
    <img src="images/index_32.jpg" width="53" height="1" alt=""></td>
    <td colspan="2" rowspan="6">
    <img src="images/index_33.jpg" width="82" height="85" alt=""></td>
    <td>
    <img src="images/spacer.gif" width="1" height="1" alt=""></td>
    </tr>
    <tr>
    <td colspan="3" rowspan="5">
    <img src="images/index_34.jpg" width="80" height="84" alt=""></td>
    <td colspan="6" rowspan="5">
    <img src="images/index_35.jpg" width="226" height="84" alt=""></td>
    <td>
    <img src="images/spacer.gif" width="1" height="6" alt=""></td>
    </tr>
    <tr>
    <td colspan="12" rowspan="3">
    <img src="images/index_36.jpg" width="190" height="34" alt=""></td>
    <td>
    <img src="images/spacer.gif" width="1" height="14" alt=""></td>
    </tr>
    <tr>
    <td rowspan="4">
    <img src="images/index_37.jpg" width="11" height="107" alt=""></td>
    <td colspan="3" rowspan="17">
    <img src="images/index_38.png" width="105" height="349" alt=""></td>
    <td>
    <img src="images/index_39.png" width="107" height="1" alt=""></td>
    <td>
    <img src="images/spacer.gif" width="1" height="1" alt=""></td>
    </tr>
    <tr>
    <td colspan="2" rowspan="15">
    <img src="images/index_40.png" width="108" height="347" alt=""></td>
    <td>
    <img src="images/spacer.gif" width="1" height="19" alt=""></td>
    </tr>
    <tr>
    <td colspan="2" rowspan="12">
    <img src="images/index_41.jpg" width="23" height="269" alt=""></td>
    <td colspan="10" rowspan="9">
    <img src="images/index_42.jpg" width="167" height="234" alt=""></td>
    <td>
    <img src="images/spacer.gif" width="1" height="44" alt=""></td>
    </tr>
    <tr>
    <td rowspan="10">
    <img src="images/index_43.png" width="1" height="224" alt=""></td>
    <td colspan="9" rowspan="3">
    <img src="images/index_44.jpg" width="353" height="140" alt=""></td>
    <td rowspan="2">
    <img src="images/index_45.jpg" width="34" height="108" alt=""></td>
    <td>
    <img src="images/spacer.gif" width="1" height="43" alt=""></td>
    </tr>
    <tr>
    <td rowspan="14">
    <img src="images/index_46.png" width="11" height="245" alt=""></td>
    <td>
    <img src="images/spacer.gif" width="1" height="65" alt=""></td>
    </tr>
    <tr>
    <td rowspan="10">
    <img src="images/index_47.jpg" width="34" height="136" alt=""></td>
    <td>
    <img src="images/spacer.gif" width="1" height="32" alt=""></td>
    </tr>
    <tr>
    <td colspan="8">
    <img src="images/index_48.jpg" width="305" height="1" alt=""></td>
    <td rowspan="4">
    <img src="images/index_49.jpg" width="48" height="45" alt=""></td>
    <td>
    <img src="images/spacer.gif" width="1" height="1" alt=""></td>
    </tr>
    <tr>
    <td rowspan="6">
    <img src="images/index_50.jpg" width="66" height="83" alt=""></td>
    <td colspan="7">
    <img src="images/index_51.jpg" width="239" height="24" alt=""></td>
    <td>
    <img src="images/spacer.gif" width="1" height="24" alt=""></td>
    </tr>
    <tr>
    <td colspan="6">
    <img src="images/index_52.jpg" width="192" height="8" alt=""></td>
    <td rowspan="5">
    <img src="images/index_53.jpg" width="47" height="59" alt=""></td>
    <td>
    <img src="images/spacer.gif" width="1" height="8" alt=""></td>
    </tr>
    <tr>
    <td colspan="2" rowspan="5">
    <img src="images/index_54.jpg" width="57" height="52" alt=""></td>
    <td colspan="4" rowspan="4">
    <img src="images/index_55.jpg" width="135" height="51" alt=""></td>
    <td>
    <img src="images/spacer.gif" width="1" height="12" alt=""></td>
    </tr>
    <tr>
    <td rowspan="3">
    <img src="images/index_56.jpg" width="48" height="39" alt=""></td>
    <td>
    <img src="images/spacer.gif" width="1" height="5" alt=""></td>
    </tr>
    <tr>
    <td colspan="6" rowspan="3">
    <img src="images/index_57.jpg" width="40" height="35" alt=""></td>
    <td>
    <a href="javascript:myWindow('http://www.MYSITES.com/contact.php')"><img src="images/index_58.png" border=0 width="70" height="25" alt=""></a></td>
    <td colspan="3" rowspan="2">
    <img src="images/index_59.jpg" width="57" height="34" alt=""></td>
    <td>
    <img src="images/spacer.gif" width="1" height="25" alt=""></td>
    </tr>
    <tr>
    <td rowspan="6">
    <img src="images/index_60.png" width="70" height="73" alt=""></td>
    <td>
    <img src="images/spacer.gif" width="1" height="9" alt=""></td>
    </tr>
    <tr>
    <td colspan="3" rowspan="5">
    <img src="images/index_61.png" width="57" height="64" alt=""></td>
    <td colspan="2" rowspan="5">
    <img src="images/index_62.png" width="67" height="64" alt=""></td>
    <td colspan="6" rowspan="5">
    <img src="images/index_63.png" width="230" height="64" alt=""></td>
    <td>
    <img src="images/spacer.gif" width="1" height="1" alt=""></td>
    </tr>
    <tr>
    <td colspan="7" rowspan="4">
    <img src="images/index_64.png" width="62" height="63" alt=""></td>
    <td rowspan="4">
    <img src="images/index_65.png" width="1" height="63" alt=""></td>
    <td colspan="2" rowspan="4">
    <img src="images/index_66.png" width="57" height="63" alt=""></td>
    <td>
    <img src="images/spacer.gif" width="1" height="19" alt=""></td>
    </tr>
    <tr>
    <td rowspan="3">
    <img src="images/index_67.png" width="34" height="44" alt=""></td>
    <td>
    <img src="images/spacer.gif" width="1" height="40" alt=""></td>
    </tr>
    <tr>
    <td colspan="2" rowspan="2">
    <img src="images/index_68.png" width="108" height="4" alt=""></td>
    <td>
    <img src="images/spacer.gif" width="1" height="1" alt=""></td>
    </tr>
    <tr>
    <td>
    <img src="images/index_69.png" width="1" height="3" alt=""></td>
    <td colspan="2">
    <img src="images/index_70.png" width="104" height="3" alt=""></td>
    <td>
    <img src="images/spacer.gif" width="1" height="3" alt=""></td>
    </tr>
    <tr>
    <td>
    <img src="images/spacer.gif" width="222" height="1" alt=""></td>
    <td>
    <img src="images/spacer.gif" width="18" height="1" alt=""></td>
    <td>
    <img src="images/spacer.gif" width="5" height="1" alt=""></td>
    <td>
    <img src="images/spacer.gif" width="6" height="1" alt=""></td>
    <td>
    <img src="images/spacer.gif" width="10" height="1" alt=""></td>
    <td>
    <img src="images/spacer.gif" width="1" height="1" alt=""></td>
    <td>
    <img src="images/spacer.gif" width="11" height="1" alt=""></td>
    <td>
    <img src="images/spacer.gif" width="11" height="1" alt=""></td>
    <td>
    <img src="images/spacer.gif" width="1" height="1" alt=""></td>
    <td>
    <img src="images/spacer.gif" width="70" height="1" alt=""></td>
    <td>
    <img src="images/spacer.gif" width="2" height="1" alt=""></td>
    <td>
    <img src="images/spacer.gif" width="11" height="1" alt=""></td>
    <td>
    <img src="images/spacer.gif" width="44" height="1" alt=""></td>
    <td>
    <img src="images/spacer.gif" width="1" height="1" alt=""></td>
    <td>
    <img src="images/spacer.gif" width="66" height="1" alt=""></td>
    <td>
    <img src="images/spacer.gif" width="13" height="1" alt=""></td>
    <td>
    <img src="images/spacer.gif" width="44" height="1" alt=""></td>
    <td>
    <img src="images/spacer.gif" width="16" height="1" alt=""></td>
    <td>
    <img src="images/spacer.gif" width="112" height="1" alt=""></td>
    <td>
    <img src="images/spacer.gif" width="1" height="1" alt=""></td>
    <td>
    <img src="images/spacer.gif" width="6" height="1" alt=""></td>
    <td>
    <img src="images/spacer.gif" width="47" height="1" alt=""></td>
    <td>
    <img src="images/spacer.gif" width="48" height="1" alt=""></td>
    <td>
    <img src="images/spacer.gif" width="34" height="1" alt=""></td>
    <td>
    <img src="images/spacer.gif" width="11" height="1" alt=""></td>
    <td>
    <img src="images/spacer.gif" width="1" height="1" alt=""></td>
    <td>
    <img src="images/spacer.gif" width="42" height="1" alt=""></td>
    <td>
    <img src="images/spacer.gif" width="62" height="1" alt=""></td>
    <td>
    <img src="images/spacer.gif" width="107" height="1" alt=""></td>
    <td>
    <img src="images/spacer.gif" width="1" height="1" alt=""></td>
    <td></td>
    </tr>
    </table>
    </body>
    </html>


    HELP ME!!

  • #2
    Regular Coder
    Join Date
    Dec 2009
    Posts
    115
    Thanks
    2
    Thanked 10 Times in 10 Posts
    That's really a mess and a nightmare to manage. Not to mention all the inconsistencies that could exist from browser to browser. If you stuck with this, you would have serious problems. Plus, the use of tables and spacer.gif's is frowned upon.

    You really should consider just scrapping this layout and going for something different. To be honest, this is NOT a good idea.

  • #3
    New to the CF scene
    Join Date
    Dec 2009
    Posts
    8
    Thanks
    1
    Thanked 0 Times in 0 Posts
    oh my... can you put the code tags on that please.


    i would suggest migrating to divs.. or starting fresh.

  • #4
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,863
    Thanks
    160
    Thanked 2,224 Times in 2,211 Posts
    Well I thought I was going to re-do the site and messed it up.. there is some alignment issues on every page in ie but here is the worst of them all
    Yes, that's why people say, using tables for making layout is very bad!
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #5
    New Coder
    Join Date
    Dec 2009
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts
    works PERFECTLY in firefox though
    Last edited by trashcan; 12-16-2009 at 06:36 AM. Reason: emphasis

  • #6
    New Coder
    Join Date
    Dec 2009
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I should clarify, this website works perfectly in firefox. It has spacing issues in ie, almost like padding.

  • #7
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,863
    Thanks
    160
    Thanked 2,224 Times in 2,211 Posts
    Quote Originally Posted by trashcan View Post
    I should clarify, this website works perfectly in firefox. It has spacing issues in ie, almost like padding.
    The issue is pretty clear from the title of your thread itself! IE is a big crap, and it may exhibit weird issues even we supply a valid and semantic markup. So, nothing to wonder, when you supply an invalid/bad markup to it.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #8
    New Coder
    Join Date
    Dec 2009
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by abduraooft View Post
    The issue is pretty clear from the title of your thread itself! IE is a big crap, and it may exhibit weird issues even we supply a valid and semantic markup. So, nothing to wonder, when you supply an invalid/bad markup to it.

    so can you guide me in the right direction?

  • #9
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,863
    Thanks
    160
    Thanked 2,224 Times in 2,211 Posts
    Quote Originally Posted by trashcan View Post
    so can you guide me in the right direction?
    I've already given some hints via the links embedded in my previous posts
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #10
    Regular Coder
    Join Date
    Dec 2009
    Posts
    115
    Thanks
    2
    Thanked 10 Times in 10 Posts
    Quote Originally Posted by trashcan View Post
    works PERFECTLY in firefox though
    Still a horrible idea. Just because someone took the time to make the spacers lay out perfectly in Firefox doesn't mean this is a salvageable layout. What about the over 50% of other users who are using IE, Opera, Chrome, and other browsers?

    Plus to ever try to create consistency among different pages on the site, you would have to copy all of that. And on older computers, you can probably do your taxes in the time it would take to load all of those tables and spacers.

    Read the link that adburaooft posted.

  • #11
    New Coder
    Join Date
    Dec 2009
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Dean440 View Post
    Still a horrible idea. Just because someone took the time to make the spacers lay out perfectly in Firefox doesn't mean this is a salvageable layout. What about the over 50% of other users who are using IE, Opera, Chrome, and other browsers?

    Plus to ever try to create consistency among different pages on the site, you would have to copy all of that. And on older computers, you can probably do your taxes in the time it would take to load all of those tables and spacers.

    Read the link that adburaooft posted.

    I think it is the js. 1 page works on both ie and firefox. It loads just fine and everyone that I send to the site loves it. It loads fast enough for anyone that isnt on dial up. i guess 1/3 aint bad


    BTW It works in chrome, safari, firefox... so 2 pages total on ie are the only ones, seems like a bad reason to start from scratch it seems like it is 99% there.
    Last edited by trashcan; 12-16-2009 at 07:33 AM.

  • #12
    New Coder
    Join Date
    Dec 2009
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Well everyone the fix is this..

    </SCRIPT></td>
    not
    </SCRIPT>
    </td>

    for eveyone that uses tables and has weird spacing in internet explorer look through and find spaces they add the extra gap


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •