Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

website background is all that displays

Posted on 2011-09-20
21
Medium Priority
?
357 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 9
  • 8
  • 4
21 Comments
 
LVL 30

Assisted Solution

by:LZ1
LZ1 earned 1336 total points
ID: 36567828
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
ID: 36567966
so any advice?
0
 
LVL 13

Assisted Solution

by:Andrew Derse
Andrew Derse earned 664 total points
ID: 36568012
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
Learn how to optimize MySQL for your business need

With the increasing importance of apps & networks in both business & personal interconnections, perfor. has become one of the key metrics of successful communication. This ebook is a hands-on business-case-driven guide to understanding MySQL query parameter tuning & database perf

 

Author Comment

by:nsitedesigns
ID: 36568089
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:Andrew Derse
Andrew Derse earned 664 total points
ID: 36568113
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
ID: 36568358
I commented out the script.  Can you see it now?
http://ymcatest.com/filesfrompattie/camp/index.html
0
 
LVL 13

Expert Comment

by:Andrew Derse
ID: 36568372
I can within Firefox, but not within IE...

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

Expert Comment

by:LZ1
ID: 36568535
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 1336 total points
ID: 36568587
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
ID: 36568603
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
 

Author Comment

by:nsitedesigns
ID: 36568605
0
 
LVL 30

Expert Comment

by:LZ1
ID: 36568621
I can see it perfectly and with no errors!
0
 

Author Comment

by:nsitedesigns
ID: 36568651
Cool - - what did you do?
0
 
LVL 30

Accepted Solution

by:
LZ1 earned 1336 total points
ID: 36568671
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
ID: 36568747
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:Andrew Derse
ID: 36568782
Excellent!  Glad you guys were able to figure it out!
0
 
LVL 30

Expert Comment

by:LZ1
ID: 36568791
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
ID: 36568800
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
ID: 36568845
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 1336 total points
ID: 36568869
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
ID: 36568955
Thanks all!
0

Featured Post

Learn how to optimize MySQL for your business need

With the increasing importance of apps & networks in both business & personal interconnections, perfor. has become one of the key metrics of successful communication. This ebook is a hands-on business-case-driven guide to understanding MySQL query parameter tuning & database perf

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Color can increase conversions, create feelings of warmth or even incite people to get behind a cause. If you want your website to really impact site visitors, then it is vital to consider the impact color has on them.
Originally, this post was published on Monitis Blog, you can check it here . It goes without saying that technology has transformed society and the very nature of how we live, work, and communicate in ways that would’ve been incomprehensible 5 ye…
In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at google.com/fonts: Browse or search based on font properties or name to find a suitable font for…
Any person in technology especially those working for big companies should at least know about the basics of web accessibility. Believe it or not there are even laws in place that require businesses to provide such means for the disabled and aging p…

715 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