title: HTML anchors in iframe not working in Chrome or Safari
body: <p>First off I do not consider myself to be anything more than a hack at HTML/CSS.  With that said , I am having a problem with the attached code in Chrome and Safari (Firefox and Opera work perfectly fine). The problem is clicking on one of the help icons in the center iframe should send the right iframe to the appropriate anchor, but it does not.  I would like the help topics to move from topic to topic without a scroll bar. </p>
  
  <p>index.html</p>
  
  <pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
  &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
  &lt;head&gt;
  &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt;
  &lt;title&gt;Lorem ipsum dolor&lt;/title&gt;
  &lt;link href="apstyle.css" rel="stylesheet" type="text/css" /&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;div class="Body"&gt;
      &lt;div class="leftnav"&gt;&lt;p&gt;Something&lt;/p&gt;&lt;/div&gt;
      &lt;div class="main"&gt;&lt;iframe src="Setup.html" name="main" id="main" width="450" height="100%" frameborder="0"&gt;&lt;/iframe&gt;&lt;/div&gt;
      &lt;div class="right"&gt;&lt;iframe src="Help.html" name="help" id="help" width="235" height="100%" frameborder="0" scrolling="no"&gt;&lt;/iframe&gt;&lt;/div&gt;
  &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Setup.html</p>
  
  <pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
  &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
  &lt;head&gt;
  &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt;
  &lt;link href="apstyle.css" rel="stylesheet" type="text/css" /&gt;
  &lt;title&gt;&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;div class="options"&gt;
      &lt;p&gt;Get Help #2
      &lt;a href="Help.html#help2" target="help"&gt;
          &lt;img src="helpicon16.png" alt="help2" class="help_icon"/&gt;
      &lt;/a&gt;
      &lt;/p&gt;
      &lt;p&gt;Get Help #3
      &lt;a href="Help.html#help3" target="help"&gt;
          &lt;img src="helpicon16.png" alt="help3" class="help_icon"/&gt;
      &lt;/a&gt;
      &lt;/p&gt;
  &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>and the css</p>
  
  <pre><code>@charset "UTF-8";
  
  .Body {
  float : left;
  clear : both;
  width : 100%;
  margin-top : 5px;
  margin-bottom : 5px;
  }
  
  .leftnav {
  float : left;
  height : 500px;
  width : 155px;
  margin-left : 25px;
  background-color : #eae6e3;
  }
  
  .main {
  float : left;
  height : 500px;
  width : 445px;
  margin-left : 5px;
  }
  .right {
  clear : right;
  float : left;
  height : 500px;
  width : 185px;
  margin-left : 5px;
  }
  
  iframe.help {
  overflow : hidden;
  }
  
  div.spacer {
  height: 1000px;
  }
  </code></pre>
  
  <p>Any help would be greatly appreciated</p>
  
  <p>I suppose adding the Help.html might make this easier to replicate</p>
  
  <p>Help.html</p>
  
  <pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
  &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
  &lt;head&gt;
  &lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/&gt;
  &lt;title&gt;Help&lt;/title&gt;
  &lt;link href="apstyle.css" rel="stylesheet" /&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;div class="HelpPage"&gt;
  &lt;h2&gt;Help Stuff&lt;/h2&gt;
  
  &lt;a id="help1"&gt;&lt;/a&gt;
  &lt;h3&gt;Help #1&lt;/h3&gt;
  &lt;p&gt;This is help #1&lt;/p&gt;
  &lt;div class="spacer"&gt;&lt;/div&gt;
  
  &lt;a id="help2"&gt;&lt;/a&gt;
  &lt;h3&gt;Help #2&lt;/h3&gt;
  &lt;p&gt;This is help #2&lt;/p&gt;
  &lt;div class="spacer"&gt;&lt;/div&gt;
  
  &lt;a id="help3"&gt;&lt;/a&gt;
  &lt;h3&gt;Help #3&lt;/h3&gt;
  &lt;p&gt;This is help #3&lt;/p&gt;
  &lt;div class="spacer"&gt;&lt;/div&gt;
  
  &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>