Table Alignment

[trashcan]

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!!

[Dean440]

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.

[edub629]

oh my... can you put the code tags on that please.


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

[abduraooft]

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 (http://www.hotdesign.com/seybold/)!

[trashcan]

works PERFECTLY in firefox though

[trashcan]

I should clarify, this website works perfectly in firefox. It has spacing issues in ie, almost like padding.

[abduraooft]

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 (http://validator.w3.org/docs/why.html) and semantic markup (http://boagworld.com/technology/semantic-code-what-why-how). So, nothing to wonder, when you supply an invalid/bad markup to it.

[trashcan]

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 (http://validator.w3.org/docs/why.html) and semantic markup (http://boagworld.com/technology/semantic-code-what-why-how). So, nothing to wonder, when you supply an invalid/bad markup to it.


so can you guide me in the right direction?

[abduraooft]

so can you guide me in the right direction?I've already given some hints via the links embedded in my previous posts:thumbsup:

[Dean440]

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.

[trashcan]

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.

[trashcan]

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