PDA

View Full Version : Table column alignment is jumping a few pixes


stickitup
01-19-2009, 03:13 PM
Sorry there is probably a very simple reason why this is happening, but I have spent hours and hours trying to sort this and cannot, please help!
My index page's allignment is fine, but when I jump to the first page (History) the column seems to align several pixels to the right. The 2nd page (Terms) is fine, the 3rd page (About) is fine, the forth page (Contact) jumps about 2 pixels to the left, and the 5th page (Links) is also fine. URL is www.trogers.co.uk (http://www.trogers.co.uk)
Heres the code for the Index page:

<style type="text/css">
<!--
.style2 {
color: #FFFFFF;
font-family: Arial, Helvetica, sans-serif;
font-size: small;
font-weight: bold;
}
a:link {
color: #666666;
text-decoration: none;
}
a:visited {
color: #999999;
text-decoration: none;
}
body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
background-image: url(Graphics/GRADIENT.gif);
background-repeat: no-repeat;
}
a:hover {
color: #CCCCCC;
text-decoration: none;
}
a:active {
text-decoration: none;
}
.style60 {font-family: Arial, Helvetica, sans-serif; font-weight: bold; color: #666666; font-size: 24px; }
body,td,th {
font-family: Arial, Helvetica, sans-serif;
}
.style61 {
font-size: 24px;
font-weight: bold;
color: #660000;
}
-->
</style>
</head>
<body>
<table width="808" height="574" border="0" align="center" cellpadding="2" cellspacing="2" background="Graphics/GRADIENT.gif"><!--DWLayoutTable-->
<tr>
<td height="150" colspan="5" align="center" valign="middle" nowrap="nowrap"><div align="center"><img src="Graphics/BORDER-DESIGN-left.gif" alt="borderl" width="136" height="115" /><img src="Graphics/T.-Rogers-&amp;-Co-Logowithoutg.gif" alt="T.Rogers shipping &amp; forwarding" name="T" width="525" height="115" id="T" /><img src="Graphics/BORDER-DESIGN.gif" alt="" name="BORDER" width="136" height="115" id="BORDER" /></div></td>
</tr>
<tr bgcolor="#660000">
<td height="24" colspan="5" align="left" valign="top" bgcolor="#FFFFFF"><div align="center"><img src="Graphics/Address-Bar-LC.gif" alt="" width="800" height="24" border="0" align="middle" /></div></td>
</tr>
<tr>
<td width="3" height="50" align="left" valign="top">&nbsp;</td>
<td width="124" height="50" align="left" valign="top" bordercolor="#660000">&nbsp;</td>
<td width="74" height="400" rowspan="8" align="left" valign="top">&nbsp;</td>
<td width="525" height="400" rowspan="8" align="left" valign="top">&nbsp;</td>
<td width="50" height="400" rowspan="8" align="left" valign="top">&nbsp;</td>
</tr>
<tr>
<td width="3" height="50" align="left" valign="top">&nbsp;</td>
<td width="124" height="50" align="left" valign="middle" bordercolor="#660000"><span class="style61">|
Contents</span> </td>
</tr>
<tr align="left" bordercolor="#660000">
<td width="3" height="50" align="left" valign="top">&nbsp;</td>
<td width="124" height="50" align="left" valign="middle" bordercolor="#660000">&nbsp; </td>
</tr>
<tr align="left" bordercolor="#660000">
<td width="3" height="50" align="left" valign="top">&nbsp;</td>
<td width="124" height="50" align="left" valign="middle" bordercolor="#660000"><span class="style60"><a href="Pages being built/History.html">| History</a> </span></td>
</tr>
<tr align="left" bordercolor="#660000">
<td width="3" height="50" align="left" valign="top">&nbsp;</td>
<td width="124" height="50" align="left" valign="middle" bordercolor="#660000"><span class="style60"><a href="Pages being built/Terms1.html">| Terms</a></span></td>
</tr>
<tr align="left" bordercolor="#660000">
<td width="3" height="50" align="left" valign="top">&nbsp;</td>
<td width="124" height="50" align="left" valign="middle" bordercolor="#660000"><span class="style60"><a href="Pages being built/About.html">| About</a></span></td>
</tr>
<tr bordercolor="#660000">
<td width="3" height="50" align="left" valign="top">&nbsp;</td>
<td width="124" height="50" align="left" valign="middle" bordercolor="#660000"><span class="style60"><a href="Pages being built/Contact.html">| Contact</a> </span></td>
</tr>
<tr bordercolor="#660000">
<td width="3" height="50" align="left" valign="top">&nbsp;</td>
<td width="124" height="50" align="left" valign="middle" bordercolor="#660000"><span class="style60"><a href="Pages being built/Links.html">| Links </a></span></td>
</tr>
</table>


and heres the code for the History problem page:


<title>History of T. Rogers &amp; Co</title>
<style type="text/css">
<!--
.style2 {
color: #FFFFFF;
font-family: Arial, Helvetica, sans-serif;
font-size: small;
font-weight: bold;
}
.style36 {font-family: Arial, Helvetica, sans-serif; font-weight: bold; color: #CCCCCC; font-size: 24px; }
a:link {
color: #666666;
text-decoration: none;
}
a:visited {
color: #999999;
text-decoration: none;
}
body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
background-image: url(../Graphics/GRADIENT.gif);
background-repeat: no-repeat;
}
a:hover {
color: #CCCCCC;
text-decoration: none;
}
a:active {
text-decoration: none;
}
.style39 {font-family: Arial, Helvetica, sans-serif; font-weight: bold; color: #666666; font-size: 24px; }
.style41 {
font-family: Arial, Helvetica, sans-serif;
font-size: small;
color: #666666;
}
body,td,th {
font-family: Arial, Helvetica, sans-serif;
}
.style45 {font-size: 12px}
.style46 {font-family: Arial, Helvetica, sans-serif; font-weight: bold; color: #660000; font-size: 24px; }
-->
</style>
</head>
<body>
<table width="808" height="574" border="0" align="center" cellpadding="2" cellspacing="2" background="../Graphics/GRADIENT.gif"><!--DWLayoutTable-->
<tr align="center" valign="middle">
<td height="150" colspan="5"><div align="center"><img src="../Graphics/BORDER-DESIGN-left.gif" alt="borderl" width="136" height="115" /><img src="../Graphics/T.-Rogers-&amp;-Co-Logowithoutg.gif" alt="T.Rogers shipping &amp; forwarding" name="T" width="525" height="115" id="T" /><img src="../Graphics/BORDER-DESIGN.gif" alt="" name="BORDER" width="136" height="115" id="BORDER" /></div></td>
</tr>
<tr bgcolor="#660000">
<td height="24" colspan="5" bgcolor="#FFFFFF"><div align="center" class="style2"><img src="../Graphics/Address-Bar-LC.gif" alt="" width="800" height="24" border="0" align="middle" /></div></td>
</tr>
<tr>
<td width="3" height="50" align="left" valign="top" nowrap="nowrap">&nbsp;</td>
<td width="124" height="50" align="left" valign="top" nowrap="nowrap">&nbsp;</td>
<td width="47" height="50" align="left" valign="top" nowrap="nowrap">&nbsp;</td>
<td width="541" height="50" align="left" valign="top">&nbsp;</td>
<td width="40" height="50" align="left" valign="top" nowrap="nowrap">&nbsp;</td>
</tr>
<tr>
<td width="3" height="50" align="left" valign="top" nowrap="nowrap">&nbsp;</td>
<td width="124" height="50" align="left" valign="middle" nowrap="nowrap" class="style46">|
Contents</td>
<td height="50" align="left" valign="top" nowrap="nowrap">&nbsp;</td>
<td width="541" height="350" rowspan="7" align="left" valign="top" class="style41"><p>T.
Rogers and Company Limited was incorporated in 1947, and quickly established
an international reputation for professional packing and transporting,
specialising in works of art of all descriptions. Originally based in
Saint James, the company relocated to larger premises in 1975, located
in Battersea which includes 24hr security for office space, workshops,
warehousing and a bonded storage facility. Our expertise in handling
fine art and antiques is widely acknowledged, and the personal service
offered is highly regarded with all clientel, many of whom have remained
with the company for decades.</p>
<p>The company has handled works of art from the Royal collection, art
dealers, museums, galleries and private collections.</p></td>
<td width="40" height="50" align="left" valign="top" nowrap="nowrap">&nbsp;</td>
</tr>
<tr align="left" bordercolor="#660000">
<td width="3" height="50" valign="top" nowrap="nowrap">&nbsp;</td>
<td width="124" height="50" align="left" valign="middle" nowrap="nowrap"><!--DWLayoutEmptyCell-->&nbsp;</td>
<td height="50" align="left" valign="top" nowrap="nowrap">&nbsp;</td>
<td width="40" height="50" align="left" valign="top" nowrap="nowrap" bordercolor="#660000">&nbsp;</td>
</tr>
<tr align="left" bordercolor="#660000">
<td width="3" height="50" valign="top" nowrap="nowrap">&nbsp;</td>
<td width="124" height="50" align="left" valign="middle" nowrap="nowrap" class="style36">| History </td>
<td height="50" align="left" valign="top" nowrap="nowrap">&nbsp;</td>
<td width="40" height="50" align="left" valign="top" nowrap="nowrap" bordercolor="#660000">&nbsp;</td>
</tr>
<tr align="left" bordercolor="#660000">
<td width="3" height="50" valign="top" nowrap="nowrap" bordercolor="#660000">&nbsp;</td>
<td width="124" height="50" align="left" valign="middle" nowrap="nowrap" bordercolor="#660000" class="style39"><a href="..\Pages being built\Terms1.html">| Terms</a> </td>
<td height="50" align="left" valign="top" nowrap="nowrap">&nbsp;</td>
<td width="40" height="50" align="left" valign="top" nowrap="nowrap" bordercolor="#660000">&nbsp;</td>
</tr>
<tr align="left" bordercolor="#660000">
<td width="3" height="50" valign="top" nowrap="nowrap" bordercolor="#660000">&nbsp;</td>
<td width="124" height="50" align="left" valign="middle" nowrap="nowrap" bordercolor="#660000" class="style39"><a href="..\Pages being built\About.html">| About</a></td>
<td height="50" align="left" valign="top" nowrap="nowrap">&nbsp;</td>
<td width="40" height="50" align="left" valign="top" nowrap="nowrap" bordercolor="#660000">&nbsp;</td>
</tr>
<tr bordercolor="#660000">
<td width="3" height="50" align="left" valign="top" nowrap="nowrap" bordercolor="#660000">&nbsp;</td>
<td width="124" height="50" align="left" valign="middle" nowrap="nowrap" bordercolor="#660000" background="../Pages/Contact.html" class="style39"><a href="..\Pages being built\Contact.html">|
Contact</a> </td>
<td height="50" align="left" valign="top" nowrap="nowrap">&nbsp;</td>
<td width="40" height="50" align="left" valign="top" nowrap="nowrap" bordercolor="#660000">&nbsp;</td>
</tr>
<tr bordercolor="#660000">
<td width="3" height="50" align="left" valign="top" nowrap="nowrap" bordercolor="#660000">&nbsp;</td>
<td width="124" height="50" align="left" valign="middle" nowrap="nowrap" bordercolor="#660000" class="style39"><a href="..\Pages being built\Links.html">|
Links</a> </td>
<td height="50" align="left" valign="top" nowrap="nowrap">&nbsp;</td>
<td width="40" height="50" align="left" valign="top" nowrap="nowrap" bordercolor="#660000">&nbsp;</td>
</tr>
</table>


Apologies for asking such an noob question. Please help me. Thanks

Ricky55
01-19-2009, 03:17 PM
seems fine to me what browser are you using IE?

stickitup
01-19-2009, 03:20 PM
yes IE.7 on Vista

stickitup
01-20-2009, 08:24 AM
checked on a mac last night and it all aligns correctly apart from the contact page which still jumps a couple of pixels. IE7 would seem to be the problem then?

urbanrays
01-20-2009, 09:25 AM
Hi

I dont know if this will help but have you tried put a small transparent gif's into these cells
<td width="74" height="400" rowspan="8" align="left" valign="top"></td>
<td width="3" height="50" align="left" valign="top"
bordercolor="#660000"></td>
<td width="50" height="400" rowspan="8" align="left" valign="top">&nbsp;</td>

ie make a gif 3px x 1px & 74px x 1px etc and place these in the empty cells.

Could I also say (and I am surprised no one has yet) the site would be very easy to construct using css.
I made the same mistake as you using tables and had many cross browser issues yours is just small compared.
I would recommend you have a quick look at how to create a site using css and have a bash mate.

stickitup
01-26-2009, 03:26 PM
hmm, tried inserting the giffs made no difference, what seemed to change the problem page was ticking the wrap text and unticking it....i think. Have reposted the problem code with the last problem page which I cannot get the 1 pixel alignment change. If I can't get it sorted I'll go down the CSS road. Thanks for your suggestion