PDA

View Full Version : Tables/images shifting between browsers & platforms


Microracer
12-13-2006, 03:00 PM
Please have a look at www.mdbmotorsports.com in mutiple browsers. The image in question is a thin graphic under the driver's photo. It seems to drop down and get out of alignment depending on the browser and platform. I'm using a MAC to develop and it looks good in Safari but starts to get weird in IE and Firefox. Not every page just some of the pages. Over on the PC IE every page has the same issue. I cannot find anything in the code that is causing this, but I don't know coding very well, born & raised a WYSIWYG designer. Any help would be greatly appriciated!

domedia
12-13-2006, 03:12 PM
You're using html transitional so white space in your code can be tricky. You have some white space in your code before the image in question. Remove it (the spaces) and you should be fine.

Microracer
12-13-2006, 05:33 PM
tried deleting the spaces and that didn't work either. I even tried converting to strict from transitional. No dice. Now I have even more spacing issues showing up. Other ideas? Thanks for the help!

davidj
12-13-2006, 05:51 PM
try this

had to kill your template and changed the paths to the images to absolute

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>

<title>Official site of Matt Barndt</title>

<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<style type="text/css">
<!--
body {
background-color: #000000;
}
-->
</style>
<link href="CSS/style.css" rel="stylesheet" type="text/css">
<style type="text/css">
<!--
.regcopy {
font-size: 12px;
font-family: Arial;
font-weight: normal;
color: #FFFFFF;
}
.titles {
font-size: 14px;
font-weight: bold;
color: #FEFF04;
font-family: Arial;
}
.text_bold {
font-size: 12px;
font-weight: bold;
font-family: Arial;
color: #FFFFFF;
}
a:link {
color: #0066FF;
text-decoration: none;
}
a:visited {
text-decoration: none;
}
a:hover {
text-decoration: none;
color: #FFCC00;
}
a:active {
text-decoration: none;
}
-->
</style>
</head>
<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<!-- ImageReady Slices (base art.psd) -->
<table width="801" height="600" border="0" align="center" cellpadding="0" cellspacing="0" id="Table_01">
<!--DWLayoutTable-->
<tr>
<td rowspan="6" bgcolor="#000000">&nbsp;</td>
<td colspan="2">
<img src="http://www.mdbmotorsports.com/support/common/base_art_02.jpg" width="445" height="164" alt=""></td>
<td width="332">
<img src="http://www.mdbmotorsports.com/support/common/base_art_03.jpg" width="332" height="164" alt=""></td>
<td width="17" rowspan="4">
<img src="http://www.mdbmotorsports.com/support/common/base_art_04.jpg" width="17" height="215" alt=""></td>
<td rowspan="6" bgcolor="#000000">&nbsp;</td>
<td>
<img src="http://www.mdbmotorsports.com/support/common/spacer.gif" width="1" height="164" alt=""></td>
</tr>
<tr>
<td>
<img src="http://www.mdbmotorsports.com/support/common/base_art_06.jpg" width="215" height="14" alt=""></td>
<td width="230" rowspan="2"><img src="http://www.mdbmotorsports.com/support/home/welcome.jpg" width="230" height="35" alt=""></td>
<td rowspan="2">
<img src="http://www.mdbmotorsports.com/support/common/base_art_08.jpg" width="332" height="35" alt=""></td>
<td>
<img src="http://www.mdbmotorsports.com/support/common/spacer.gif" width="1" height="14" alt=""></td>
</tr>
<tr>
<td rowspan="3">
<img src="http://www.mdbmotorsports.com/support/common/base_art_09.jpg" alt="" width="214" height="243" border="0" usemap="#Map"></td>
<td>
<img src="http://www.mdbmotorsports.com/support/common/spacer.gif" width="1" height="21" alt=""></td>
</tr>
<tr>
<td colspan="2" valign="top">
<img src="http://www.mdbmotorsports.com/support/common/base_art_10.jpg" alt="" width="562" height="16" align="top"></td>
<td>
<img src="http://www.mdbmotorsports.com/support/common/spacer.gif" width="1" height="16" alt=""></td>
</tr>
<tr>
<td colspan="2" rowspan="2" valign="top"> <table width="100%" border="0" cellpadding="0" cellspacing="0">
<!--DWLayoutTable-->
<tr>
<td width="563" height="14"></td>
</tr>
<tr>
<td height="279" valign="top" class="titles"><p>LATEST NEWS FROM THE SHOP </p>
<p class="regcopy">Matt and the team are looking forward to taking delivery of their new Howe Chassis race car . Keep checking back for pictures of the new car! </p>
<p class="regcopy"><span class="titles">MATT BARNDT JOINS TEAM FULL THROTTLE <br>
DRIVER DEVELOPMENT PROGRAM</span><br>
<br>
Bethlehem, PA (September 27, 2006) &ndash; Team Full Throttle Motorsports Driver Development Services announces the addition of 15-year old Matt Barndt of Bethlehem, PA to their racing lineup for the 2007 racing season. He will be competing with the Northeast Late Model Assocation (NELMA). He will also be racing against stiff competition in the Mid Atlantic Asphalt Racing Alliance (MAARA). Matt will also attempt to run a few select races with the American Speed Association (ASA). </p>
<p class="regcopy">Team Full Throttle founder Tom Baker says Barndt is a welcomed addition to the ground-breaking program. &ldquo;We&rsquo;re proud to have Matt with us. He&rsquo;s shown tremendous talent both in Quarter-Midgets and in Mini-Cups, and this year was actually being asked by some of his older competitors to set up their cars for them. He&rsquo;s very articulate, and displays the type of professionalism and leadership qualities that we look for in a racer. We&rsquo;ll move him into the Late Models next year and take our time getting him the experience he needs to eventually be prepared for a NASCAR Busch East opportunity. He comes from a strong family background, and will be an excellent role model for some of our younger team members to follow.&rdquo;</p>
<p class="regcopy">&ldquo;I&rsquo;m proud to have been chosen to be in the Team Full Throttle program,&rdquo; Matt said. &ldquo;I&rsquo;ve always dreamed of racing in NASCAR, and I&rsquo;ve worked very hard to make that happen. Now Mike (Calinoff) and Tom have given me my chance. I&rsquo;m definitely excited about next year, and looking forward to doing whatever it takes to be successful.&rdquo;</p>
<p class="regcopy">Barndt is a member of the Team Full Throttle Motorsports Driver Development Program, and is represented by Driver Development Services, LLC of Charlotte, NC. For more information about Matt, go to <a href="http://www.driverdevelopmentservices.com">www.driverdevelopmentservices.com </a>or email <a href="mailto:teamfullthrottletn@yahoo.com">teamfullthrottletn@yahoo.com</a>.</p>
<p align="center" class="regcopy"><!-- Site Meter -->
<script type="text/javascript" src="http://s28.sitemeter.com/js/counter.js?site=s28barndt">
</script>
<div align="center">
<noscript>
<a href="http://s28.sitemeter.com/stats.asp?site=s28barndt" target="_top">
<img src="http://s28.sitemeter.com/meter.asp?site=s28barndt" alt="Site Meter" border="0"><span class="regcopy">visitors</span></a><br>
</noscript>
<!-- Copyright (c)2006 Site Meter -->
<span class="regcopy">Problems or questions with the website? <br>
Please <a href="mailto:davenale@hammerheadpromotions.com">contact</a> the webmaster.</span><br>
<a href="http://www.hammerheadpromotions.com" target="_blank"><img src="http://www.mdbmotorsports.com/support/home/hammerpromo.jpg" width="175" height="77" border="0"></a>
</p>
</div>
<p align="center" class="regcopy">&nbsp;</p></td>
</tr>
<tr>
<td height="92">&nbsp;</td>
</tr>
</table></td>
<td rowspan="2">&nbsp;</td>
<td height="174">
<img src="http://www.mdbmotorsports.comhttp://www.mdbmotorsports.com/support/common/spacer.gif" width="1" height="174" alt=""></td>
</tr>
<tr>
<td>
<img src="http://www.mdbmotorsports.com/support/common/base_art_12.jpg" width="214" height="179" alt=""></td>
<td>
<img src="http://www.mdbmotorsports.com/support/common/spacer.gif" width="1" height="211" alt=""></td>
</tr>
</table>
<!-- End ImageReady Slices -->

