title: Firefox rendering gone WRONG - see something really weird
body: <p>I have the following is really weird. Bassically when I view the source of the page everything looks fine but the page looks all wrong. So I decided to take a look at the source using firebug and firebug shows a very different story. But if I refresh the page the page looks fine and the source and firebug match up.</p>
  
  <p>See below for what the source is but what firefox displays and firebug shows:</p>
  
  <p>View source shows this:</p>
  
  <pre><code>&lt;div class="mainpanel"&gt;  
      &lt;a class="thumbphoto" onclick="window.location=this.href;return false;" href="/Photograph/Narooma/Little-Rock"&gt; 
          &lt;div class="thumbphotoimage"&gt;&lt;table cellpadding="0" cellspacing="0"&gt;&lt;tr&gt;&lt;td&gt;&lt;img src="/Assets/Photos/Portfolio/BB001D_0.jpg" alt="Little Rock" /&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;&lt;/div&gt;
          &lt;div class="thumbphototitle"&gt;Little Rock&lt;/div&gt; 
      &lt;/a&gt;  
      &lt;a class="thumbphoto" onclick="window.location=this.href;return false;" href="/Photograph/Narooma/Split-Rock"&gt; 
          &lt;div class="thumbphotoimage"&gt;&lt;table cellpadding="0" cellspacing="0"&gt;&lt;tr&gt;&lt;td&gt;&lt;img src="/Assets/Photos/Portfolio/BB002D_0.jpg" alt="Split Rock" /&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;&lt;/div&gt;
          &lt;div class="thumbphototitle"&gt;Split Rock&lt;/div&gt;
      &lt;/a&gt;  
      &lt;a class="thumbphoto" onclick="window.location=this.href;return false;" href="/Photograph/Narooma/Rock-Pointer"&gt; 
          &lt;div class="thumbphotoimage"&gt;&lt;table cellpadding="0" cellspacing="0"&gt;&lt;tr&gt;&lt;td&gt;&lt;img src="/Assets/Photos/Portfolio/BB003D_0.jpg" alt="Rock Pointer" /&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;&lt;/div&gt;
          &lt;div class="thumbphototitle"&gt;Rock Pointer&lt;/div&gt;
      &lt;/a&gt;   
  &lt;/div&gt; 
  </code></pre>
  
  <p>But firebug shows this and it renders on the screen as if its like this:</p>
  
  <pre><code>&lt;div class="mainpanel"&gt;  
      &lt;a class="thumbphoto" onclick="window.location=this.href;return false;" href="/Photograph/Narooma/Little-Rock"&gt; 
          &lt;div class="thumbphotoimage"&gt;&lt;table cellpadding="0" cellspacing="0"&gt;&lt;tr&gt;&lt;td&gt;&lt;img src="/Assets/Photos/Portfolio/BB001D_0.jpg" alt="Little Rock" /&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;&lt;/div&gt;
          &lt;div class="thumbphototitle"&gt;Little Rock&lt;/div&gt; 
      &lt;/a&gt;  
  
      &lt;a class="thumbphoto" onclick="window.location=this.href;return false;" href="/Photograph/Narooma/Split-Rock"&gt;&lt;/a&gt; 
      &lt;div class="thumbphotoimage"&gt;&lt;table cellpadding="0" cellspacing="0"&gt;&lt;tr&gt;&lt;td&gt;&lt;img src="/Assets/Photos/Portfolio/BB002D_0.jpg" alt="Split Rock" /&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;&lt;/div&gt;
      &lt;a class="thumbphoto" onclick="window.location=this.href;return false;" href="/Photograph/Narooma/Split-Rock"&gt; &lt;/a&gt; 
      &lt;div class="thumbphototitle"&gt;
          &lt;a class="thumbphoto" onclick="window.location=this.href;return false;" href="/Photograph/Narooma/Split-Rock"&gt;Split Rock&lt;/a&gt;
      &lt;/div&gt; 
      &lt;a class="thumbphoto" onclick="window.location=this.href;return false;" href="/Photograph/Narooma/Split-Rock"&gt; &lt;/a&gt; 
  
      &lt;a class="thumbphoto" onclick="window.location=this.href;return false;" href="/Photograph/Narooma/Rock-Pointer"&gt; 
          &lt;div class="thumbphotoimage"&gt;&lt;table cellpadding="0" cellspacing="0"&gt;&lt;tr&gt;&lt;td&gt;&lt;img src="/Assets/Photos/Portfolio/BB003D_0.jpg" alt="Rock Pointer" /&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;&lt;/div&gt;
          &lt;div class="thumbphototitle"&gt;Rock Pointer&lt;/div&gt;
      &lt;/a&gt;   
  &lt;/div&gt;
  </code></pre>
  
  <p>The offending html is the middle a tag which goes crazy...</p>
  
  <p>Any ideas.</p>
  
  <p>Cheers
  Anthony</p>