PDA

View Full Version : Whole template moves to left weird



chen
Dec 13th, 2008, 08:25 AM
Hi guys,

i have a template tt looks perfect n IE. But upon opening it in a wysiwyg editor and doing minor text changes, the whole template shifts to the left, with the body missing in IE. dont know why.

Heres the coding:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled Document</title>
<link type="text/css" rel="stylesheet" href="style.css">
<meta http-equiv="Content-Type" content="text/html; charset=us-ascii" />
</head>
<body><table style="height: 100%" cellspacing="0" cellpadding="0" width="100%" border="0">
<tbody>
<tr>
<td>&nbsp;</td>
<td valign="top" height="370"><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0" width="766" height="370">
<param name="movie" value="flash/header.swf?button=1">
<param name="quality" value="high">
<param name="menu" value="false">
<param name="pluginurl" value="http://www.macromedia.com/go/getflashplayer"><!--[if !IE]> <-->FAIL (the browser should render some flash content, not this).</object> <!-->&lt;![endif]--&gt; </object></td>
<td>&nbsp;</td></tr>
<tr>
<td>&nbsp;</td>
<td style="padding-bottom: 11px" valign="top" width="766">
<table style="margin: 1px 0px 0px 24px" cellspacing="0" cellpadding="0" width="718" border="0">
<tbody>
<tr>
<td style="padding-bottom: 16px" valign="top" width="239"><img style="margin: 18px 0px 0px" height="22" alt="" width="234" src="images/1_text1.gif"><br>
<div style="margin: 11px 0px 0px 9px; width: 218px">Lorem ipsum dolor sit amet, consec tetuer adipi scing elit. Praesent vestibulum molestie lacus. Aenean nonummy hendrerit mauris. Phasellus porta. Fusce suscipit varius mi. <br>
<br>Nulla dui. Fusce feugiat malesuada odio. Morbi nunc odio, gravida at, cursus nec, luctus a, lorem. Maecenas tristique orci ac<br>
<br style="line-height: 5px"><img style="margin-right: 4px" height="6" alt="" width="5" align="bottom" src="images/arrow1.gif"><a href="#">click here to lear more</a></div></td>
<td style="background: #f1f1f1" valign="top"><img style="margin: 18px 0px 0px 23px" height="13" alt="" width="181" src="images/1_text3.gif"><br>
<table style="margin: 16px 0px 0px 19px" cellspacing="0" cellpadding="0" width="450" border="0">
<tbody>
<tr>
<td valign="top" width="231"><img style="margin: 0px 7px 0px 0px" height="53" alt="" width="107" align="left" src="images/1_pic1.jpg"><br style="line-height: 9px">
<a style="color: #0b2834" href="#">Youth Social <br>
Program</a><br>
<br style="line-height: 15px"><br style="line-height: 15px">
<img style="margin: 0px 6px 0px 0px" height="53" alt="" width="107" align="left" src="images/1_pic2.jpg"><br style="line-height: 10px">
<a style="color: #0b2834" href="#">Anti Drug Addiction Program</a></td>
<td valign="top"><img style="margin: 0px 6px 0px 0px" height="53" alt="" width="107" align="left" src="images/1_pic3.jpg"><br style="line-height: 9px">
<a style="color: #0b2834" href="#">Psychology Help<br>
Program</a><br>
<br style="line-height: 15px"><br style="line-height: 15px">
<img style="margin: 0px 6px 0px 0px" height="53" alt="" width="107" align="left" src="images/1_pic4.jpg"><br style="line-height: 10px">
<a style="color: #0b2834" href="#">Middle age helper Program</a></td></tr></tbody></table></td></tr>
<tr>
<td valign="top" height="115">
<table style="height: 100%" cellspacing="0" cellpadding="0" width="100%" border="0">
<tbody>
<tr>
<td style="background: #295765" valign="top" height="41"><img style="margin: 15px 0px 0px 20px" height="13" alt="" width="116" src="images/1_text2.gif"></td></tr>
<tr>
<td style="background: #1d4d5b" valign="top">
<div style="margin: 8px 0px 0px 20px; color: #ffffff">Join our foundation mailing list</div>
<form id="f1" style="margin: 11px 0px 0px 18px; size: auto; padding: 0px" method="get" action="">
<table cellspacing="0" cellpadding="0" width="210" border="0">
<tbody>
<tr>
<td valign="top" width="154"><input value="Enter Your Email"></td>
<td valign="top"><a href="#" onclick="document.getElementById('f1').submit()"><img style="margin: 1px 0px 0px" height="21" alt="" width="55" border="0" src="images/1_b1.jpg"></a></td></tr></tbody></table></form></td></tr></tbody></table></td>
<td valign="top"><img style="margin: 14px 0px 0px 23px" height="13" alt="" width="102" src="images/1_text4.gif"><br>
<ul style="margin: 11px 0px 0px 24px">
<li><a href="#">Lorem ipsum dolor sit amet, consec tetuer adipiscing elit. </a></li>
<li><a href="#">Praesent vestibulum molestie lacus. Aenean nonummy hendrerit mauris.</a> </li>
<li><a href="#">Phasellus porta. Fusce suscipit varius mi. Cum sociis natoque</a> </li></ul></td></tr></tbody></table></td>
<td>&nbsp;</td></tr>
<tr>
<td style="background: #ebebeb">&nbsp;</td>
<td style="background: #ebebeb" valign="top" height="55">
<div class="priv"><a href="#">YourCompany.Com</a> 2006 | <a href="index-6.html">Privacy Policy</a> | <a href="#">Terms Of Use</a> | <a href="#">User Login</a></div></td>
<td style="background: #ebebeb">&nbsp;</td></tr></tbody></table>
</body>
</html>

any help appreciated

abduraooft
Dec 13th, 2008, 08:37 AM
(the browser should render some flash content, not this).</object> <!-->&lt;![endif] Your conditional comment is not closed well.

I'd recommend you to get Notepad++ (http://notepad-plus.sourceforge.net), which will highlight the issues in your markup.

btw,
tables for layout is stupid. (http://www.hotdesign.com/seybold/)
use SWFObject (http://code.google.com/p/swfobject/) to embed your flash movies
Validate your code (http://validator.w3.org/#validate_by_input), while development.


PS: welcome to CF!

chen
Dec 13th, 2008, 09:27 AM
Thanks Abdu! couldnt spot it!