Solved

website background is all that displays

Posted on 2011-09-20
21
315 Views
Last Modified: 2012-05-12
Client cannot view beta site.  All he can see is the "bark" background.  When I go to site, I can click on navigation buttons and see text, images, etc with no problems.  I can't figure it out.  

http://ymcatest.com/filesfrompattie/camp/index.html
<!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 http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Camp Y-Koda, Sheboygan, Wisconsin</title>
<script type="text/javascript" src="drop_down.js"></script><!--Required for drop downs to work -->
<link href="camp.css" rel="stylesheet" type="text/css" />
<style type="text/css"> 


/*

green = 00634e
orange = f69b26
brown = 452f1d
teal = 799a93
cream = f3ecda


*/

<!--[if IE 5]>
<style type="text/css"> 
/* place css box model fixes for IE 5* in this conditional comment */
.thrColFixHdr #sidebar1 { width: 168px; }
.thrColFixHdr #sidebar2 { width: 221px; }
</style>
<![endif]--><!--[if IE]>
<style type="text/css"> 
/* place css fixes for all versions of IE in this conditional comment */
.thrColFixHdr #sidebar2, { padding-top: 30px; }
.thrColFixHdr #mainContent { zoom: 1; }
/* the above proprietary zoom property gives IE the hasLayout it needs to avoid several bugs */
</style>
<![endif]-->
</head>

<body>

  <!--CONTAINER -->
  
  <div id="wrapper"><img src="img/topper.gif" width="971" height="20" alt="Camp Y-Koda" />
<div id="container">
 <div id="header"><a href="index.html"><img src="img/logo_tree2.png" alt="Camp Y-Koda Sheboygan Wisconsin" width="207" height="191" border="0" class="tree" /></a>
     <p><span class="large">Camp Y-Koda</span><span class="medium"> Outdoor Skills &amp; Education</span></p>
   
   <div id="nav"><ul id="main-nav">
  <li class="firstbutton"><a href="summer.html">Summer Camp</a></li>
    <li><a href="#">Educational Programs</a>
      <ul>
      <li><a href="outside.html">Outside the Classroom</a> </li>
      <li><a href="outreach.html">Outreach Programs</a></li>
      <li><a href="field.html">Field Trips</a></li>
      <li><a href="resources.html">Teacher Resources</a></li>
      </ul>
      </li>
     <li><a href="ropes.html">Ropes/Team Building</a></li> 
     <li><a href="programs.html">Seasonal Programs</a></li>
     <li class="lastbutton"><a href="events.html">Events</a></li>
     </ul></div></div>
  
        
        
       
     
     <div id="mainContentWrapper">    
        
        
<!-- NAVIGATION LEFT -->
   <div id="sidebar_left_brown">
   <div id="left_nav">
   <ul id="left_nav"> 
  <li><a href="facility.html">Facility Rental</a></li>
           <li><a href="#">Support Us</a> 
           
           <ul>
           <li><a href="volunteer.html">Volunteer </a> </li>
           <li><a href="partners.html">Partners with Youth</a> </li>
           <li><a href="capital.html">Capital Campaign</a> </li>
           <li><a href="endowment.html">Endowment</a> </li>
           <li><a href="lohmann.html">Lohmann Legacy</a> </li>
           </ul>
</li>
		     <li><a href="staff.html">Staff</a></li>
             <li><a href="employment.html">Employment</a></li>
              <li><a href="contact.html">Contact Us</a></li>
              <li><a href="index.html">Home</a></li>
</ul>


  
   </div> 
      <div class="icon_wrapper">
       <a href="http://www.facebook.com/pages/Sheboygan-YMCA-Middle-School-Dance/191564906116#/pages/Camp-Y-Koda/229397176041?v=wall"><img src="img/icon_facebook.png" alt="" width="27" height="27" border="0" class="icon" /></a><a href="#"><img src="img/icon_twitter.png" alt="" width="27" height="27" border="0" class="icon" /></a><a href="#"><img src="img/icon_youtube.png" alt="" width="27" height="27" border="0" class="icon" /></a></p>
      </div> 
        <img src="img/t1.gif" alt="" class="icon_wrapper" />
      
    

  </div>
   <div id="mainPic"><img src="img/head_p1.jpg" width="761" height="250" /> </div>
      
   

  
  <!-- SIDEBAR 2 -->
  <!-- MAIN CONTENT --><div id="mainContentWrapper">
  <div id="mainContent">
    <h1>Main Content </h1>
    <p><img src="img/snap_bestfriends.jpg" alt="" width="293" height="300" class="fltrt_snap" />Located on 80 beautiful acres outside the Sheboygan Falls city limits, Camp Y-Koda is Sheboygan County’s premier destination for youth outdoor activities. We encourage kids to care for their environment by offering a direct, hands-on experience of nature.  </p>
