[creativecoding]

I have a site that displays pictures. On the bottom left there's a "report" button and on the bottom right there's an "upload" button. Each of these opens up a dialog centered on the screen and has an X in the top-right of the dialog in order to close it. The upload dialog works fine, but the report dialog isn't showing the close button.

Here's my code for the two:

	<a href="#" class="nocursor"><div class="overlay"></div></a>

	<div class="submit_form" id="report_form">
		<a href="#" id="report_close" style="z-align: 9999;">
			<div class="close_btn">X</div>
		</a>
		That wall has been reported
	</div>
	
	<div class="submit_form" id="submit_form">
		<a href="#" id="submit_close">
			<div class="close_btn">X</div>
		</a>
		<form action="upload.php" id="submit_rawform" method="post" encoding="multipart/form-data" enctype="multipart/form-data">
			<input type="file" id="file" name="wall">
			<input type="button" id="file_front" value="Wall"><br>
			<input type="submit" id="submit_wall" value="Share">
		</form>
	</div>
	

and here's the style:

.overlay {
    z-index: 995;
    background-color: black;
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    opacity: 0.7;
    display: none;
}

.nocursor {
    cursor: default;
}

.close_btn {
    position: absolute;
    background-color: black;
    z-index: 999;
    border-radius: 10px;
    -moz-border-radius: 10px;
    padding: 3px 7px;
    border: 2px solid white;
    top: -15px;
    right: -15px;
}

.dialog {
    z-index: 998;
    text-align: center;
    position: absolute;
    top: 50%;
    left: 35%;
    width: 350px;
    border: 3px solid white;
    background-color: #000;
    -moz-border-radius: 13px;
    border-radius: 13px;
    padding: 15px;
    display: none;
}

.dialog #file {
    opacity: 0;
    position: absolute;
}

.dialog #submit_wall, #file_front {
    width: 100%;
    padding: 10px 0px;
}

So, what gives? I used inspect element in Chrome and it showed no HTML for the close button (while it showed for submit's). Also tried it in Internet Explorer, same result.

[Astalor]

The close button is being rendered, at least for me, it's just in the very top right hand corner and only a few pixels of it are viewable.

I would highly suggest you don't use absolute position using page co-ords, it produces all sorts of problems just like the one you are experiencing. Wrap everything in one large div and align it in conjunction with that using floats, aligns and such.

[el_pancho]

The top-left corner of your browser screen is the point (0,0), so if you use position: absolute; and set top:-15px; the X button will be outside your screen, try changing position: relative; or using different coordinates for you x,y points.

[e_i_pi]

Not sure why you're not seeing the close button, but I would suggest changing your close_btn class to this in the CSS:

.close_btn {
    position: absolute;
    background-color: black;
    z-index: 999;
    border-radius: 10px;
    -moz-border-radius: 10px;
    padding: 3px 7px;
    border: 2px solid white;
    top: 0px;
    right: 0px;
}

Setting -15px on positioning is dangerous as the font may be decided by the browser, and that font may not show the 'X' character at > 15px width/height (hence hiding it).

Also, in your HTML, line 4 has the inline style style="z-align: 9999;", which isn't a valid attribute AFAIK. There's align and z-index but no z-align.