all was ok but now it's gone squiffy please help...

hi guys, my site is at http://www.insideyork.co.uk

the layout loaded up fine in explorer until i tried to add a little more advertising in the sidebars, now we’ve got ads not loading on the right side and the google block jumping off the bottom for some reason.

yet all if fine in firefox.

can anyone see the cause, i’ve tried to validate etc but hard to see the specifics on this one as my template isn’t the cleanest ever! :p

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>[*pagetitle*]</title>
<link rel="shortcut icon" href="favicon.ico" />
<meta http-equiv="Content-Type" content="text/html; charset=[(modx_charset)]" />
<base href="[(site_url)]"/>
<script src="manager/media/script/mootools/mootools.js" type="text/javascript">
</script>
<script type="text/javascript">
function highlight(el,endcolor,duration) {
$(el).style.background = ’#ffd700’;
var fx = $(el).effects({duration: 1000, transition: Fx.Transitions.linear});
fx.start.delay(duration/2,fx,{
’background-color’: endcolor
});
return false;
}
</script>
<link rel="stylesheet" href="assets/templates/coneystreet/coneystreetlayout.css" type="text/css" media="screen" />
<link rel="stylesheet" href="assets/templates/coneystreet/coneystreetform.css" type="text/css" media="screen" />
<link rel="stylesheet" href="assets/templates/coneystreet/coneystreet.css" type="text/css" media="screen" />
<link rel="stylesheet" href="assets/templates/coneystreet/coneystreetprint.css" type="text/css" media="print" />
<link rel="stylesheet" href="assets/snippets/star_rating/star.css" type="text/css" media="screen" />
<link rel="alternate" type="application/rss+xml" title="RSS 2.0" href="[(site_url)][~11~]" />
</head>
<body>
<div id="wrapper">
<div id="minHeight"></div>
<div id="outer">
<div id="inner">
<div id="left">
<div id="left-inner">
<h1 style="text-indent: -5000px;padding: 0px; margin:0px; font-size: 1px;">[(site_name)]</h1>
<div id="sidebar">
<h2>Sponsored Links:</h2>

<!-- START Inside York Rotating Ads TOP LEFT -->
<p>[!RandomAdLeft? &folder=`assets/images/sponsors/topleft`!] </p>
<!-- END Inside York Rotating Ads TOP LEFT -->

<!-- START LINKSHARE KATH KIDSTON AD LEFT -->
<p><a href="http://click.linksynergy.com/fs-bin/click?id=jXup/gEgelI&offerid=122963.10000176&type=4&subid=0"><IMG alt="Cath Kidston Ltd." border="0" src="http://www.cathkidston.co.uk/Images/partner/SS09_2_Kitchen.jpg"></a><IMG border="0" width="1" height="1" src="http://ad.linksynergy.com/fs-bin/show?id=jXup/gEgelI&bids=122963.10000176&type=4&subid=0"></p>
<!-- END LINKSHARE KATH KIDSTON AD LEFT -->

<h2>Other York Links:</h2>
<p><a href="index.html" target="_self">Inside York Homepage</a></p>
<p><a href="york-hotels.html" target="_self">York Hotels</a></p>
<p><a href="guest-houses.html" target="_self">York Guest Houses</a></p>
<p><a href="self-catering.html" target="_self">York Self-Catering</a></p>
<p><a href="wheretoeat.html" target="_self">Where to Eat &amp; Drink</a></p>
<p><a href="eatdrinktopten.html" target="_self">Eating &amp; Drinking Top 10</a></p>
<p><a href="wheretoshop.html" target="_self">Where to Shop</a></p>
<p><a href="shoppingtopten.html" target="_self">Shopping Top 10</a></p>
<p><a href="attractions.html" target="_self">Attractions</a></p>
<p><a href="toptips.html" target="_self">Top Tips</a></p>
<p><a href="little-known.html" target="_self">Hidden York</a></p>
<p><a href="toursandwalks.html" target="_self">Guided Tours</a></p>
<p><a href="ghostwalks.html" target="_self">Ghost Walks</a></p>
<p><a href="discounts.html" target="_self">Discount Vouchers</a></p>
<p><a href="inside-york-map.html" target="_self">Free York Map</a>

