익스플로어 9를 기준으로 홈페이지를 만들어놨는데, 10으로 업데이트되면서 화면에 보이는게 깨져버리더라구요, 이전 질문글에서 답변해주신분이 css를 버젼별로 적용할수 있는 방법을 알려주셨는데, 이럴경우엔 css를 각 버젼에 맞게 2개를 작성해놓고 각 버젼에 맞게 사용해야되는건가요?

그리고 현재 주소가 http://mungge1523.cafe24.com/gnuboard4 여기인데 메인화면 맨윗쪽
오른쪽에 보시면 자바스크립트로 마우스오버했을시 배너 그림이 바뀌며 마우스동작이 없을경우 지정해놓은 시간에 따라 자동으로 차례대로 배너가 바뀌는 부분이 있습니다.
(10에서 들어오시는분들은 아마 메뉴가 안보이실겁니다)

이런경우는 자바스크립트를 10에맞게 다시 작성해야하는건가요? 원본은

<script type="text/javascript">

function
HotDealView(id){
this.section=$(id);
this.lefts=$('dt a',this.section);
this.rightPannel=$('dd li',this.section);
this.rights=$('a',this.rightPannel);

this.indexOnCurrent=1 - 1;

this.initFlag=false;
};

HotDealView.rightOnArrow='span';
HotDealView.rightOnArrowElementString='<span></span>';

HotDealView.prototype.init=function(){
if(this.initFlag){
return;
}
var $this=this;
$this.on(this.indexOnCurrent);
$this.rights.mouseover(function(){
var index=$this.rights.index(this);
$this.on(index);
});

this.rights.click(function(){
var $this=$(this);
cClickGo($this.attr('gubun'),$this.attr('loc'),$this.attr('sloc'),$this.attr('order'),$this.attr('href'));
return false;
});

this.lefts.click(function(){
var $this=$(this);
cClickGo($this.attr('gubun'),$this.attr('loc'),$this.attr('sloc'),$this.attr('order'),$this.attr('href'));
return false;
});
this.initFlag=true;
};

HotDealView.prototype.on=function(index,after){
index=index%this.rights.size();
this.lefts.removeClass('on').eq(index).addClass('on');
this.rights
.removeClass('on')
.siblings().filter(HotDealView.rightOnArrow).remove();


$(this.rights).eq(index).addClass('on').after($(HotDealView.rightOnArrowElementString));

this.indexOnCurrent=index;

if(typeof(after) == 'function'){
after(index,this);
}
return index;
};

function
RollingHotDealView(view){
this.view=view;
this.timesOnRolling=1 - 1;
this.timeForInterval=-1;

this.view.init();
};

RollingHotDealView.prototype.start=function(interval){
interval=interval||3000;
var $this=this;
$this.view.lefts.mouseover(function(){
$this.shutdown();
}).mouseout(function(){
$this.timeForInterval=setInterval(function(){
$this.view.on($this.timesOnRolling++);
},interval);
});
$this.view.rights.mouseover(function(){
$this.timesOnRolling=$this.view.rights.index(this)+1;
$this.shutdown();
}).mouseout(function(){
$this.timeForInterval=setInterval(function(){
$this.view.on($this.timesOnRolling++);
},interval);
});

$this.timeForInterval=setInterval(function(){
$this.view.on($this.timesOnRolling++);
},interval);
};

RollingHotDealView.prototype.shutdown=function(){
clearInterval(this.timeForInterval);
};

var rollingView=new RollingHotDealView(new HotDealView('#todayHotDeal'));
rollingView.start(2000);

</script>


<div id="todayHotDeal">
<dl>
<dt>
<a id="thd1"
href="/deal.pang?coupang=36344341&areacode=MB&order=1"
gubun="MAIN"
loc="HOT_DEALX6_LEFT"
sloc="1"
order="1"
class="on"  >
<img src="http://mungge1523.cafe24.com/gnuboard4/img/mainbanner/mainbanner1.jpg" width="482" height="290" border="0"  title="" alt="" />
</a>
<a id="thd2"
href="/deal.pang?coupang=36532370&areacode=MB&order=2"
gubun="MAIN"
loc="HOT_DEALX6_LEFT"
sloc="1"
order="2"
>
<img src="http://mungge1523.cafe24.com/gnuboard4/img/mainbanner/mainbanner2.jpg" width="482" height="290" border="0" title="" alt="" />
</a>
<a id="thd3"
href="/deal.pang?coupang=36289415&areacode=MB&order=3"
gubun="MAIN"
loc="HOT_DEALX6_LEFT"
sloc="1"
order="3"
>
<img src="http://mungge1523.cafe24.com/gnuboard4/img/mainbanner/mainbanner3.jpg" width="482" height="290" border="0" title="" alt="" />
</a>
<a id="thd4"
href="/deal.pang?coupang=36471193&areacode=MB&order=4"
gubun="MAIN"
loc="HOT_DEALX6_LEFT"
sloc="1"
order="4"
>
<img src="http://mungge1523.cafe24.com/gnuboard4/img/mainbanner/mainbanner4.jpg" width="482" height="290" border="0" title="" alt="" />
</a>
<p class="tsBand"></p>
</dt>
<dd>
<ul>
<li>
<a id="thdm1" class="x"
href="/deal.pang?coupang=36344341&areacode=MB&order=1"
gubun="MAIN"
loc="HOT_DEALX6_RIGHT"
sloc="1"
order="1"
class="on"  >
</a>
</li>
<li>
<a id="thdm2" class="x"
href="/deal.pang?coupang=36532370&areacode=MB&order=2"
gubun="MAIN"
loc="HOT_DEALX6_RIGHT"
sloc="1"
order="2"
>
</a>
</li>
<li>
<a id="thdm3" class="x"
href="/deal.pang?coupang=36289415&areacode=MB&order=3"
gubun="MAIN"
loc="HOT_DEALX6_RIGHT"
sloc="1"
order="3"
>
</a>
</li>
<li>
<a id="thdm4" class="x"
href="/deal.pang?coupang=36471193&areacode=MB&order=4"
gubun="MAIN"
loc="HOT_DEALX6_RIGHT"
sloc="1"
order="4"
>
</a>
</li>
    </ul>
</dd>
</dl>
</div>