[RESOLVED] Generated images and CSS z-index not working

Terminator

I have a code that's in getfonts.php

if (isset($_SESSION[$_SESSION['id']]['fonts'])) {
		for ($cFonts = 0; $cFonts < $_SESSION[$_SESSION['id']]['fonts']['count']; $cFonts++) {
			if ($_SESSION[$_SESSION['id']]['fonts'][$cFonts]['side'] == $_SESSION[$_SESSION['id']]['side']) {
				$zindex = $zindex + $cFonts;
				$images .= '<img id="' . $_SESSION[$_SESSION['id']]['fonts'][$cFonts]['id'] . '" src="' . $_SESSION[$_SESSION['id']]['fonts'][$cFonts]['location'] . '?dummy=' . time() . '" style="position: relative; cursor: move; left: ' . $_SESSION[$_SESSION['id']]['fonts'][$cFonts]['x'] . 'px; top: ' . $_SESSION[$_SESSION['id']]['fonts'][$cFonts]['y'] . 'px;" onDblclick="xmlhttp(\'TEXT\', \'includes/inc.get.session.text.php\', \'?id=' . $_SESSION[$_SESSION['id']]['fonts'][$cFonts]['id'] . '\');" />';
				$id .= $_SESSION[$_SESSION['id']]['fonts'][$cFonts]['id'] . ',';
			}
		}
	}

That generates images with a z-index and that gets loaded into a div using Ajax calls.

However the images don't go on top of eachother (so it looks like z-index aint working.)
Is this because of the ajax call ?

johanafm

$images .= '<img id="' . $_SESSION[$_SESSION['id']]['fonts'][$cFonts]['id'] . '"
	src="' . $_SESSION[$_SESSION['id']]['fonts'][$cFonts]['location'] . '?dummy=' . time() . '"

style=" position: relative;
		cursor: move;
        left: ' . $_SESSION[$_SESSION['id']]['fonts'][$cFonts]['x'] . 'px;
		top: ' . $_SESSION[$_SESSION['id']]['fonts'][$cFonts]['y'] . 'px;"

onDblclick="xmlhttp(\'TEXT\', \'includes/inc.get.session.text.php\', \'?id=' . $_SESSION[$_SESSION['id']]['fonts'][$cFonts]['id'] . '\');" />';

As far as I can see you never set the z-index.

Terminator

Sorry, I saw that (I tested it alot and removed it).

This is what I used

if (isset($_SESSION[$_SESSION['id']]['fonts'])) {
		for ($cFonts = 0; $cFonts < $_SESSION[$_SESSION['id']]['fonts']['count']; $cFonts++) {
			if ($_SESSION[$_SESSION['id']]['fonts'][$cFonts]['side'] == $_SESSION[$_SESSION['id']]['side']) {
				$zindex = $zindex + $cFonts;
				$images .= '<img id="' . $_SESSION[$_SESSION['id']]['fonts'][$cFonts]['id'] . '" src="' . $_SESSION[$_SESSION['id']]['fonts'][$cFonts]['location'] . '?dummy=' . time() . '" style="position: absolute; z-index: ' . $zindex . '; cursor: move; margin-left: ' . $_SESSION[$_SESSION['id']]['fonts'][$cFonts]['x'] . 'px; margin-top: ' . $_SESSION[$_SESSION['id']]['fonts'][$cFonts]['y'] . 'px;" onDblclick="xmlhttp(\'TEXT\', \'includes/inc.get.session.text.php\', \'?id=' . $_SESSION[$_SESSION['id']]['fonts'][$cFonts]['id'] . '\');" />';
				$id .= $_SESSION[$_SESSION['id']]['fonts'][$cFonts]['id'] . ',';
			}
		}
	}

And it loads into the following div.

<div id="previewFonts" style="position: relative;">

				</div>

I tried also relative on the images, can't figure it out.

johanafm

And what does (part of) the actual html output look like? Html code for a 3 images and should be enough. Might as well include all their parent elements as well, but cut away everything else, including siblings to their parent nodes.

Terminator

HTML output looks like this

<div id="previewContainer">
	<div id="previewBackground" style="background: url('files/polos/template_wit_front.jpg') repeat scroll 0% 0% transparent; width: 400px; height: 400px;">
		<div style="position: relative; width: 400px; height: 400px;" id="previewFonts">
			<img ondblclick="xmlhttp('TEXT', 'includes/inc.get.session.text.php', '?id=1286954800xlerc');" style="position: absolute; z-index: 50; cursor: move; margin-left: 177px; margin-top: 149px;" src="../files/_dumpert/1286954787xnk1y_font_front_0.png?dummy=1286954821" id="1286954800xlerc">
			<img ondblclick="xmlhttp('TEXT', 'includes/inc.get.session.text.php', '?id=1286954809vhdev');" style="position: absolute; z-index: 51; cursor: move; margin-left: 148px; margin-top: 165px;" src="../files/_dumpert/1286954787xnk1y_font_front_1.png?dummy=1286954821" id="1286954809vhdev">
		</div>
	</div>			
</div>

Above is working the most perfect, except that Mootools Drag Drop has now an problem (drag in container is not working perfect)

Terminator

Update : Just changed Marging-left and Margin-top to Left en Top.
It works now