<map name="Map">
<area shape="rect" coords="8,177,189,203" href="index.html">
<area shape="rect" coords="8,148,188,173" href="photos.html">
<area shape="rect" coords="8,120,188,143" href="sched.html">
<area shape="rect" coords="9,90,189,113" href="driver.html">
<area shape="rect" coords="8,62,189,86" href="team.html">
<area shape="rect" coords="8,34,189,57" href="pressroom.html">
<area shape="rect" coords="9,3,189,28" href="partners.html">
<area shape="rect" coords="8,209,189,229" href="contact.html">
</map>
</body>
</html>

Microracer
12-13-2006, 06:50 PM
David,
Thanks for the effort, but I still had the spaces when I dumped it into DW and deleted the extra stuff that came over from the board. Looked like I had spaces between all the images.

domedia
12-13-2006, 07:06 PM
tried deleting the spaces and that didn't work either. I even tried converting to strict from transitional. No dice. Now I have even more spacing issues showing up. Other ideas? Thanks for the help!

Space is still there

davidj
12-13-2006, 08:25 PM
there were no spaces when i tweaked it

in IE7 that is

Dom

copy that code i posted into a file and view it to see if you get a error replication

domedia
12-13-2006, 09:57 PM
Yes, dj the spaces are still there.
Honestly, it's been so long since I've done table based designs I don't know how to fix this..

