Hope someone can help with this one. I have created websites with html editor and never noticed any problems until this came up some time ago. I did get one response to this but it didnt' help, and just saying it happens with IE9 doesn't help, since I've never seen anyone elses website do this. It seems when I click on the pages themselves (on the internet) to try to highlight something to copy/paste, the whole screen turns dark, like I just put on dark gray sunglasses, and of course, then I can't select anything. I also noticed that when I click on the different page links, you can see the screen temp get that dark gray shade before changing pages. If you click again, it goes away. I'm thinking I just did something really stupid in the code? I've never seen this before. Can anyone please look at the website and give a suggestion? (and yeah, I know some of the pdf files need to be replaced, so just look at the Home, Explore ones for now!) Thanks.
Jo Annette
www.historicharmony.com
Jo
Registered User
58 posts
Jo
Registered User
58 posts
Here's the code from HTML Editor:
<!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>Welcome | Harmony Business Association, Harmony Pa</title>
<meta name="author" content="Harmony Business Association - http://shophistoricharmony.com" />
<meta name="description" content="Harmony Business Association Butler County Pennsylvania." />
<meta name="keywords" content="Harmony, Business, Association, German, Christmas, Market, Silvester, Rapp" />
<style type="text/css">
@import url(css/reset.css);
@import url(css/styles.css);
</style>
<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
<script src="js/prototype.js" type="text/javascript"></script>
<script src="js/scriptaculous.js?load=effects,builder" type="text/javascript"></script>
<script src="js/lightbox.js" type="text/javascript"></script>
</head>
<body>
<div id="header">
<div class="container">
<h1 id="logo"><a href="./" title="">Welcome to Harmony</a></h1>
<p class="desc">Pennsylvania</p>
<form action="#" method="post">
<input type="text" name="keyword" id="keyword" />
<input type="button" value="Search" id="s" />
</form>
</div>
</div> <!-- /#header -->
<div id="page">
<div id="nav">
<ul>
<li id="home"><a href="index.html" title="">Home</a></li>
<li id="about"><a href="explore.html">Explore</a></li>
<li id="events"><a href="events.html">Events</a></li>
<li id="directions"><a href="hbabutlercountymap.pdf">Directions</a></li>
<li id="contact"><a href="contact.html">Order Page</a></li>
</ul>
<div class="clearfix"></div>
</div> <!-- /#nav -->
<div id="main-photo">
</div>
<div class="clearfix"></div>
<div id="features">
<div class="feature-box">
<img src="images/concert.bmp" alt="Always something happening in Harmony Pa" />
<h5><a href="events.html">CALENDAR OF EVENTS</a></h5>
<p><b><a href="harmonyfarmersmarket.html">Harmony Farmers Market</a> </b>continues through October 20th. We have lots of local produce, fruit, honey, garlic, eggs, ground beef, sausage (pork OR chicken!), baked goods and more. Special guest - Rustic Acres Winery - will be selling their locally made wines on September 15th and October 20th. </p>
</div>
<div class="feature-box">
<img src="images/cruise.bmp" alt="Harmony Car Cruise" />
<h5><a href="explore.html">Cruise in and explore Harmony!</a></h5>
<p>We've got a lot of history in this little town. So come spend the day with us. Tour the museum, have lunch in a haunted restaurant, shop in historic buildings that house unique stores. Be sure to grab the latest map to help plan your day. </p>
</div>
<div class="feature-box">
<img src="images/cooks.jpg" alt="Calling all cooks" />
<h5>Calling all cooks!</h5>
<p>Harmony Business Association has printed a new cookbook, "<i>Taste of Harmony</i>". The price is only $7 and includes German favorites, old time classics, and lots of great recipes contributed by HBA business members, family and friends. You can pick up a copy in lots of stores in town, or <a href="contact.html">have one shipped to you.</a> </p>
</div>
<div class="feature-box end">
</div>
<p>The Harmony Business Association is comprised of local Harmony Borough and the surrounding area business owners and managers. We are a passionate dedicated group, whose mission is to bringing customers to our businesses and to let the world know just how much Harmony and the surrounding areas have to offer.
If you would like to join us, please download the <a href="HBA membership.pdf">membership application</a>. We have many sponsorship opportunities as well, for our fireworks, bands, etc and you would receive valuable advertising in exchange for your contributions. Join as at our <a href="HBA 2011 Events Calendar.pdf">next meeting</a> to see all the ways
that working together, can benefit us all!</p>
<p><a href="abouthba.html">ABOUT US</a></p>
</div>
<div class="clearfix"></div><strong>Like Us on Facebook!</strong><p><iframe src="http://www.facebook.com/plugins/like.php?href=http%3A%2F%2Fwww.facebook.com%2F%23%21%2Fpages%2FHarmony-Business-Association%2F101751066573250&layout=button_count&show_faces=false&width=450&action=like&font=verdana&colorscheme=light&height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:450px; height:21px;"></iframe></p>
<p><script type="text/javascript"><!--
google_ad_client = "ca-pub-0257634475951934";
/* hunt728x90, created 11/27/08 */
google_ad_slot = "3013612242";
google_ad_width = 728;
google_ad_height = 90;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script></p></div> <!-- /#page -->
<div id="footer"><br /><p>This website is updated often, so check back.</p>
<div class="module vcard" id="address">
<!--
hCard is a simple, open, distributed format for representing people, companies, organizations,
and places, using a 1:1 representation of vCard properties and values in semantic HTML or XHTML.
hCard is one of several open microformat standards suitable for embedding in HTML, XHTML, Atom,
RSS, and arbitrary XML.
You can learn more about it here: http://microformats.org/wiki/hcard
-->
<div class="org fn">Harmony Business Association, Inc.</div>
<div class="adr">
<div class="street-address">229 Mercer St </div>
<span class="locality">Harmony, Pa </span>,
<span class="region">US</span>
<span class="postal-code">16037</span>
</div>
<div><span class="tel">724-452-6220</span> phone</div>
</div>
<p class="copyright">
Copyright © 2010-11 <strong>Harmony Business Association,Inc. / (Courtesy of Information Architekt)</strong>. All Rights Reserved.
</p>
</div>
<!-- Site Meter -->
<script type="text/javascript" src="http://s41.sitemeter.com/js/counter.js?site=s41hbawebsite">
</script>
<noscript>
<a href="http://s41.sitemeter.com/stats.asp?site=s41hbawebsite" target="_top">
<img src="http://s41.sitemeter.com/meter.asp?site=s41hbawebsite" alt="Site Meter" border="0"/></a>
</noscript>
<!-- Copyright (c)2009 Site Meter -->
</body>
</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>Welcome | Harmony Business Association, Harmony Pa</title>
<meta name="author" content="Harmony Business Association - http://shophistoricharmony.com" />
<meta name="description" content="Harmony Business Association Butler County Pennsylvania." />
<meta name="keywords" content="Harmony, Business, Association, German, Christmas, Market, Silvester, Rapp" />
<style type="text/css">
@import url(css/reset.css);
@import url(css/styles.css);
</style>
<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
<script src="js/prototype.js" type="text/javascript"></script>
<script src="js/scriptaculous.js?load=effects,builder" type="text/javascript"></script>
<script src="js/lightbox.js" type="text/javascript"></script>
</head>
<body>
<div id="header">
<div class="container">
<h1 id="logo"><a href="./" title="">Welcome to Harmony</a></h1>
<p class="desc">Pennsylvania</p>
<form action="#" method="post">
<input type="text" name="keyword" id="keyword" />
<input type="button" value="Search" id="s" />
</form>
</div>
</div> <!-- /#header -->
<div id="page">
<div id="nav">
<ul>
<li id="home"><a href="index.html" title="">Home</a></li>
<li id="about"><a href="explore.html">Explore</a></li>
<li id="events"><a href="events.html">Events</a></li>
<li id="directions"><a href="hbabutlercountymap.pdf">Directions</a></li>
<li id="contact"><a href="contact.html">Order Page</a></li>
</ul>
<div class="clearfix"></div>
</div> <!-- /#nav -->
<div id="main-photo">
</div>
<div class="clearfix"></div>
<div id="features">
<div class="feature-box">
<img src="images/concert.bmp" alt="Always something happening in Harmony Pa" />
<h5><a href="events.html">CALENDAR OF EVENTS</a></h5>
<p><b><a href="harmonyfarmersmarket.html">Harmony Farmers Market</a> </b>continues through October 20th. We have lots of local produce, fruit, honey, garlic, eggs, ground beef, sausage (pork OR chicken!), baked goods and more. Special guest - Rustic Acres Winery - will be selling their locally made wines on September 15th and October 20th. </p>
</div>
<div class="feature-box">
<img src="images/cruise.bmp" alt="Harmony Car Cruise" />
<h5><a href="explore.html">Cruise in and explore Harmony!</a></h5>
<p>We've got a lot of history in this little town. So come spend the day with us. Tour the museum, have lunch in a haunted restaurant, shop in historic buildings that house unique stores. Be sure to grab the latest map to help plan your day. </p>
</div>
<div class="feature-box">
<img src="images/cooks.jpg" alt="Calling all cooks" />
<h5>Calling all cooks!</h5>
<p>Harmony Business Association has printed a new cookbook, "<i>Taste of Harmony</i>". The price is only $7 and includes German favorites, old time classics, and lots of great recipes contributed by HBA business members, family and friends. You can pick up a copy in lots of stores in town, or <a href="contact.html">have one shipped to you.</a> </p>
</div>
<div class="feature-box end">
</div>
<p>The Harmony Business Association is comprised of local Harmony Borough and the surrounding area business owners and managers. We are a passionate dedicated group, whose mission is to bringing customers to our businesses and to let the world know just how much Harmony and the surrounding areas have to offer.
If you would like to join us, please download the <a href="HBA membership.pdf">membership application</a>. We have many sponsorship opportunities as well, for our fireworks, bands, etc and you would receive valuable advertising in exchange for your contributions. Join as at our <a href="HBA 2011 Events Calendar.pdf">next meeting</a> to see all the ways
that working together, can benefit us all!</p>
<p><a href="abouthba.html">ABOUT US</a></p>
</div>
<div class="clearfix"></div><strong>Like Us on Facebook!</strong><p><iframe src="http://www.facebook.com/plugins/like.php?href=http%3A%2F%2Fwww.facebook.com%2F%23%21%2Fpages%2FHarmony-Business-Association%2F101751066573250&layout=button_count&show_faces=false&width=450&action=like&font=verdana&colorscheme=light&height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:450px; height:21px;"></iframe></p>
<p><script type="text/javascript"><!--
google_ad_client = "ca-pub-0257634475951934";
/* hunt728x90, created 11/27/08 */
google_ad_slot = "3013612242";
google_ad_width = 728;
google_ad_height = 90;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script></p></div> <!-- /#page -->
<div id="footer"><br /><p>This website is updated often, so check back.</p>
<div class="module vcard" id="address">
<!--
hCard is a simple, open, distributed format for representing people, companies, organizations,
and places, using a 1:1 representation of vCard properties and values in semantic HTML or XHTML.
hCard is one of several open microformat standards suitable for embedding in HTML, XHTML, Atom,
RSS, and arbitrary XML.
You can learn more about it here: http://microformats.org/wiki/hcard
-->
<div class="org fn">Harmony Business Association, Inc.</div>
<div class="adr">
<div class="street-address">229 Mercer St </div>
<span class="locality">Harmony, Pa </span>,
<span class="region">US</span>
<span class="postal-code">16037</span>
</div>
<div><span class="tel">724-452-6220</span> phone</div>
</div>
<p class="copyright">
Copyright © 2010-11 <strong>Harmony Business Association,Inc. / (Courtesy of Information Architekt)</strong>. All Rights Reserved.
</p>
</div>
<!-- Site Meter -->
<script type="text/javascript" src="http://s41.sitemeter.com/js/counter.js?site=s41hbawebsite">
</script>
<noscript>
<a href="http://s41.sitemeter.com/stats.asp?site=s41hbawebsite" target="_top">
<img src="http://s41.sitemeter.com/meter.asp?site=s41hbawebsite" alt="Site Meter" border="0"/></a>
</noscript>
<!-- Copyright (c)2009 Site Meter -->
</body>
</html>
Eric Rohloff
Senior Advisor
20,266 posts
I bet it has something to do with the Lightbox script. Try disabling that to pinpoint the problem.
I can't hear what I'm looking at.
It's easy to overlook something you're not looking for.
This is a site I built for my work.(RSD)
http://esmansgreenhouse.com
This is a site I built for use in my job.(HTML Editor)
https://pestlogbook.com
This is my personal site used for testing and as an easy way to share photos.(RLM imported to RSD)
https://ericrohloff.com
It's easy to overlook something you're not looking for.
This is a site I built for my work.(RSD)
http://esmansgreenhouse.com
This is a site I built for use in my job.(HTML Editor)
https://pestlogbook.com
This is my personal site used for testing and as an easy way to share photos.(RLM imported to RSD)
https://ericrohloff.com
Jo Rice
Senior Advisor
10,951 posts
It's putting a little blue clickable arrow on the page when I view it in IE9 and highlight something. Goes dark as you say, but puts that little clickable on the page which is a functioning thing that must be inside a script as Eric mentions. It's giving you the option to do things when you click the arrow such as Map with Bing, Search with Google and a few others. Not sure if it's a script or a browser thing, but I see it too just so you have more info on it.
P.S. I also use Visual Lightbox and I don't have that issue with IE9 on my site at all. Find those scriptaculous files and see if it's in there maybe?
P.S.S. I would also suggest you resize your thumbnail size images to actually be thumbnail sizes. The images on your site load very slowly as you are actually loading full size images into a small little box. This means the full size image is still loading even though you're just seeing a small version of it. Always best to resize the images to the small sizes you need so they don't load so slowly. To get a good idea of what I mean here, right click any of your small images and choose to view the image or view background image (depending on how your browser words it) and you will see that it's actually going to show the large image. That large image is what is still being used even though you're only showing the small thumbnail on the site itself.
Hopefully that makes sense. A good image resizer is Ezthumbs by Fookes http://www.fookes.com/ezthumbs/ which lets you resize multiple images all at the same time.
P.S. I also use Visual Lightbox and I don't have that issue with IE9 on my site at all. Find those scriptaculous files and see if it's in there maybe?
P.S.S. I would also suggest you resize your thumbnail size images to actually be thumbnail sizes. The images on your site load very slowly as you are actually loading full size images into a small little box. This means the full size image is still loading even though you're just seeing a small version of it. Always best to resize the images to the small sizes you need so they don't load so slowly. To get a good idea of what I mean here, right click any of your small images and choose to view the image or view background image (depending on how your browser words it) and you will see that it's actually going to show the large image. That large image is what is still being used even though you're only showing the small thumbnail on the site itself.
Hopefully that makes sense. A good image resizer is Ezthumbs by Fookes http://www.fookes.com/ezthumbs/ which lets you resize multiple images all at the same time.
Eric Rohloff
Senior Advisor
20,266 posts
Try adding this to the head of your page.
<meta http-equiv="X-UA-Compatible" content="IE=8;FF=3;OtherUA=4" />
<meta http-equiv="X-UA-Compatible" content="IE=8;FF=3;OtherUA=4" />
I can't hear what I'm looking at.
It's easy to overlook something you're not looking for.
This is a site I built for my work.(RSD)
http://esmansgreenhouse.com
This is a site I built for use in my job.(HTML Editor)
https://pestlogbook.com
This is my personal site used for testing and as an easy way to share photos.(RLM imported to RSD)
https://ericrohloff.com
It's easy to overlook something you're not looking for.
This is a site I built for my work.(RSD)
http://esmansgreenhouse.com
This is a site I built for use in my job.(HTML Editor)
https://pestlogbook.com
This is my personal site used for testing and as an easy way to share photos.(RLM imported to RSD)
https://ericrohloff.com
Jo
Registered User
58 posts
Ok, thanks to all for trying to help me figure this out. I got really sick after going home and so I havent' been back online until today. I added the meta to the head of the page, but it didn't change anything. I have no idea how to deal with scripts, and I can't remember what I was working on when it changed, as I (bad I know) don't always double check the site online after I do something. Also, as a side thought if it will help, it does it on ALL the pages, not just one, so maybe something in the css files?
Jo
Registered User
58 posts
AHA! I deleted this:
<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
<script src="js/prototype.js" type="text/javascript"></script>
<script src="js/scriptaculous.js?load=effects,builder" type="text/javascript"></script>
<script src="js/lightbox.js" type="text/javascript"></script>
from the page and the darkness goes away!
SO NOW MY QUESTION IS....
What exactly does this script do? And can I just remove it from all the pages?
<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
<script src="js/prototype.js" type="text/javascript"></script>
<script src="js/scriptaculous.js?load=effects,builder" type="text/javascript"></script>
<script src="js/lightbox.js" type="text/javascript"></script>
from the page and the darkness goes away!
SO NOW MY QUESTION IS....
What exactly does this script do? And can I just remove it from all the pages?
Eric Rohloff
Senior Advisor
20,266 posts
It's your lightbox script and lightbox css to make images popup in a window over the main page.
http://lokeshdhakar.com/projects/lightbox2/
I think the prototype.js rides with the scriptaculous.
The scriptaculous is another js script for manipulating elements and creating affects on your page. here's some examples.
http://www.developersnippets.com/2009/01/20/60-stunning-scriptaculous-applications/
If you see any affects that don't work anymore that you had before you removed the scripts then you can always redo them.
http://lokeshdhakar.com/projects/lightbox2/
I think the prototype.js rides with the scriptaculous.
The scriptaculous is another js script for manipulating elements and creating affects on your page. here's some examples.
http://www.developersnippets.com/2009/01/20/60-stunning-scriptaculous-applications/
If you see any affects that don't work anymore that you had before you removed the scripts then you can always redo them.
I can't hear what I'm looking at.
It's easy to overlook something you're not looking for.
This is a site I built for my work.(RSD)
http://esmansgreenhouse.com
This is a site I built for use in my job.(HTML Editor)
https://pestlogbook.com
This is my personal site used for testing and as an easy way to share photos.(RLM imported to RSD)
https://ericrohloff.com
It's easy to overlook something you're not looking for.
This is a site I built for my work.(RSD)
http://esmansgreenhouse.com
This is a site I built for use in my job.(HTML Editor)
https://pestlogbook.com
This is my personal site used for testing and as an easy way to share photos.(RLM imported to RSD)
https://ericrohloff.com
Jo Rice
Senior Advisor
10,951 posts
Hiya Jo,
You can't just remove all that as that is part of your lightbox script if you want that to work.
Try this though and let me know what it does please?
<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
<!-- <script src="js/prototype.js" type="text/javascript"></script>
<script src="js/scriptaculous.js?load=effects,builder" type="text/javascript"></script> -->
<script src="js/lightbox.js" type="text/javascript"></script>
What I did is comment out the prototype and scriptaculous lines with the <!-- and --> on each end of it. That tells the browser not to read that line when it loads that page. Please try that and tell me if your issue is "still" fixed or if it comes back again.
You can't just remove all that as that is part of your lightbox script if you want that to work.
Try this though and let me know what it does please?
<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
<!-- <script src="js/prototype.js" type="text/javascript"></script>
<script src="js/scriptaculous.js?load=effects,builder" type="text/javascript"></script> -->
<script src="js/lightbox.js" type="text/javascript"></script>
What I did is comment out the prototype and scriptaculous lines with the <!-- and --> on each end of it. That tells the browser not to read that line when it loads that page. Please try that and tell me if your issue is "still" fixed or if it comes back again.
Jo
Registered User
58 posts
Joan and Eric,
I pasted the code onto the main page and the page does not have that dark happening anymore. I then replaced the old code on the Explore page with your code, and taa daa, no darkening there anymore either!!
I still don't understand what the script does, (and really probably should be using VSD!!) but now at least I have a fix for this and will replace this code on all my pages.
I will resize the images this week so they load better. My goal was to have a flash in place of the large image, but I haven't figured that out yet!! Don't really have lots of time to play with this stuff, maybe over the winter I'll get it all done.
Thanks again ,so much to you both for taking your precious time to help me figure this out.
I pasted the code onto the main page and the page does not have that dark happening anymore. I then replaced the old code on the Explore page with your code, and taa daa, no darkening there anymore either!!
I still don't understand what the script does, (and really probably should be using VSD!!) but now at least I have a fix for this and will replace this code on all my pages.
I will resize the images this week so they load better. My goal was to have a flash in place of the large image, but I haven't figured that out yet!! Don't really have lots of time to play with this stuff, maybe over the winter I'll get it all done.
Thanks again ,so much to you both for taking your precious time to help me figure this out.
Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.