<!-- START Inside York Rotating Ads BOTTOM LEFT -->
<p>[!RandomAdLeft? &amp;folder=`assets/images/sponsors/bottomleft`!]</p>
<!-- END Inside York Rotating Ads BOTTOM LEFT -->

<!-- START LINKSHARE GOLDSMITHS AD LEFT -->
<p><a href="http://click.linksynergy.com/fs-bin/click?id=jXup/gEgelI&offerid=133777.10000026&type=4&subid=0"><IMG alt="Goldsmiths Ltd." border="0" src="http://www.goldsmiths.co.uk/images/affiliate_banners/180x150-armani.jpg"></a><IMG border="0" width="1" height="1" src="http://ad.linksynergy.com/fs-bin/show?id=jXup/gEgelI&bids=133777.10000026&type=4&subid=0"></p>
<!-- END LINKSHARE GOLDSMITHS AD LEFT -->

<script type="text/javascript"><!--
google_ad_client = "pub-6255187897481898";
/* 160x90, created 23/10/08 */
google_ad_slot = "8510929875";
google_ad_width = 160;
google_ad_height = 90;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</p>
<p>
<script type="text/javascript">
//<![CDATA[
<!--
google_ad_client = "pub-6255187897481898";
google_ad_width = 160;
google_ad_height = 600;
google_ad_format = "160x600_as";
google_ad_type = "text_image";
google_ad_channel = "";
google_color_border = "FFFFFF";
google_color_bg = "FFFFFF";
google_color_link = "400058";
google_color_text = "000000";
google_color_url = "008000";
google_ui_features = "rc:6";
//-->
//]]>
</script> <script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script> </p>
</div>
<!-- close #sidebar -->
</div>
<!-- end left inner-->
</div>
<!-- end left -->
<div id="middle">
<div id="middle-inner">
<div id="content">
<div class="post">
<h2>[*longtitle*]</h2>
[*#content*] </div>
<!-- close .post (main column content) -->
</div>
<!-- close #content -->
</div>
<!-- end middle-inner -->
</div>
<!-- end middle -->
<div id="right">
<div id="right-inner">
<h1 style="text-indent: -5000px;padding: 0px; margin:0px; font-size: 1px;">[(site_name)]</h1>
<div id="sidebar2">
<p>&nbsp;</p>
<h2>Sponsored Links:</h2>

<!-- START Inside York Rotating Ads TOP RIGHT -->
[!RandomAdRight? &folder=`assets/images/sponsors/topright`!]
<!-- END Inside York Rotating Ads BOTTOM RIGHT -->

<h2>Latest Inside York News:</h2>
<p>[[Ditto? &startID=`2` &summarize=`6` &total=`20` &commentschunk=`Comments` &tpl=`nl_sidebar` &showarch=`0` &truncLen=`100` &truncSplit=`0`]] </p>

<!-- START Inside York Rotating Ads BOTTOM RIGHT -->
<p>[!RandomAdRight? &amp;folder=`assets/images/sponsors/bottomright`!] </p>
<!-- END Inside York Rotating Ads BOTTOM RIGHT -->

<div id="recentdocsctnr">
<h2>Most Recently Updated:</h2>
<a name="recentdocs"></a>[[listIndexer?LIn_root=0]] </div>
<p><a href="inside-york-map.html" target="_self">Get a Free Map</a></p>
<p><a href="discounts.html" target="_self">Discount Vouchers</a></p>

<!-- START TRADE DOUBLE BANNER ADS RIGHT SIDE -->
<p><script type="text/javascript">
var td_id = "1648379";
var td_format = "4,6,7";
var td_epi = "";
var td_size = "160x600";
var td_lang = "";
var td_method = "automatic";
var td_keywords = "";
var td_exclude = "";
</script>
<script type="text/javascript" id="td_ads" src="http://hst.tradedoubler.com/file/20649/contextual/cx2.js"> </script></p>
<!-- END TRADE DOUBLE BANNER ADS RIGHT SIDE -->

<!-- START GOOGLE ADS RIGHT SIDE-->
<p><script type="text/javascript"><!--
google_ad_client = "pub-6255187897481898";
/* 160x600, created 23/10/08 */
google_ad_slot = "7987198957";
google_ad_width = 160;
google_ad_height = 600;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script></p>
<!-- END GOOGLE ADS RIGHT SIDE -->

<!-- USE FIREFOX BANNER AD -->
<p><a target="_blank" href="http://www.mozilla.com/en-US/firefox/"><img border="0" src="assets/images/firefoxbest.jpg" width="180" height="87" alt="Use Firefox for safer and better internet browsing!" /></a></p>
<!-- END OF FIREFOX BANNER AD -->

<h2>Meta:</h2>
<p><a href="http://validator.w3.org/check/referer" title="This page validates as XHTML 1.0 Transitional">Valid <abbr title="eXtensible HyperText Markup Language">XHTML</abbr></a></p>
<p><a href="http://jigsaw.w3.org/css-validator/check/referer" title="This page uses valid Cascading Stylesheets" rel="external">Valid <abbr title="W3C Cascading Stylesheets">css</abbr></a></p>

<!-- Start of TheCounter.com Code -->
<script type="text/javascript" language="javascript">
//<![CDATA[
s="na";c="na";j="na";f=""+escape(document.referrer)
//]]>
</script> <script type="text/javascript" language="javascript1.2">
//<![CDATA[
s=screen.width;v=navigator.appName
if (v != "Netscape") {c=screen.colorDepth}
else {c=screen.pixelDepth}
j=navigator.javaEnabled()
//]]>
</script> <script type="text/javascript" language="javascript">
//<![CDATA[
function pr(n) {document.write(n,"\n");}
NS2Ch=0
if (navigator.appName == "Netscape" &&
navigator.appVersion.charAt(0) == "2") {NS2Ch=1}
if (NS2Ch == 0) {
r="&size="+s+"&colors="+c+"&referer="+f+"&java="+j+""
pr("<A HREF=\"http://www.TheCounter.com\" TARGET=\"_top\"><IMG"+
" BORDER=0 SRC=\"http://c3.thecounter.com/id=2600520"+r+"\"><\/A>")}
//]]>
</script> <noscript><a href="http://www.TheCounter.com" target="_top"><img src="http://c3.thecounter.com/id=2600520" alt="TC" border="0" /></a></noscript>
<!-- END OF COUNTER.COM CODE -->
</div>
<!-- close #sidebar2 -->
</div>
<!-- end right inner-->
</div>
<!-- end right -->
</div>
<!-- end inner -->
<div id="clearfooter"></div>
<div id="header">
<div id="search"><!--search_terms--><span id="search-txt">SEARCH</span><a name="search"></a>[!AjaxSearch? ajaxSearch=`1` &AS_landing=`8` &moreResultsPage=`8` &showMoreResults=`1` &addJscript=`0` &extract=`0` &AS_showResults=`0`!]</div>
<!-- end topmenu -->
</div>
<!-- end header -->
<br style="clear:both;height:0;font-size: 1px" />
<div id="footer">
<p><a href="http://www.yorkwebsites.co.uk/" target="_blank" title="York Website Design Services">Empowered by York Websites &copy; 2007-2009&nbsp; <img src="http://www.yorkwebsites.co.uk/images/yorkwebsitesmall.png" alt="York Websites - Design, Hosting &amp; Maintenance" width="35" height="35" border="0" align="middle" />

</div>
<!-- end footer -->
</div>
<!-- end outer div -->
</div>
<!-- end wrapper -->
</body>
</html>

if i take out this block:

<!-- START TRADE DOUBLE BANNER ADS RIGHT SIDE -->
<p><script type="text/javascript">
var td_id = "1648379";
var td_format = "4,6,7";
var td_epi = "";
var td_size = "160x600";
var td_lang = "";
var td_method = "automatic";
var td_keywords = "";
var td_exclude = "";
</script>
<script type="text/javascript" id="td_ads" src="http://hst.tradedoubler.com/file/20649/contextual/cx2.js"> </script></p>
<!-- END TRADE DOUBLE BANNER ADS RIGHT SIDE -->

then all appears fine in explorer again. but put it back in and it’s squiffy. weird that isn’t it? how can i fix it? cheers

<p><a href="inside-york-map.html" target="_self">Free York Map</a>

That’s not closed... make sure all your tags are closed and then revalidate. Read the warnings and work through them one by one. It might help!

hi again, ok closed that tag but didn’t seem to help.

i know my page is a mess on validation, but not sure how to clean it, as when i use html tidy or such it adds code from snippets and other places i can’t see. and i don’t understand everything the built in xhtml validator thing shows up. can anyone see anything else that could do with a clean? or why this ad might be making such a mess??

As you can see here: http://validator.w3.org/check?uri=http%3A%2F%2Fwww.insideyork.co.uk%2F&charset=%28detect+automatically%29&doctype=Inline&group=0&user-agent=W3C_Validator%2F1.654

it doesn’t make much sense, how do i clean these?!

If you’re using "XHTML 1.0 Transitional" you have to follow its rules. Just looking at a few near the top of the validation report:
- you have to have quotes around all attributes, including the URL in a link, e.g. href="www.example.com"
- all the tags have to be in lower case (no IMG etc.)
- all the tags have to have a closer (like <p> has </p>), or to close themselves. So it’s <img src="source.jpg" /> (note the slash before the closing angle bracket),
etc.
- to validate, you must use &amp; and not just an ampersand for data passed in the URL, e.g. href="www.example.com?p1=data1&amp;p2=data2"

If you clear those ones up, the forest of validation errors will be considerably thinned out.

KP

I read one of your articles about traveling to York from Edinburgh, I’m from and live in Edinburgh!

Anyway, as kp52 has stated, you have to follow some sort of standards for your site to validate. This includes closing all tags correctly, include alt="" in ALL images, make sure characters like £ and & are correctly put in the your code. &amp; &pound;

You will find that you can debug things a lot easier if your code validates.

hi guys, taking out the trade double code fixed the problem.

but unfortunately the problem is back and i still can’t find the cause. i don’t know if all the divs are open and closed in right places but something is different when viewing IE 6 and 7, but in IE 8 it looks great, also in Firefox, Chrome, Safari etc it works fine. Can anyone please help me out fixing this template for IE6/7...

here’s the code: http://pastebin.com/m857197d


thanks.

U ain’t listen to these people man:
http://validator.w3.org/check?uri=http%3A%2F%2Fwww.insideyork.co.uk%2F&charset=(detect+automatically)&doctype=Inline&group=0

U have 33 validation errors, and as many warnings. If you at least pass validation to either a strict or a transitional doctype, it will be far easier to spot problems with your markup and css.

The reason IE jumps onto two lines: BECAUSE MS DONT CARE ABOUT WEB STANDARDS!! Margins and padding a interpreted differently in FF + IE, can cause issues like u have here.

Hi, but a lot of those validation errors are pulled in after. they’re not in my template. such as the rotating ads, that’s just a snippet, i don’t know how to clean it up or it wouldn’t work. also the content of the main page etc, it’s pulled in from the database.

it’s my template i want to clean up and fix for IE, but i can’t see any problems with it, here it is: http://pastebin.com/m857197d