Javascript-форум - Не работают кнопки в wysiwyg-редакторе

Делал редактор своими руками и столкнулся с тем, что одна функция не очень адекватно работает в IE. Я максимально сократил код, чтобы его можно было протестить в местной песочнице. HTML часть:

<html><head><style>
#but { 
 display: block; float:left;
 margin: 2px; padding: 0px;
 width:20px; heigh:20px;
 border: 2px #ccc solid;
 }
#colEdit {
 display: none; position: absolute;
 top: 0%; float: right;
 left: 300px; width: 100px;
 border: solid 1px black; 
 background: #fff;
 } 
#colEdit > div {
 float: left; margin: 2px;
 width: 15px; height: 15px; 
 border: solid 2px #ccc;
 }
</style></head><body>
<div id="but" class="but" onClick='javascript: coPan("colEdit", 1);' />Col</div>
<div id="colEdit" class="colEdit" >
<div style='background: #800000;' onclick='setSoC("c","#800000"); coPan("colEdit", 0);' ></div>
<div style='background: #ff0000;' onclick='setSoC("c","#ff0000"); coPan("colEdit", 0);' ></div>
<div style='background: #ffa500;' onclick='setSoC("c","#ffa500"); coPan("colEdit", 0);' ></div>
<div style='background: #ffff00;' onclick='setSoC("c","#ffff00"); coPan("colEdit", 0);' ></div>
<div style='background: #00ff00;' onclick='setSoC("c","#00ff00"); coPan("colEdit", 0);' ></div>
<div style='background: #00ffff;' onclick='setSoC("c","#00ffff"); coPan("colEdit", 0);' ></div>
<div style='background: #0000ff;' onclick='setSoC("c","#0000ff"); coPan("colEdit", 0);' ></div>
<div style='background: #000080;' onclick='setSoC("c","#000080"); coPan("colEdit", 0);' ></div>
<div style='background: #800080;' onclick='setSoC("c","#800080"); coPan("colEdit", 0);' ></div>
<div style='background: #000000;' onclick='setSoC("c","#000000"); coPan("colEdit", 0);' ></div>
<div style='background: #696969;' onclick='setSoC("c","#696969"); coPan("colEdit", 0);' ></div></div>
<iframe width='300 px' height='300 px' scrolling='auto' frameborder='no' src='#' id='frameId' name='frameId' style="border: 2px #000 solid;" ></iframe>

Скриптовая часть:

<script>
//Тут идет код, отвечающий за работу iframe, стандартный, без особенностей
var isGecko = navigator.userAgent.toLowerCase().indexOf("gecko") != -1;
var iframe = (isGecko) ? document.getElementById("frameId") : frames["frameId"];
var iWin = (isGecko) ? iframe.contentWindow : iframe.window;
var iDoc = (isGecko) ? iframe.contentDocument : iframe.document;
iHTML = "<html><head></head><body style='background-color: #fff;'></body></html>";
iDoc.open(); iDoc.write(iHTML);
iDoc.close(); iDoc.designMode = "on"; 
 
//Далее идут придуманные мною функции:
function coPan(n_panel,todo){ //Функция отвечает за закрытие\открытие разных div
  var n_pan = document.getElementById(n_panel).style;
  if(todo == 1){
    if(n_pan.display == 'block'){ n_pan.display = 'none'; }
    else { n_pan.display = 'block'; }
  } else { n_pan.display = 'none'; }
}

function setSoC(soc, socval) { //Функция отвечает за изменение цвета (и размера) шрифта
  iWin.focus();
  switch(soc){
    case("s"): socreq = "fontsize"; break;
    case("c"): socreq = "forecolor"; break; //Не обращайте внимания - это для функции изменения размера шрифта :)
	default: alert ("Ошибка!");}
  iWin.document.execCommand(socreq, null, socval);
}
</script></body></html>

Div but - это кнопка вызова панели выбора цвета.
Div colEdit - это панель выбора цвета, содержит в себе div-кнопки, при нажатии которых должен меняться выделенный текст.
В скрипте есть комментарии.

Проблема заключается в том, что при выделении в IE текста и последующей попытке сменить его цвет нифига не происходит. Но, кстати, если в IE просто выбрать цвет, то после курсора нормально печатается выбранным цветом. Проблема только со сменой цвета выделенного текста.

Помогите мне пожалуйста! Заранее спасибо :)