<h2>H2 level heading </h2>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam,  justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam  ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo  porttitor, felis. Nam blandit quam ut lacus. Quisq ue ornare risus quis  ligula. </p>
</div>
	<!-- This clearing element should immediately follow the #mainContent div in order to force the #container div to contain all child floats --><br class="clearfloat" />
  
  
    <!-- FOOTER -->
       <div id="footer_address">
         <p>Camp Y-Koda  .  W3340 Sunset Road  .  Sheboygan Fallls, WI 53085  .  (920) 467-6882</p></div>
    <div id="footer"><img src="img/footer4.gif" width="971" height="183" alt="" /></div></div>
    
<!-- end #container --></div>
</div></div></div>
</body>
</html>

Open in new window

0
Comment
Question by:nsitedesigns
  • 9
  • 8
  • 4
21 Comments
 
LVL 30

Assisted Solution

by:LZ1
LZ1 earned 334 total points
Comment Utility
It looks like it's happening in IE.  IE is throwing an error

Message: Object required
Line: 6
Char: 11
Code: 0
URI: http://ymcatest.com/filesfrompattie/camp/drop_down.js


0
 

Author Comment

by:nsitedesigns
Comment Utility
so any advice?
0
 
LVL 13

Assisted Solution

by:NUKIT
NUKIT earned 166 total points
Comment Utility
Your javascript needs to be reviewed and validated.  As LZ1 stated Line 6 in the code at character 11 is throwing an error.

Check out this site to help validate your javascript.
http://www.jslint.com/
0
 

Author Comment

by:nsitedesigns
Comment Utility
I do not know javascript.   Sorry LZ1, I didn't realize your reply was giving me direction.  I went to the jslint.com site.  This is what it had to say.  I performed a search on site code for http://ymcatest.com/filesfrompattie/camp/index.html and there was none found.  Maybe I should move this question over to a javascript expert?

Error:
Problem at line 1 character 6: Label 'http' on '(end)' statement.

http://ymcatest.com/filesfrompattie/camp/index.html

Problem at line 1 character 5: Unexpected '(end)'.

http://ymcatest.com/filesfrompattie/camp/index.html

Problem at line 1 character 5: Stopping. (100% scanned).

0
 
LVL 13

Assisted Solution

by:NUKIT
NUKIT earned 166 total points
Comment Utility
Try this:

Comment out line 6 on your index.html page.  This will remove the javascript file from loading.  It looks like it will allow you to use a drop down menu, but that function is not working for your site.

Try commenting that out and seeing if your page loads.  If it does, then you can create a seperate question asking why the javascript page/code doesn't work.
0
 

Author Comment

by:nsitedesigns
Comment Utility
I commented out the script.  Can you see it now?
http://ymcatest.com/filesfrompattie/camp/index.html
0
 
LVL 13

Expert Comment

by:NUKIT
Comment Utility
I can within Firefox, but not within IE...

 FF
Do you have any specific rules for IE?
0
 
LVL 30

Expert Comment

by:LZ1
Comment Utility
Unfortunately Javascript isn't my strong suit either. Let me see if I can download the file and take a look.
0
 
LVL 30

Assisted Solution

by:LZ1
LZ1 earned 334 total points
Comment Utility
Try this:
<!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 http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Camp Y-Koda, Sheboygan, Wisconsin</title>
<script type="text/javascript" src="http://ymcatest.com/filesfrompattie/camp/drop_down.js"></script><!--Required for drop downs to work -->
<link href="http://ymcatest.com/filesfrompattie/camp/camp.css" rel="stylesheet" type="text/css" />
<style type="text/css"> 


