I am having an issue with a redesign I am working on for my website. I am implementing HTML5 and CSS3 elements, and I am also trying to keep cross-browser compatibility. For the most part, things are looking and working great, the HTML is valid according to the W3C and life is good, but for one thing: IE9. I can not tell if its the use of gradients in the background (IE9 uses SVG, which I am not very familiar with), if its linked to the Google Search Tool, or some other script on the page. Below is an example of the HTML (I am using Dreamweaver CS5):
Hopefully for resolution, the same error displays, but in IE9, the background is cutting off the lower portion of the 'main' section. It seems to be happening right after the 'aside' section, but I don't know if this is a coincidence or not. If it helps, when I preview the page, it says 'Internet Explorer restricted this webpage from running scripts or ActiveX controls.' I'm not sure if this means its just on my computer, or if this is something that everyone will see. Any help on this is greatly appreciated.!
HTML:
<!DOCTYPE HTML>
<html><!-- InstanceBegin template="/Templates/main.dwt" codeOutsideHTMLIsLocked="false" -->
<head>
<meta charset="utf-8">
<!-- InstanceBeginEditable name="doctitle" -->
<title>Science.Better</title>
<!-- InstanceEndEditable -->
<link href="CSS/reset.css" rel="stylesheet" type="text/css">
<link href="CSS/text.css" rel="stylesheet" type="text/css">
<link href="CSS/style.css" rel="stylesheet" type="text/css">
<link href="@font/stylesheet.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="http://www.google.com/cse/style/look/default.css" type="text/css">
<link rel="author" href="https://plus.google.com/111425749670872672685">
<!-- InstanceBeginEditable name="head" -->
<!-- InstanceEndEditable -->
</head>
<body style="height: 100%">
<div class="contents">
<header class="contents">
<!-- InstanceBeginEditable name="Header Image" --><img src="img/black-and-white-aerial-photo-of-broken-point.jpg" alt="Black and white image of Broken Point"><!-- InstanceEndEditable -->
<h1>Science.Better.</h1>
<nav>
<ul>
<li><a href="index.html" class="selected">Home</a></li>
<li><a href="mailto:[email protected]">Contact</a></li>
<li><a href="#">FAQ</a></li>
</ul>
</nav>
</header>
<nav class="menu">
<ul>
<li><a href="astronomy.html">Astronomy</a></li>
<li><a href="biology.html">Biology</a></li>
<li><a href="chemistry.html">Chemistry</a></li>
<li><a href="geology.html">Geology</a></li>
<li><a href="math.html">Math</a></li>
<li><a href="socialscience.html">Social Science</a></li>
<li><a href="technology.html">Technology</a></li>
</ul>
</nav>
<!-- InstanceBeginEditable name="Main Contents" -->
<section class="main">
<h1>Science.Better</h1>
<p>This website is dedicated to bringing you the most up-to-date information about science. As you might be able to tell, this is a work in progress, and it will take a considerable amount of time before everything is all together, and in order. If you'd like to make any suggestions, corrections, or comments, I'd love to hear from you and you can reach me at <a href="mailto:[email protected]">WWDD</a>.</p>
<p>This site is designed for use by both lay-people and experts, so in the attempt to keep everything as easy to understand as possible, I will use a number of methods to assist the reader if needed. Throughout this site, all terms will (eventually) be listed in the <a href="dictionary.html">Dictionary</a>. However, most terms will also feature an acronym tag definition, which will look like this: <abbr title="The study of Life">Biology</abbr>. The way an acronym tag works is when you use your mouse and position it over the highlighted word, a brief definition or description will pop up and last for a few seconds. Most browsers support this feature, but if they do not, you can also find the term listed on the right, which will link you to the glossary.</p>
<p>There will also be another version of the acronym tag, and this will apply to scientific names of different things. An example of this will look like <abbr title="'Homo' meaning 'man' and 'sapiens' meaning 'thinking.' Thinking man.">Homo sapiens</abbr>. I hope that both of these features will be helpful.</p>
<p>One other important aspect to this site will be found on the left hand side: Topical Books. Whenever possible, I will try to provide a picture of, and a link to book titles that detail the topic in greater detail. I have a few reasons for doing this. Firstly, there is a lot of information available in literature that can probably explain concepts in greater detail than I can; after all, I'm not an expert. I also do not expect you to take my word for anything, or at least take it as 'gospel truth.' I encourage anyone visiting this site to read the suggested titles so they can clear up issues on their own; this site is only here as a general information site. Thirdly, many other science-related sites do not feature a section where an interested party can read more about it. My goal here is to have a more informed readership than other sites.</p>
<p>If you have any suggestions which can make this site even more accessible or user friendly, feel free to let <a href="mailto:[email protected]">me</a> know.</p>
</section>
<!-- InstanceEndEditable -->
<aside class="follow">
<div id="cse" style="width: 100%;">Loading</div>
<script src="http://www.google.com/jsapi" type="text/javascript"></script>
<script type="text/javascript">
google.load('search', '1', {language : 'en'});
google.setOnLoadCallback(function() {
var customSearchControl = new google.search.CustomSearchControl(
'009232046336782450556:vg5gc2qha2hf');
customSearchControl.setResultSetSize(google.search.Search.FILTERED_CSE_RESULTSET);
customSearchControl.draw('cse');
}, true);
</script>
<h1>Follow Me</h1>
<p><a href="http://www.facebook.com/Science.Better"><img src="img/facebook.png" alt="facebook logo"></a>
<a href="https://twitter.com/wwdd00"><img src="img/Twitter-32.png" alt="twitter icon"></a>
<a href="http://sciencebetter.wordpress.com/"><img src="img/wordpress.png" alt="Wordpress logo"></a>
<a href="https://plus.google.com/111425749670872672685?prsrc=3" style="text-decoration:none;"><img src="https://ssl.gstatic.com/images/icons/gplus-32.png" alt="" style="border:0;width:32px;height:32px;"/></a></p>
<!-- InstanceBeginEditable name="Aside" -->
<h1>Science.Better Wiki</h1>
<p><a href="http://sciencebetter.wikispaces.com/">ScienceBetter Wiki</a></p>
<h1>Topical Books</h1>
<p><a href="eldredgebooks.html#triumpheld"><img src="img/5361711.gif" alt="'Triumph of Evolution' by Niles Eldredge" /></a></p>
<p>Triumph of Evolution</p>
<!-- InstanceEndEditable -->
</aside>
<article class="contents leftarticle">
<!-- InstanceBeginEditable name="Left Article" -->
<h2>Recently Updated</h2>
<h3>Genetics</h3>
<p>Welcome to the Genetics-Related links page. These links are provided as additional information to go along with the topics covered on my website. At the time of this posting, the links are all in working order, but if you come across one that doesn't work, please contact me.</p>
<a href="#">Read more...</a>
<!-- InstanceEndEditable -->
</article>
<article class="contents rightarticle">
<!-- InstanceBeginEditable name="Right Article" -->
<h2>Recently Updated</h2>
<h3>Ecology</h3>
<p>Welcome to the Ecology links page. These links are provided as additional information to go along with the topics covered on my website. At the time of this posting, the links are all in working order, but if you come across one that doesn't work, please contact me...</p>
<a href="#">Read more...</a>
<!-- InstanceEndEditable -->
</article>
<footer class="contents"><!-- InstanceBeginEditable name="Footer" -->
<h3>Footer</h3>
<p>Contact info, thanks, etc</p>
<p>Special Thanks to <a href="http://www.ipage.com/ipage/index.html">iPage</a> for hosting this site.</p>
<!-- InstanceEndEditable -->
</footer>
</div>
</body>
<!-- InstanceEnd --></html>Hopefully for resolution, the same error displays, but in IE9, the background is cutting off the lower portion of the 'main' section. It seems to be happening right after the 'aside' section, but I don't know if this is a coincidence or not. If it helps, when I preview the page, it says 'Internet Explorer restricted this webpage from running scripts or ActiveX controls.' I'm not sure if this means its just on my computer, or if this is something that everyone will see. Any help on this is greatly appreciated.!
Last edited:
