Here is the actual html:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <meta http-equiv="Content-type" content="text/html;charset=UTF-8" /> <title></title> <script type="text/javascript"> function changeTitle(title) { document.title = title; } function addCategory(name, img) { oT = document.getElementsByTagName("table")[0]; newTr = document.getElementsByTagName("tr")[0]; newTd = document.createElement("td"); newTd.setAttribute("tabindex", 0) newTd.className = "category_td"; // we need a <p> around the img so that we can align it newTextAroundImg = document.createElement("p"); newImg = document.createElement("img"); newImg.src = img; newImg.setAttribute("width", ${icon_size}) newImg.setAttribute("height", ${icon_size}) newTextAroundImg.appendChild(newImg) newText = document.createElement("p"); newText.align = "center"; click_cb = 'changeTitle("call:on_category_clicked:' + name + '");'; newTd.setAttribute('onclick', click_cb); key_cb = 'if (event.which == 13) { changeTitle("call:on_category_clicked:' + name + '"); };' newTd.setAttribute('onkeydown', key_cb); newText.appendChild(document.createTextNode(name)) newTd.appendChild(newTextAroundImg); newTd.appendChild(newText); newTr.appendChild(newTd); oT.appendChild(newTr); } </script> <style type="text/css"> body {background-color:#b6bdc4; margin: 0; padding: 1em; color:#000;} h2 { background-color: #7D91aa; border-style: solid; border-width: 0 0 1px 0; border-color: #E2E7EC #404a57 #404a57 #E2E7EC; color: #fff; font-size: 100%; font-weight: normal; padding: 0.25em 0.5em; margin: 0; text-shadow: #404a57 0 -1px 1px; } /* debug border */ /* .category_td {border-width:1px;border-style:solid;} */ /* fixed width does not work, it does not ellipsis but overflows the box */ /* .category_td {padding:8px; margin:8px; width:6em; display:inline-block; text-overflow: ellipsis;} */
.category_td { padding: 0 8px; display:inline-block; text-overflow: ellipsis; vertical-align: top; width: 8em !important; } .category_td:hover {cursor: pointer;} .category_td:active {background-color: #7D91aa;}
.category_td p { font-size:90%; text-align:center; } </style> </head>
<body> <h2>$header</h2> <table> <tr></tr> </table> </body> </html>
Here is the actual html:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" www.w3. org/TR/ xhtml1/ DTD/xhtml1- transitional. dtd"> www.w3. org/1999/ xhtml" xml:lang="en" lang="en"> "Content- type" content= "text/html; charset= UTF-8" /> javascript" > getElementsByTa gName(" table") [0]; getElementsByTa gName(" tr")[0] ; createElement( "td"); setAttribute( "tabindex" , 0) ndImg = document. createElement( "p"); createElement( "img"); setAttribute( "width" , ${icon_size}) setAttribute( "height" , ${icon_size}) ndImg.appendChi ld(newImg) createElement( "p"); "call:on_ category_ clicked: ' + name + '");'; setAttribute( 'onclick' , click_cb); "call:on_ category_ clicked: ' + name + '"); };' setAttribute( 'onkeydown' , key_cb); appendChild( document. createTextNode( name)) appendChild( newTextAroundIm g); appendChild( newText) ; appendChild( newTd); appendChild( newTr); color:# b6bdc4; margin: 0; padding: 1em; color:#000;} d-color: #7D91aa; width:1px; border- style:solid; } */ inline- block; text-overflow: ellipsis;} */
"http://
<html xmlns="http://
<head>
<meta http-equiv=
<title></title>
<script type="text/
function changeTitle(title) {
document.title = title;
}
function addCategory(name, img) {
oT = document.
newTr = document.
newTd = document.
newTd.
newTd.className = "category_td";
// we need a <p> around the img so that we can align it
newTextArou
newImg = document.
newImg.src = img;
newImg.
newImg.
newTextArou
newText = document.
newText.align = "center";
click_cb = 'changeTitle(
newTd.
key_cb = 'if (event.which == 13) { changeTitle(
newTd.
newText.
newTd.
newTd.
newTr.
oT.
}
</script>
<style type="text/css">
body {background-
h2 {
backgroun
border-style: solid;
border-width: 0 0 1px 0;
border-color: #E2E7EC #404a57 #404a57 #E2E7EC;
color: #fff;
font-size: 100%;
font-weight: normal;
padding: 0.25em 0.5em;
margin: 0;
text-shadow: #404a57 0 -1px 1px;
}
/* debug border */
/* .category_td {border-
/* fixed width does not work, it does not ellipsis but overflows the box */
/* .category_td {padding:8px; margin:8px; width:6em; display:
.category_td { inline- block; overflow: ellipsis; align: top; td:hover {cursor: pointer;} td:active {background-color: #7D91aa;}
padding: 0 8px;
display:
text-
vertical-
width: 8em !important;
}
.category_
.category_
.category_td p { font-size:90%; text-align:center; }
</style>
</head>
<body>
<h2>$header</h2>
<table>
<tr></tr>
</table>
</body>
</html>