/*

green = 00634e
orange = f69b26
brown = 452f1d
teal = 799a93
cream = f3ecda


*/
</style>

<!--[if IE 5]>
	<style type="text/css"> 
		/* place css box model fixes for IE 5* in this conditional comment */
		.thrColFixHdr #sidebar1 { width: 168px; }
		.thrColFixHdr #sidebar2 { width: 221px; }
	</style>
<![endif]-->

<!--[if IE]>
	<style type="text/css"> 
		/* place css fixes for all versions of IE in this conditional comment */
		.thrColFixHdr #sidebar2, { padding-top: 30px; }
		.thrColFixHdr #mainContent { zoom: 1; }
		/* the above proprietary zoom property gives IE the hasLayout it needs to avoid several bugs */
	</style>
<![endif]-->
</head>

<body>

  <!--CONTAINER -->
  
  <div id="wrapper"><img src="img/topper.gif" width="971" height="20" alt="Camp Y-Koda" />
<div id="container">
 <div id="header"><a href="index.html"><img src="img/logo_tree2.png" alt="Camp Y-Koda Sheboygan Wisconsin" width="207" height="191" border="0" class="tree" /></a>
     <p><span class="large">Camp Y-Koda</span><span class="medium"> Outdoor Skills &amp; Education</span></p>
   
   <div id="nav"><ul id="main-nav">
  <li class="firstbutton"><a href="summer.html">Summer Camp</a></li>
    <li><a href="#">Educational Programs</a>
      <ul>
      <li><a href="outside.html">Outside the Classroom</a> </li>
      <li><a href="outreach.html">Outreach Programs</a></li>
      <li><a href="field.html">Field Trips</a></li>
      <li><a href="resources.html">Teacher Resources</a></li>
      </ul>
      </li>
     <li><a href="ropes.html">Ropes/Team Building</a></li> 
     <li><a href="programs.html">Seasonal Programs</a></li>
     <li class="lastbutton"><a href="events.html">Events</a></li>
     </ul></div></div>
  
        
        
       
     
     <div id="mainContentWrapper">    
        
        
<!-- NAVIGATION LEFT -->
   <div id="sidebar_left_brown">
   <div id="left_nav">
   <ul id="left_nav"> 
  <li><a href="facility.html">Facility Rental</a></li>
           <li><a href="#">Support Us</a> 
           
           <ul>
           <li><a href="volunteer.html">Volunteer </a> </li>
           <li><a href="partners.html">Partners with Youth</a> </li>
           <li><a href="capital.html">Capital Campaign</a> </li>
           <li><a href="endowment.html">Endowment</a> </li>
           <li><a href="lohmann.html">Lohmann Legacy</a> </li>
           </ul>
</li>
                     <li><a href="staff.html">Staff</a></li>
             <li><a href="employment.html">Employment</a></li>
              <li><a href="contact.html">Contact Us</a></li>
              <li><a href="index.html">Home</a></li>
</ul>


  
   </div> 
      <div class="icon_wrapper">
       <a href="http://www.facebook.com/pages/Sheboygan-YMCA-Middle-School-Dance/191564906116#/pages/Camp-Y-Koda/229397176041?v=wall"><img src="img/icon_facebook.png" alt="" width="27" height="27" border="0" class="icon" /></a><a href="#"><img src="img/icon_twitter.png" alt="" width="27" height="27" border="0" class="icon" /></a><a href="#"><img src="img/icon_youtube.png" alt="" width="27" height="27" border="0" class="icon" /></a></p>
      </div> 
        <img src="img/t1.gif" alt="" class="icon_wrapper" />
      
    

  </div>
   <div id="mainPic"><img src="img/head_p1.jpg" width="761" height="250" /> </div>
      
   

  
  <!-- SIDEBAR 2 -->
  <!-- MAIN CONTENT --><div id="mainContentWrapper">
  <div id="mainContent">
    <h1>Main Content </h1>
    <p><img src="img/snap_bestfriends.jpg" alt="" width="293" height="300" class="fltrt_snap" />Located on 80 beautiful acres outside the Sheboygan Falls city limits, Camp Y-Koda is Sheboygan County’s premier destination for youth outdoor activities. We encourage kids to care for their environment by offering a direct, hands-on experience of nature.  </p>
