treehouse : what would you like to learn today?
Web Design Web Development iOS Development

Strange Encounter - Homepage will not display properly

  • Hi there guys. I've been following CSS-Tricks for a while, and lurk the forums frequently, so I knew this was the best place to get some much needed help.

    This problem seemed to have come out of nowhere. I have been at this all afternoon, tried everything I can think of only to be left clueless. Here is the test page:

    http://www.adgrouponline.com/redesign/index_test.htm

    The homepage for whatever reason is not displaying correctly, completely disregarding the external CSS file that it is linked to. Every other page seems to be working just fine - for example: http://www.adgrouponline.com/redesign/about.htm. However, there was a part of the day when viewing the site on Firefox, the site in it's entirety was not displaying properly.

    Just now I discovered in Safari only, when the URL excludes the www. and reads as http://adgrouponline.com/redesign/index_test.htm it works like gold. The page validates with no errors, I have cleared the cache in both browsers, and have even reset the router to see if there was an issue within. Nothing. I am completely stumped guys.

    Here's 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>
    <meta name=\"title\" content=\"Ad Agency Murrieta - Affordable marketing and advertising agency from Murrieta, California\" />
    <meta name=\"description\" content=\"Effective and affordable marketing and advertising from California, that include the utilization of web, print, television and radio commercials, direct mail, logo design and more.\" />
    <meta name=\"keywords\" content=\"print, web design, video, radio, advertising, marketing, development, agency, affordable, website, murrieta, california\" />
    <meta http-equiv=\"Content-Language\" content=\"English\" />
    <meta http-equiv=\"Content-Type\" content=\"text/html; charset=utf-8\" />
    <meta http-equiv=\"Content-Type\" content=\"text/html; charset=ISO-8859-1\" />
    <meta name=\"robots\" content=\"index,follow,all\" />
    <meta name=\"revisit-after\" content=\"2 days\" />
    <meta name=\"googlebot\" content=\"index,follow,all\" />

    <title>Ad Group Incorporated | Full Service Ad Agency | Temecula, Murrieta, California | Home</title>

    <link rel=\"stylesheet\" href=\"css/styles.css\" type=\"text/css\" />
    <link rel=\"stylesheet\" href=\"js/jquery.fancybox.css\" type=\"text/css\" media=\"screen\" />

    <!--[if lt IE 8]>
    <script src=\"http://ie7-js.googlecode.com/svn/version/2.0(beta3)/IE8.js\" type=\"text/javascript\"></script>
    <![endif]-->

    <script type=\"text/javascript\" src=\"js/jquery.js\"></script>
    <script type=\"text/javascript\" src=\"js/jquery-1.3.2.min.js\"></script>
    <script type=\"text/javascript\" src=\"js/custom.js\"></script>
    <script type=\"text/javascript\" src=\"js/jquery.easing.1.3.js\"></script>
    <script type=\"text/javascript\" src=\"js/jquery.fancybox-1.2.1.pack.js\"></script>



    <script type=\"text/javascript\">


    $(document).ready(function() {

    $(\"li.print\").show(function(){
    $(\"#load-area\").load(\"load-print.htm\");
    });

    });

    $(document).ready(function() {

    $(\"li.print\").click(function(){
    $(\"#load-area\").load(\"load-print.htm\");
    });

    });

    $(document).ready(function() {

    $(\"li.web\").click(function(){
    $(\"#load-area\").load(\"load-web.htm\");
    });

    });
    $(document).ready(function() {

    $(\"li.video\").click(function(){
    $(\"#load-area\").load(\"load-video.htm\");
    });

    });
    </script>
    <script type=\"text/javascript\">
    $(document).ready(function(){
    $(\".lightbox\").lightbox();
    });

    </script>

    </head>

    <body id=\"body_home\">
    <div id=\"wrapper\">

    <ul id=\"navigation\">
    <li id=\"nav_home\"><a href=\"index2.htm\">Home</a></li>
    <li id=\"nav_about\"><a href=\"about.htm\">About</a></li>
    <li id=\"nav_services\"><a href=\"services.htm\">Services</a></li>
    <li id=\"nav_portfolio\"><a href=\"portfolio.htm\">Portfolio</a></li>
    <li id=\"nav_contact\"><a href=\"contact.htm\">Contact</a></li>
    </ul>


    <div id=\"header\">
    <div id=\"emblem\"><a href=\"awards.htm\"><img src=\"images/emblem*-trans.png\" alt=\"Awards Emblem\" /></a></div>
    </div>

    <div id=\"bar\">
    <p class=\"news\"><strong>Current Ad Group News:</strong> 07/08: Ad Group Retained To Market Revolutionary New Product | 05/08: Valley Hi Nissan and Valley Hi Honda Retains Ad Group</p>
    </div>

    <div id=\"left_column\">
    <h1>Who We are</h1>
    <p>Ad Group helps companies identify and build customer traffic. This, in turn, leads to greater profitability for our clients. How do we do this? We develop effective and affordable marketing and advertising strategies that include the utilization of web, print, television and radio commercials, direct mail, logo design and more. Ad Group has over 35 years of service, more than 85 years of collective marketing knowledge, having serviced over 170 clients throughout 4 countries.
    </p>
    <h1>Services</h1>
    <ul class=\"list1\">
    <li>Branding</li>
    <li>Web Marketing/Design</li>
    <li>Television Commercials</li>
    <li>Radio Commercials</li>
    </ul>
    <ul class=\"list2\">
    <li>Newspaper/Magazine Design</li>
    <li>Direct Mail Marketing</li>
    <li>Media Buying/Planning</li>
    <li>Promotions</li>
    </ul>
    <ul class=\"list3\">
    <li>Printing</li>
    <li>Corporate Collateral</li>
    <li>Logo Design</li>
    <li>Public Relations</li>
    </ul>
    </div>
    <div id=\"right_column\">
    <h1>Featured Work</h1>
    <div id=\"featured_print\">
    <ul id=\"featured_links\">
    <li class=\"print\"><a href=\"#print\">Print</a></li>
    <li class=\"web\"><a href=\"#web\">Web</a></li>
    <li class=\"video\"><a href=\"#video\">Video</a></li>
    </ul>
    <div class=\"clear\"></div>
    <div id=\"load-area\"></div>


    </div>
    </div>
    <div class=\"clear\"></div>
    <div class=\"line\"></div>
    <div id=\"boxes\">
    <a href=\"adthemes.htm\"><img src=\"images/theme_box.png\" class=\"padding\" alt=\"Ad Themes\" /></a>
    <a href=\"podcast.htm\"><img src=\"images/podcast_box.png\" class=\"padding\" alt=\"Podcast\" /></a>
    <a href=\"clients.htm\"><img src=\"images/client_list_box.png\" class=\"padding\" alt=\"Client List\" /></a>
    <a id=\"intro_video\" title=\"Video Introduction\" href=\"#intro_vid\"><img src=\"images/video_intro_box.png\" class=\"padding\" alt=\"Video Intro\" /></a>
    </div>

    <div style=\"display:none\" id=\"intro_vid\">
    <object width=\"425\" height=\"355\"><param name=\"movie\" value=\"http://www.youtube.com/v/-LNeJB841os&hl=en&autoplay=1\"></param><param name=\"wmode\" value=\"transparent\"></param><embed src=\"http://www.youtube.com/v/-LNeJB841os&hl=en&autoplay=1\" type=\"application/x-shockwave-flash\" width=\"425\" height=\"355\"></embed></object>
    </div>




    <div id=\"footer\">
    <div id=\"copyright\">
    <p>&copy; Copyright 2009 Ad Group Inc. All Rights Reserved. Ad Group Online - Valid <a href=\"http://validator.w3.org/check?uri=referer\">XHTML</a><a href=\"http://jigsaw.w3.org/css-validator/validator?uri=http%3A%2F%2Fadgrouponline.com%2Fredesign%2Fcss%2Fstyles.css\">CSS</a></p>
    </div>
    <p><a href=\"index2.htm\">Home</a><a href=\"about.htm\">About The Company </a><a href=\"services.htm\">Services Offered </a><a href=\"portfolio.htm\">Creative Portfolio </a><a href=\"contact.htm\">Contact Us </a><a href=\"adthemes.htm\">Ad Themes </a><a href=\"podcast.htm\">Audio Podcast </a><a href=\"clients.htm\">Client List </a><a href=\"careers.htm\">Careers</a></p>
    </div>

    </div>
    </body>
    </html>


    Any help would be really appreciated. Thank you!
  • I'm looking at this now for you, but just FYI, the homepage is broken for me with or without the WWW.

    First question I would have for you is...did you double/triple/quadruple check the file paths. On the surface, I don't see any reason for this at the moment.

    Beautiful redesign, btw.

    Edit - Also, I would just re-save another page that is working and then manually import the home page content section by section...that way you can see what part (if any) of the code is causing this.

    Edit 2 - Yeah, looking at it again, I can't see why this would happen, except perhaps your javascript is somehow disabling the CSS file. I think if I were experiencing this, I would just re-build the page piece by piece to see which part is causing this to happen.
  • Luminated,

    Hopefully you didn't put too much time into trying to help me out on this one, as right after I made the post I did a bit more research of my own. I really appreciate the help AND the compliment!

    Turns out it was an encoding issue. Somehow while I was working in Coda, I accidentally converted the file to UTF-16 while at the same time declaring in the meta that the page was Unicode UTF-8, thus causing my problem.

    I will definitely look into familiarize myself with text encoding so I am not so clueless next time around.
  • No worries, I really didn't spend much time at all, but at least I did learn something new about text encoding myself! :)