Login Register

dojo gfx surface positioning in intenet explorer

Hi All,

I am getting some weird results on creating a surface in IE-7. What my situation is that I have 3 divs, layered on top of each other, and positioned absolutely inside a containing div. Then I'm trying to create a surface with each of the 3 divs, and creating a dojo image on each of these surfaces.

While the surface creates fine, and I can create a dojo image also, the problem is that the position of the surface does not match that of the div. The surface is created at some other position (to be precise the surface starts from the same y-co-ordinate as that of the div, but the x-co-ordinate seems to be shifted by about half of the div's width), although the height and width of the surface is same as that of the parent-node div.

Is it because of the float and absolute positioning that I am doing with the divs or something else ?? I have tried hard o figure out the solution, but nothing seems to work. The code works perfectly in firefox.

It would be great if someone could point out the right way to do this

It is the known problem with

It is the known problem with VML renderer, and I am not sure if it is even possible to fix. Try to avoid such situations.

I also noticed a similar

I also noticed a similar problem with nested tables.

I have some code that looks like:

[table]
[tr][td]
[table]
...previous rows...
[tr]
.... previous cells
[td][div id="surfaceContainer" class="SurfaceDiv"][/div][/td]
...
[/tr]
...
[/table]
[/td][/tr]
[/table]

(SurfaceDiv class just defines a height and width for the surface).

In FireFox, this works fine, no problems. In IE, though, I get similar results that hashpipe is getting. I can't actually even SEE the image being loaded into the surface, but a box that is drawn on it covers up some of the stuff in cells to the right, so it's like the whole surface is being shifted by the width of the entire DIV.

Are there any workarounds for this? I'm going to try nested divs instead of a table, to see if that helps (only one "div" will have a surface, the rest will just be layout), but if there are ways to put it in a table and have the offsets work correctly, that would be great! Any other thoughts?

In your example you are not

In your example you are not setting height/width on the div. Try to set it and test again.

I should have put this in

I should have put this in the prior post :) The height and width are set in CSS using the SurfaceDIv class, which is as follows:

.SurfaceDiv {
width:500px;
height:250px;
outline:#000000 solid thin;
}

Maybe doing it via CSS isn't going to work with IE, though?

While it should work, but

While it should work, but just for a test could you put width/height directly on your surface div using the "style" attribute?

——————
Eugene Lazutkin
Dojo Toolkit, Committer
SitePen, Programmer