davidj
12-13-2006, 10:17 PM
i found it

it was this forum!

when i added absolute paths for the images and posted the script the forum decided that every http:// .../.../image.gif needed an <A HREF before it!

i have removed the shite and reposted

it should work now

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>

<title>Official site of Matt Barndt</title>

<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<style type="text/css">
<!--
body {
background-color: #000000;
}
-->
</style>
<link href="CSS/style.css" rel="stylesheet" type="text/css">
<style type="text/css">
<!--
.regcopy {
font-size: 12px;
font-family: Arial;
font-weight: normal;
color: #FFFFFF;
}
.titles {
font-size: 14px;
font-weight: bold;
color: #FEFF04;
font-family: Arial;
}
.text_bold {
font-size: 12px;
font-weight: bold;
font-family: Arial;
color: #FFFFFF;
}
a:link {
color: #0066FF;
text-decoration: none;
}
a:visited {
text-decoration: none;
}
a:hover {
text-decoration: none;
color: #FFCC00;
}
a:active {
text-decoration: none;
}
-->
</style>
</head>
<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<!-- ImageReady Slices (base art.psd) -->
<table width="801" height="600" border="0" align="center" cellpadding="0" cellspacing="0" id="Table_01">
<!--DWLayoutTable-->
<tr>
<td rowspan="6" bgcolor="#000000">&nbsp;</td>
<td colspan="2">
<img src="http://www.mdbmotorsports.com/support/common/base_art_02.jpg" width="445" height="164" alt=""></td>
<td width="332">
<img src="http://www.mdbmotorsports.com/support/common/base_art_03.jpg" width="332" height="164" alt=""></td>
<td width="17" rowspan="4">
<img src="http://www.mdbmotorsports.com/support/common/base_art_04.jpg" width="17" height="215" alt=""></td>
<td rowspan="6" bgcolor="#000000">&nbsp;</td>
<td>
<img src="http://www.mdbmotorsports.com/support/common/spacer.gif" width="1" height="164" alt=""></td>
</tr>
<tr>
<td>
<img src="http://www.mdbmotorsports.com/support/common/base_art_06.jpg" width="215" height="14" alt=""></td>
<td width="230" rowspan="2"><img src="http://www.mdbmotorsports.com/support/home/welcome.jpg" width="230" height="35" alt=""></td>
<td rowspan="2">
<img src="http://www.mdbmotorsports.com/support/common/base_art_08.jpg" width="332" height="35" alt=""></td>
<td>
<img src="http://www.mdbmotorsports.com/support/common/spacer.gif" width="1" height="14" alt=""></td>
</tr>
<tr>
<td rowspan="3">
<img src="http://www.mdbmotorsports.com/support/common/base_art_09.jpg" alt="" width="214" height="243" border="0" usemap="#Map"></td>
<td>
<img src="http://www.mdbmotorsports.com/support/common/spacer.gif" width="1" height="21" alt=""></td>
</tr>
<tr>
<td colspan="2" valign="top">
<img src="http://www.mdbmotorsports.com/support/common/base_art_10.jpg" alt="" width="562" height="16" align="top"></td>
<td>
<img src="http://www.mdbmotorsports.com/support/common/spacer.gif" width="1" height="16" alt=""></td>
</tr>
<tr>
<td colspan="2" rowspan="2" valign="top"> <table width="100%" border="0" cellpadding="0" cellspacing="0">
<!--DWLayoutTable-->
<tr>
<td width="563" height="14"></td>
</tr>
<tr>
<td height="279" valign="top" class="titles"><p>LATEST NEWS FROM THE SHOP </p>
<p class="regcopy">Matt and the team are looking forward to taking delivery of their new Howe Chassis race car . Keep checking back for pictures of the new car! </p>
<p class="regcopy"><span class="titles">MATT BARNDT JOINS TEAM FULL THROTTLE <br>
DRIVER DEVELOPMENT PROGRAM</span><br>
<br>
Bethlehem, PA (September 27, 2006) &ndash; Team Full Throttle Motorsports Driver Development Services announces the addition of 15-year old Matt Barndt of Bethlehem, PA to their racing lineup for the 2007 racing season. He will be competing with the Northeast Late Model Assocation (NELMA). He will also be racing against stiff competition in the Mid Atlantic Asphalt Racing Alliance (MAARA). Matt will also attempt to run a few select races with the American Speed Association (ASA). </p>
<p class="regcopy">Team Full Throttle founder Tom Baker says Barndt is a welcomed addition to the ground-breaking program. &ldquo;We&rsquo;re proud to have Matt with us. He&rsquo;s shown tremendous talent both in Quarter-Midgets and in Mini-Cups, and this year was actually being asked by some of his older competitors to set up their cars for them. He&rsquo;s very articulate, and displays the type of professionalism and leadership qualities that we look for in a racer. We&rsquo;ll move him into the Late Models next year and take our time getting him the experience he needs to eventually be prepared for a NASCAR Busch East opportunity. He comes from a strong family background, and will be an excellent role model for some of our younger team members to follow.&rdquo;</p>
<p class="regcopy">&ldquo;I&rsquo;m proud to have been chosen to be in the Team Full Throttle program,&rdquo; Matt said. &ldquo;I&rsquo;ve always dreamed of racing in NASCAR, and I&rsquo;ve worked very hard to make that happen. Now Mike (Calinoff) and Tom have given me my chance. I&rsquo;m definitely excited about next year, and looking forward to doing whatever it takes to be successful.&rdquo;</p>
<p class="regcopy">Barndt is a member of the Team Full Throttle Motorsports Driver Development Program, and is represented by Driver Development Services, LLC of Charlotte, NC. For more information about Matt, go to <a href="http://www.driverdevelopmentservices.com">www.driverdevelopmentservices.com </a>or email <a href="mailto:teamfullthrottletn@yahoo.com">teamfullthrottletn@yahoo.com</a>.</p>
<p align="center" class="regcopy"><!-- Site Meter -->
<script type="text/javascript" src="http://s28.sitemeter.com/js/counter.js?site=s28barndt">
</script>
<div align="center">
<noscript>
<a href="http://s28.sitemeter.com/stats.asp?site=s28barndt" target="_top">
<img src="http://s28.sitemeter.com/meter.asp?site=s28barndt" alt="Site Meter" border="0"><span class="regcopy">visitors</span></a><br>
</noscript>
<!-- Copyright (c)2006 Site Meter -->
<span class="regcopy">Problems or questions with the website? <br>
Please <a href="mailto:davenale@hammerheadpromotions.com">contact</a> the webmaster.</span><br>
<a href="http://www.hammerheadpromotions.com" target="_blank"><img src="http://www.mdbmotorsports.com/support/home/hammerpromo.jpg" width="175" height="77" border="0"></a>
</p>
</div>
<p align="center" class="regcopy">&nbsp;</p></td>
</tr>
<tr>
<td height="92">&nbsp;</td>
</tr>
</table></td>
<td rowspan="2">&nbsp;</td>
<td height="174">
<img src="http://www.mdbmotorsports.comhttp://www.mdbmotorsports.com/support/common/spacer.gif" width="1" height="174" alt=""></td>
</tr>
<tr>
<td>
<img src="http://www.mdbmotorsports.com/support/common/base_art_12.jpg" width="214" height="179" alt=""></td>
<td>
<img src="http://www.mdbmotorsports.com/support/common/spacer.gif" width="1" height="211" alt=""></td>
</tr>
</table>
<!-- End ImageReady Slices -->

<map name="Map">
<area shape="rect" coords="8,177,189,203" href="index.html">
<area shape="rect" coords="8,148,188,173" href="photos.html">
<area shape="rect" coords="8,120,188,143" href="sched.html">
<area shape="rect" coords="9,90,189,113" href="driver.html">
<area shape="rect" coords="8,62,189,86" href="team.html">
<area shape="rect" coords="8,34,189,57" href="pressroom.html">
<area shape="rect" coords="9,3,189,28" href="partners.html">
<area shape="rect" coords="8,209,189,229" href="contact.html">
</map>
</body>
</html>

Microracer
12-13-2006, 10:45 PM
David,
I tried changing them to absloute in my template and no change. Will I have to break my template on each page and make the links absloute to fix? Thanks!

Microracer
12-14-2006, 06:58 AM
Thanks for the help guys. I decided to try re-exporting the slices out of ImageReady instead of PhotoShop. Voila! Working now...If you don't mind, may I ask you to look at the code now and see if you can discover the difference? I would like to learn what went wrong rather than just finding a work around. Thanks again for you help on this one!