<html xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:w="urn:schemas-microsoft-com:office:word" xmlns:m="http://schemas.microsoft.com/office/2004/12/omml" xmlns="http://www.w3.org/TR/REC-html40">
<head>
<meta http-equiv=Content-Type content="text/html; charset=us-ascii">
<meta name=Generator content="Microsoft Word 12 (filtered medium)">
<style>
<!--
/* Font Definitions */
@font-face
{font-family:"Cambria Math";
panose-1:2 4 5 3 5 4 6 3 2 4;}
@font-face
{font-family:Calibri;
panose-1:2 15 5 2 2 2 4 3 2 4;}
@font-face
{font-family:Tahoma;
panose-1:2 11 6 4 3 5 4 4 2 4;}
/* Style Definitions */
p.MsoNormal, li.MsoNormal, div.MsoNormal
{margin:0cm;
margin-bottom:.0001pt;
font-size:11.0pt;
font-family:"Calibri","sans-serif";}
a:link, span.MsoHyperlink
{mso-style-priority:99;
color:blue;
text-decoration:underline;}
a:visited, span.MsoHyperlinkFollowed
{mso-style-priority:99;
color:purple;
text-decoration:underline;}
p.MsoAcetate, li.MsoAcetate, div.MsoAcetate
{mso-style-priority:99;
mso-style-link:"Balloon Text Char";
margin:0cm;
margin-bottom:.0001pt;
font-size:8.0pt;
font-family:"Tahoma","sans-serif";}
span.EmailStyle17
{mso-style-type:personal-compose;
font-family:"Calibri","sans-serif";
color:windowtext;}
span.BalloonTextChar
{mso-style-name:"Balloon Text Char";
mso-style-priority:99;
mso-style-link:"Balloon Text";
font-family:"Tahoma","sans-serif";}
.MsoChpDefault
{mso-style-type:export-only;}
@page Section1
{size:612.0pt 792.0pt;
margin:70.85pt 70.85pt 70.85pt 70.85pt;}
div.Section1
{page:Section1;}
-->
</style>
<!--[if gte mso 9]><xml>
<o:shapedefaults v:ext="edit" spidmax="1026" />
</xml><![endif]--><!--[if gte mso 9]><xml>
<o:shapelayout v:ext="edit">
<o:idmap v:ext="edit" data="1" />
</o:shapelayout></xml><![endif]-->
</head>
<body lang=NL link=blue vlink=purple>
<div class=Section1>
<p class=MsoNormal><span lang=EN-US>Hi all,<o:p></o:p></span></p>
<p class=MsoNormal><span lang=EN-US><o:p> </o:p></span></p>
<p class=MsoNormal><span lang=EN-US>I’m using the new label functionality
and modified it a bit to show a colored border around the label. This is
successfully within IE6, but within IE7 the value of textbox.clientWidth is
always 2 so my border is a 2px wide rectangle.<o:p></o:p></span></p>
<p class=MsoNormal><span lang=EN-US>The clientHeight is correctly set so I now
have a label of 14px high and 2 px wide.<o:p></o:p></span></p>
<p class=MsoNormal><span lang=EN-US>Can somebody explain me why clientWidth is
not working in IE7?<o:p></o:p></span></p>
<p class=MsoNormal><span lang=EN-US><o:p> </o:p></span></p>
<p class=MsoNormal><span lang=EN-US>Heres my adjusted code for the VML
renderer:<o:p></o:p></span></p>
<p class=MsoNormal><span lang=EN-US>var label = this.nodeFactory(featureId +
this.LABEL_ID_SUFFIX, "olv:rect");<o:p></o:p></span></p>
<p class=MsoNormal><span lang=EN-US>var textbox = this.nodeFactory(featureId +
this.LABEL_ID_SUFFIX + "_textbox", "olv:textbox");<o:p></o:p></span></p>
<p class=MsoNormal><span lang=EN-US> <o:p></o:p></span></p>
<p class=MsoNormal><span lang=EN-US>var resolution = this.getResolution();<o:p></o:p></span></p>
<p class=MsoNormal><span lang=EN-US>label.style.left = (location.x/resolution -
this.offset.x).toFixed() + "px";<o:p></o:p></span></p>
<p class=MsoNormal><span lang=EN-US>label.style.top = (location.y/resolution -
this.offset.y).toFixed() + "px";<o:p></o:p></span></p>
<p class=MsoNormal><span lang=EN-US>label.style.flip = "y";<o:p></o:p></span></p>
<p class=MsoNormal><span lang=EN-US>textbox.innerText = style.label;<o:p></o:p></span></p>
<p class=MsoNormal><span lang=EN-US><o:p> </o:p></span></p>
<p class=MsoNormal><span lang=EN-US>if (style.fillColor) {textbox.style.color =
style.fontColor;}<o:p></o:p></span></p>
<p class=MsoNormal><span lang=EN-US>if (style.fontFamily) {textbox.style.fontFamily
= style.fontFamily;}<o:p></o:p></span></p>
<p class=MsoNormal><span lang=EN-US>if (style.fontSize) {textbox.style.fontSize
= style.fontSize;}<o:p></o:p></span></p>
<p class=MsoNormal><span lang=EN-US>if (style.fontWeight) {textbox.style.fontWeight
= style.fontWeight;}<o:p></o:p></span></p>
<p class=MsoNormal><span lang=EN-US>textbox.style.whiteSpace =
"nowrap";<o:p></o:p></span></p>
<p class=MsoNormal><span lang=EN-US>textbox.inset =
"0px,0px,0px,0px";<o:p></o:p></span></p>
<p class=MsoNormal><span lang=EN-US><o:p> </o:p></span></p>
<p class=MsoNormal><span lang=EN-US>if(!label.parentNode) {<o:p></o:p></span></p>
<p class=MsoNormal><span lang=EN-US> label.appendChild(textbox);<o:p></o:p></span></p>
<p class=MsoNormal><span lang=EN-US> this.textRoot.appendChild(label);<o:p></o:p></span></p>
<p class=MsoNormal><span lang=EN-US>}<o:p></o:p></span></p>
<p class=MsoNormal><span lang=EN-US><o:p> </o:p></span></p>
<p class=MsoNormal><span lang=EN-US>var align = style.labelAlign ||
"cm";<o:p></o:p></span></p>
<p class=MsoNormal><span lang=EN-US>var xshift = textbox.clientWidth *(OpenLayers.Renderer.VML.LABEL_SHIFT[align.substr(0,1)]);<o:p></o:p></span></p>
<p class=MsoNormal><span lang=EN-US>if (style.pointRadius) {xshift +=
style.pointRadius * (OpenLayers.Renderer.VML.LABEL_RADIUS_SHIFT[align.substr(0,1)]);}<o:p></o:p></span></p>
<p class=MsoNormal><span lang=EN-US>var yshift = textbox.clientHeight * (OpenLayers.Renderer.VML.LABEL_SHIFT[align.substr(1,1)]);<o:p></o:p></span></p>
<p class=MsoNormal><span lang=EN-US>if (style.pointRadius) {yshift +=
style.pointRadius * (OpenLayers.Renderer.VML.LABEL_RADIUS_SHIFT[align.substr(1,1)]);}<o:p></o:p></span></p>
<p class=MsoNormal><span lang=EN-US>yshift -= index * (textbox.clientHeight);<o:p></o:p></span></p>
<p class=MsoNormal><span lang=EN-US>label.style.left =
parseInt(label.style.left)-xshift+"px";<o:p></o:p></span></p>
<p class=MsoNormal><span lang=EN-US>label.style.top =
parseInt(label.style.top)+yshift+"px";<o:p></o:p></span></p>
<p class=MsoNormal><span lang=EN-US>label.style.width = textbox.clientWidth +
((style.labelStrokeWidth) ? style.labelStrokeWidth : 0);<o:p></o:p></span></p>
<p class=MsoNormal><span lang=EN-US>label.style.height = textbox.clientHeight +
((style.labelStrokeWidth) ? style.labelStrokeWidth : 0);<o:p></o:p></span></p>
<p class=MsoNormal><span lang=EN-US> <o:p></o:p></span></p>
<p class=MsoNormal><span lang=EN-US>if (style.labelStrokeColor) { <o:p></o:p></span></p>
<p class=MsoNormal><span lang=EN-US> label.setAttribute("strokecolor",
style.labelStrokeColor); <o:p></o:p></span></p>
<p class=MsoNormal><span lang=EN-US> label.setAttribute("strokeweight",
style.labelStrokeWidth + "px"); <o:p></o:p></span></p>
<p class=MsoNormal><span lang=EN-US>} else {label.setAttribute("stroked",
"false");}<o:p></o:p></span></p>
<p class=MsoNormal><span lang=EN-US>var strokes =
label.getElementsByTagName("stroke");<o:p></o:p></span></p>
<p class=MsoNormal><span lang=EN-US>var stroke = (strokes.length == 0) ? null :
strokes[0];<o:p></o:p></span></p>
<p class=MsoNormal><span lang=EN-US>if (!style.labelStrokeColor) {<o:p></o:p></span></p>
<p class=MsoNormal><span lang=EN-US> if (stroke) {label.removeChild(stroke);}
else {<o:p></o:p></span></p>
<p class=MsoNormal><span lang=EN-US> if (!stroke) {<o:p></o:p></span></p>
<p class=MsoNormal><span lang=EN-US> stroke =
this.createNode('olv:stroke', label.id + "_stroke");<o:p></o:p></span></p>
<p class=MsoNormal><span lang=EN-US> label.appendChild(stroke);<o:p></o:p></span></p>
<p class=MsoNormal><span lang=EN-US> }<o:p></o:p></span></p>
<p class=MsoNormal><span lang=EN-US> stroke.setAttribute("opacity",
style.labelStrokeOpacity);<o:p></o:p></span></p>
<p class=MsoNormal><span lang=EN-US> }<o:p></o:p></span></p>
<p class=MsoNormal><span lang=EN-US>}<o:p></o:p></span></p>
<p class=MsoNormal><span lang=EN-US><o:p> </o:p></span></p>
<p class=MsoNormal><span lang=EN-US>The index var is used to make multiple
labels for clustered features BTW ;-)<o:p></o:p></span></p>
<p class=MsoNormal><span lang=EN-US>Also I’m not able to apply the same
logic to the SVG renderer so help on that side is valued also.<o:p></o:p></span></p>
<p class=MsoNormal><span lang=EN-US><o:p> </o:p></span></p>
<p class=MsoNormal>Cheers Kris<o:p></o:p></p>
<p class=MsoNormal><o:p> </o:p></p>
</div>
</body>
</html>