Hey guys

new here ANY and all help is majorly appreciated.

I'm not entirely sure what the problem is but was hoping someone could help out. The site address is www.threesimpleideas.com however it will never load. Don't know why or how I got this to happen.

In the <head> section I have a "resolution sniffer" which detects the resolution and directs to the correct page.

If anyone can even just give me an idea as to what the problem might be, I promise to like you forever.

(also, get ready to see a few rookie mistakes peppered throughout the code)

 

<!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>
<script type="text/javascript">
<!--

if (screen.width==800||screen.height==600) //if 800x600
window.location.replace("http://www.threesimpleideas.com/800x600/index2.html")

else if (screen.width==1280||screen.height==800) //if 1280x800
window.location.replace("http://www.threesimpleideas.com/1280x800/index3.html")

else //if all else
window.location.replace("http://www.threesimpleideas.com/full/index.html")

//-->
</script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- TemplateBeginEditable name="doctitle" -->
<title>Three Simple Ideas</title>
<!-- TemplateEndEditable -->
<!-- TemplateBeginEditable name="head" -->
<!-- TemplateEndEditable -->
<link href="../full.css" rel="stylesheet" type="text/css" />
<style type="text/css">
<!--
.style1 {font-family: Eurostile, "Arial Narrow", "Agency FB", "Book Antiqua", "Times New Roman"}
-->
</style>
</head>

<body>
<div class="container">
<div class="player"><embed src="../xspf_player.swf?playlist_url=../Test.xspf" width="326" height="80" align="left"></embed></div>
<div class="menu">
 <p><a href="../index.html"><img src="../Home.png" width="81" height="21" border="0" /></a></p>
 <p><a href="../contact.html"><img src="../Contact.png" width="105" height="21" border="0" /></a></p>
 <p><a href="../discography.html"><img src="../Discography.png" width="165" height="27" border="0" /></a></p>
 <p><a href="../upcoming-gigs.html"><img src="../Upcoming-Gigs.png" width="200" height="27" border="0" /></a></p>
</div>
<div class="main"><!-- TemplateBeginEditable name="EditRegion3" -->
 <p>Content for  class main Goes Her</p>
 <p>  </p>
 <p> </p>
 <p> </p>
 <p> </p>
 <p> </p>
 <p>e</p>
<!-- TemplateEndEditable -->
 <p> </p>
</div>
</div>
</body>
</html>

I can only assume its the javascript causing a problem as it seems like its going through a continuous loop. Im no expert on these things, however Try taking it out to see if that solves the problem, then work from there. (or im sure someone else will give you a better answer shortly!)

Ick!

 

Re-directing isn't the solution you need -- you'll end up bouncing people all over the place. A much better solution is the change the class of the body tag and tweak your CSS to give elements different widths, or hide them etc.

 

If that doesn't sense, read the article on A List Apart called Switchy McLayout

In fact I don't see why you need three different versions of the website anyway - save yourself the bother and keep the website small and tidy I say

 

P.S. on the large version it took about 1 minute to download the background image on my work computer!