Html interpretation for different browsers

Html interpretation for different browsers

Recently, I downloaded a JQuery plugin for animation on tabbed content of
a html page. The html defined for Tabs and their respective contents and
animation is obtained by the JQuery. here is a sample html of my tabs.
<ul>
<li><a href="#two">PED</a></li>
<li><a href="#Five">SPDE</a></li>
<li><a href="#one">SDE</a></li>
</ul>
<div class="box-wrapper">
<div id="Seven" class="content-box">
<div class="col-one col">
<a href="" target="_blank" title="Click to go to
Advanced-Design Team Site">
<img src=""/></a>
</div>
<div class="col-two col">
<h3>
<a href="" target="_blank" style="color:
Black; text-decoration: underline"
title="Click to go to Advanced-Design Team
Site">
Advanced Design</a></h3>
<p>
Welcome to Advanced Design Group.</p>
</div>
There are remaining divs as coded above.
I displayed this tabbed html page in another page using an iframe tag.When
I click on any one of the tabs the page auto snaps to the starting of the
content page. This doesn't happen in Firefox, but it displays the content
as expected without snapping. In IE and Chrome, the page snaps to the
starting of the respective tab. We need to re scroll to the top of the
page.
Not sure why this happens, Is there any issue in the way browsers
interpret the HTML or my HTML code is wrong? I don't see any other way
except to use the approach. I know this is causing the issue but is there
any way out to make the page not snap in IE or chrome or do I need to
develop my page with tabbed content without using the approach I did now.
this is kind of Road end for me. Dont know where to go.
Any pointers would be of great help. Thanks,