Закладки

Здравствуйте сделал закладки
но вот проблема в Explore текст вылезает нижнию границу сайта и не "раздвигает основное поле" (смотрите ссылку там наглядно)
вопрос:

• 
  Это проблема СSS? Да, почему в нем и как править это? Нет, в чем еще может быть проблема?
  

код самих закладок:

HTML:

1.  
2. <form name="designForm">
3.     <div style="background: ButtonFace; padding: 1em;">
4.     <dl class="tabsheets">
5.         <dt>Закладка 1</dt>
6.         <dd>
7.             <div class="reducer">
8.                 <p>Содержимое закладки номер раз.</p>
9.                 <ul>
10.                     <li>item 1</li>
11.                     <li>item 2</li>
12.                     <li>item 3</li>
13.                 </ul>
14.                 <hr />
15.                 <table border="1" cellspacing="0" cellpadding="10">
16.                     <tr>
17.                         <td>table data</td>
18.                         <td>table data</td>
19.                         <td>table data</td>
20.                         <td>table data</td>
21.                     </tr>
22.                     <tr>
23.                         <td>table data</td>
24.                         <td>table data</td>
25.                         <td>table data</td>
26.                         <td>table data</td>
27.                     </tr>
28.                     <tr>
29.                         <td>table data</td>
30.                         <td>table data</td>
31.                         <td>table data</td>
32.                         <td>table data</td>
33.                     </tr>
34.                 </table>
35.                
36.             </div>
37.         </dd>
38.         <dt>Закладка 2</dt>
39.         <dd>
40.             <div class="reducer">
41.                 <p>Содержимое закладки номер два.</p>
42.                 <ol>
43.                     <li>item 1</li>
44.                     <li>item 2</li>
45.                     <li>item 3</li>
46.                     <li>item 4</li>
47.                     <li>item 5</li>
48.                     <li>item 6</li>
49.                 </ol>
50.             </div>
51.         </dd>
52.         <dt>Закладка 3</dt>
53.         <dd>
54.             <div class="reducer">
55.                 <p>Содержимое закладки номер три.</p>
56.             </div>
57.         </dd>
58.     </dl>
59. </div>
60. <script type="text/javascript">
61.     Make_Tabsheet();
62. </script>
63. </form>

css код
[css]
.tabsheets,
.tabsheets dt,
.tabsheets dd
{
margin: 0;
padding: 0;
width: auto;
border: none;
}
dl.tabsheets dt,
dl.tabsheets dd
{
background-color: ThreeDFace;
color: ButtonText;
border: 1px solid ThreeDFace;
border-top-color: ThreeDHighlight;
border-right-color: ThreeDShadow;
border-bottom-color: ThreeDShadow;
border-left-color: ThreeDHighlight;
}
.tabsheets
{
position: relative;
padding: 0; /* ­Ґ Ё§¬Ґ­пвм */
margin-bottom: 10px;
}
.tabsheets dt
{
float: left;
padding: 0.2em 1em;
cursor: default;
white-space: nowrap;
margin-top: 0.1em;
margin-bottom: -0.2em;
}
.tabsheets dt.active
{
background-color: ButtonHighlight;
color: ButtonText;
margin-top: 0;
padding-bottom: 0.3em;
}
.tabsheets dd
{
position: absolute;
width: 100%;
display: block;
left: 0;
margin: 1.6em 0 1em 0;
padding: 0; /* ­Ґ Ё§¬Ґ­пвм */
}
.tabsheets dd .reducer
{
margin: 1em;
}
.tabsheets dd.inactive
{
display: none;
}
.tabsheets dd.inactive iframe,
.tabsheets dd.inactive select,
.tabsheets dd.inactive textarea,
.tabsheets dd.inactive input
{
display: none ! important;
}
.tabsheets dd.active
{
display: block;
}
.tabsheets .reducer
{
margin: 1em;
}
[/css]
функция java:
[js]
function Make_Tabsheet(){
var i, j, k, eDD, iMax_height, iDT_height, aeDL_child, sDD_inner_HTML
var bFirst_tab = true
var aeDl = document.getElementsByTagName( "DL" )

for( i = 0 ; i < aeDl.length ; i++ ){
if( aeDl.className == "tabsheets" ){
aeDL_child = aeDl.childNodes
iMax_height = 0
for( j = 0 ; j < aeDL_child.length ; j++ ){
if( aeDL_child[j].nodeName == "DT" ){
iDT_height = aeDL_child[j].offsetHeight
aeDL_child[j].unselectable = true
aeDL_child[j].onmousedown = Switch_sheet
eDD = aeDL_child[j]
while( eDD.nextSibling ){
eDD = eDD.nextSibling
if( eDD.nodeName == "DD" ){
if( eDD.offsetHeight > iMax_height ){
iMax_height = eDD.offsetHeight
}
if( !bFirst_tab ){
eDD.className = "inactive"
}else{
aeDL_child[j].className = "active"
}
bFirst_tab = false
break
}
}
}
}
aeDl.style.height = (iMax_height + iDT_height) * 1 + "px"
for( j = 0 ; j < aeDL_child.length ; j++ ){
if( aeDL_child[j].nodeName == "DD" ){
aeDL_child[j].style.height = iMax_height + "px"
}
}
}
return true
}
}

function Switch_sheet( e ){
var eTab = e ? e.target : window.event.srcElement
if( eTab.nodeType == 3){
eTab = eTab.parentNode
}
var eSheet = eTab
while( eSheet.nextSibling ){
eSheet = eSheet.nextSibling
if( eSheet.nodeName == "DD" ){
break
}
}

if( eSheet.className == "inactive" ){
eTab.className = "on"
var aeDL_child = eTab.parentNode.childNodes
for( var i = 0 ; i < aeDL_child.length ; i++ ){
if( aeDL_child.nodeName == "DT" && aeDL_child.className != "on" ){
aeDL_child.className = ""
}else if( aeDL_child.nodeName == "DD" ){
aeDL_child.className = "inactive"
}
}
eSheet.className = "active"
eTab.className = "active"
}
return false
}
[/js]

 

возможно проблема в position
[css]
.tabsheets dd
{
position: absolute;
width: 100%;
display: block;
left: 0;
margin: 1.6em 0 1em 0;
padding: 0; /* ­Ґ Ё§¬Ґ­пвм */
}[/css]