<h2>H2 level heading </h2>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam,  justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam  ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo  porttitor, felis. Nam blandit quam ut lacus. Quisq ue ornare risus quis  ligula. </p>
</div>
        <!-- This clearing element should immediately follow the #mainContent div in order to force the #container div to contain all child floats --><br class="clearfloat" />
  
  
    <!-- FOOTER -->
       <div id="footer_address">
         <p>Camp Y-Koda  .  W3340 Sunset Road  .  Sheboygan Fallls, WI 53085  .  (920) 467-6882</p></div>
    <div id="footer"><img src="img/footer4.gif" width="971" height="183" alt="" /></div></div>
    
<!-- end #container --></div>
</div></div></div>
</body>
</html>

Open in new window

0
 
LVL 30

Expert Comment

by:LZ1
Comment Utility
One of the first problems you had was in your original source code you posted you had a <style> tag inside of another <style> tag. Big no-no. Fixed that and then I indented your CSS IF statements to see them better.

Let's see if we can get to the website in IE now.
0
How to improve team productivity

Quip adds documents, spreadsheets, and tasklists to your Slack experience
- Elevate ideas to Quip docs
- Share Quip docs in Slack
- Get notified of changes to your docs
- Available on iOS/Android/Desktop/Web
- Online/Offline

 

Author Comment

by:nsitedesigns
Comment Utility
0
 
LVL 30

Expert Comment

by:LZ1
Comment Utility
I can see it perfectly and with no errors!
0
 

Author Comment

by:nsitedesigns
Comment Utility
Cool - - what did you do?
0
 
LVL 30

Accepted Solution

by:
LZ1 earned 334 total points
Comment Utility
I remove the nested <style> tags and that seemed to clear everything up right away.  The indenting is just for readability on my part. I like clean, indented code because it's just easier to follow, especially when your debugging other people's code. ;)
0
 

Author Comment

by:nsitedesigns
Comment Utility
Weird, I was told that the nested style tag was needed for the drop downs to work in IE.  Do they display ok?
0
 
LVL 13

Expert Comment

by:NUKIT
Comment Utility
Excellent!  Glad you guys were able to figure it out!
0
 
LVL 30

Expert Comment

by:LZ1
Comment Utility
Yep. Checked IE 7 & 8 and both looked good. I'm not sure where you were told that nested style tags were ok.  

<style>
#div1{style}
#div2{style}
<style>
#div3{style}
#div4{style}
</style>
</style>

That is never ok
0
 

Author Comment

by:nsitedesigns
Comment Utility
does the navigation work for you guys on this test page?  There should be drop downs.
http://ymcatest.com/filesfrompattie/camp/test.html
0
 

Author Comment

by:nsitedesigns
Comment Utility
LZ1,

So, conditional comments so older versions of IE is not ok?  I was told by some experts to include them so drop downs work.
0
 
LVL 30

Assisted Solution

by:LZ1
LZ1 earned 334 total points
Comment Utility
The drop downs look good across all browsers now.

Conditional comments are fine for any version of IE. However, nested styles as I demonstrated above, are not. When doing conditional styles, try putting each in it's own file, rather than on page. It's always worked out better that way, for me anyways.  



<!--[if IE]>
<link href="/css/IE.css" rel="stylesheet" type="text/css"  />
<![endif]-->

Open in new window

0
 

Author Closing Comment

by:nsitedesigns
Comment Utility
Thanks all!
0

Featured Post

What Is Threat Intelligence?

Threat intelligence is often discussed, but rarely understood. Starting with a precise definition, along with clear business goals, is essential.

Join & Write a Comment

Suggested Solutions

Browsers only know CSS so your awesome SASS code needs to be translated into normal CSS. Here I'll try to explain what you should aim for in order to take full advantage of SASS.
This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
In this tutorial viewers will learn how to customize the background color and font color of highlighted text using the ::selection element in CSS Begin by defining the selected text as an element in CSS by typing "::selection": Style the ::selection…
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …

762 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

11 Experts available now in Live!

Get 1:1 Help Now