Hi,
I'm using IE6. I'm battling strange behavior in IE when using
contenteditable. I'm using tables with 3 rows and I want the middle
row to be narrow (3px). I can trick IE to make already existing table
rows become narrow by using the old 1px images trick. However when
dealing with dynamically created tables this doesn't work.
Run this code and press the buttons, and you will see what I mean.
(You may need to edit the scripting part in order to make sure that
all strings are in one line)
Any solutions?
Thanks for your time
Helgi Borg
============
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1">
<style type="text/css">
<!--
table {
margin: 8px;
border: 0;
}
..textbox {
padding: 4px;
background-color: gray;
}
..threepix_red_ruler {
height: 3px;
background-color: red;
}
img {
margin: 0px;
border: 0px;
}
-->
</style>
<script>
function insertTable() {
var t = document.createElement("table");
t.setAttribute("cellspacing", 0); t.setAttribute("cellpadding", 0);
t.setAttribute("width", "190px");
var tb = document.createElement("tbody");
var tr1 = document.createElement("tr");
var tr2 = document.createElement("tr");
var tr3 = document.createElement("tr");
var td1 = document.createElement("td");
var td2 = document.createElement("td"); td2.className =
"threepix_red_ruler";
var td3 = document.createElement("td"); td3.className = "textbox";
td1.innerHTML = '<img
src="http://www.microsoft.com/windows/IE/images/homepage/IE_home_SP2_photo.jpg"
border="0" alt="">';
td2.innerHTML = '<img src="none.gif" height="1px" width="1px">';
td3.innerHTML = "How can I make the second table row 3px high in
dynamically generated tables ???";
t.appendChild(tb);
tr1.appendChild(td1); tb.appendChild(tr1);
tr2.appendChild(td2); tb.appendChild(tr2);
tr3.appendChild(td3); tb.appendChild(tr3);
var ed = document.getElementById("edit");
var newNode = ed.appendChild(t);
}
function insertEmptyImg() {
var td = document.getElementById("row2");
td.innerHTML = '<img src="none.gif" height="1px" width="1px">';
}
</script>
</head>
<body>
<button onclick="insertTable()">Press to insert new table</button>
<br/><button onclick="insertEmptyImg()">Fix row in first
table</button>
<div id="edit" contenteditable>
<table id="table" cellspacing="0" cellpadding="0" width="190px">
<tr><td><img src="http://www.microsoft.com/windows/IE/images/homepage/IE_home_SP2_photo.jpg"
border="0" alt=""></td></tr>
<tr><td id="row2" class="threepix_red_ruler"></td></tr>
<tr><td class="textbox">If I don't insert empty img in the second
table row it will be higher than 3px. Why? Use the second button to
fix the row.</td></tr>
</table>
</div>
</body>
</html>
Similar Threads
