css popup message

freelance84 · August 28, 2010

I'm trying to get a message to appear as if it's popping up, similar to the javascript popup box, with CSS.

The box must shrink and expand according to the content, thats what the table is in there for. I seem to have cracked it with most browsers except the dreaded ie6.

HTML:

<div class="popup_vert">
<table style="margin-left:auto;margin-right:auto;"><tr><td>
	<div class="popup_horiz_content">
		<b>Are you sure you want to<br/>permenently delete name:<br/>$name_to_delete?<br/></b>
		<form action="mct-home.php" method="post">
	  	  <input type="hidden" name="class_name" value="$class_to_delete"/>
		  <input class="button blue medium" type="submit" value="No" />
		  <input class="button red medium" type="submit" name="yes_delete" value="Yes" />
		</form>
	</div>
</td></tr></table>
</div>

CSS:

.popup_vert{
position: fixed;
top: 310px;
width:100%;
z-index: 100;
}
.popup_horiz_content{
background-color: #FFECEC;
text-align: center;
border: 3px outset #9F0000;
white-space: nowrap;
}

The html comes just after the <body> tag.

In FF chrome opera ie7 onwards the "popop" message appears in the middle of the screen and doesn't effect any of the other content of the screen.

In ie6, it commands it own line, pushing everything else down from the top.

Does anyone know how i could possible stop this? I would very much appreciate any help here, i've been trying loads of different things and jumping to check on the computer with ie6 if its working (the said computer is in another office, not cool) but can't fix it

lostprophetpunk · August 29, 2010

I am imagine this would help you out.

haku · August 30, 2010

IE6 doesn't recognize position:fixed. Your best bet is to add a conditional comment setting the position to absolute for IE6.

freelance84 · August 30, 2010

lostprophetpunk, cheers that site is pretty coold however the whole effect is achieved with js.

haku, perfect. I didn't know that ie6 didn't recognise fixed. Cheers, i'll build in a work around using absolute positioning

freelance84 · August 31, 2010

Ok, i was definitely going down the wrong route (http://www.phpfreaks.com/forums/index.php/topic,308710.0.html). I've now got one class in the style sheet giving me a nice popup message:

.popup_vert{
position: absolute;
top: 40%;
z-index: 3000;
background-color: #FFECEC;
text-align: center;
border: 3px double #9F0000;
white-space: nowrap;
margin-right: auto;
margin-left: auto;
left: 40%;
padding: 10px;
}

The only problem now is I can't get the pop-up message to go in front of a SELECT drop down menu in ie6... in ie6 the popup message is correctly positioned and on top of everything except the SELECT menus.

Anyone got any ideas?

freelance84 · August 31, 2010

oh, also the html now looks like (just the one div now):

<div class="popup_vert">
<b>Are you sure you want to<br/>permenently delete class:<br/>$class_to_delete?<br/></b>
<form action="mct-home.php" method="post">
	<input type="hidden" name="class_name" value="$class_to_delete"/>
	<input class="button blue medium" type="submit" value="No" />
	<input class="button red medium" type="submit" name="yes_delete" value="Yes" />
</form>
</div>

haku · September 1, 2010

What is the CSS on the select element? Is it positioned relative? Does it have a z-index? It's hard to help without the HTML that shows the popup relative to the select element.

freelance84 · September 1, 2010

The CSS is in the post before the HTML (the html is outside of any other containers)

There are a few pages talking about this on google searches, but i can't really find a good solution. I can of course lift the popup up the page a little but then this really doesn't look any good.

I could on load of the popup replace the select box's with images but then the problem lies with the width of the select box which changes to shrink wrap its contents (fixing the width is a no), i would have to have some code that could calculate the number of characters.... figure out the width in pixels... this could then choose a certain image or set its width... nightmare.

haku · September 1, 2010

I don't see your HTML for your select element or your CSS for your select element.

freelance84 · September 1, 2010

Ah sorry i miss read i think. Here it all is in one block

The HTML popup message is:

<div class="popup_vert">
    <b>Are you sure you want to<br/>permenently delete class:<br/>$class_to_delete?<br/></b>
   <form action="mct-home.php" method="post">
      <input type="hidden" name="class_name" value="$class_to_delete"/>
      <input class="button blue medium" type="submit" value="No" />
      <input class="button red medium" type="submit" name="yes_delete" value="Yes" />
   </form>
</div>

It hovers above and array of form options including <select> tags such as:

<select name="class_name" class="select_blue">
    <option>select a class</option>
    <option>west prov</option>
    <option>east prov</option>
</select>

The CSS used in the above HTML sections ("popup_vert" and "select_blue") are as follows:

.popup_vert{
   position: absolute;
   top: 40%;
   left: 40%;
   z-index: 3000;
   background-color: #FFECEC;
   text-align: center;
   border: 3px double #9F0000;
   white-space: nowrap;
   padding: 10px;
}
.select_blue{
border: 1px solid #0076a3;
background-color: #B9ECFF;
}
.select_blue:hover {
background-color: #7DDBFF;
}
.select_blue:active {
background-color: #B9ECFF;
}

I have tried positioning the <select> items with relative and absolute and also adding the z-index to 10 but nothing appears to be working.

I have read somewhere that ie6 is programmed so the <select> tags are windows and therefore above any divs or something...

PPS

This problem existed before i put any styling onto the select items

haku · September 2, 2010

Can you show all the HTML for the popup and select in one spot? Showing them separately doesn't show their relationship. Are they siblings? Ancestors? Siblings of ancestors?

freelance84 · September 2, 2010

Ok i've made a simplified version of the page with the fault. All the CSS is inline so all is in the outputted 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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>MCT - fault finding</title>
</head>

<body>
<br/>
<br/>
<div style="position:relative;width:700px;margin-left:auto;margin-right:auto;border:solid 2px #000000;padding:25px">
	<br/><br/>

	Create a unit <img src="png/arrow_chevron_blue.png" alt=">" />

	<form method="post" action="mct-unit-create.php">
		<input style="width:80px;" type="submit" value="Create" />
	</form>
	<br/><br/>
	Delete unit: 
	<form method="post" action="mct-home_2.php">
		<input type="hidden" name="j_number" value="3"/>
		<select name="unit_name">
                            <option>select a class</option>
                            <option>unit 1 - 10/11</option>
                            <option>unit2 - 10/11</option>
                            <option>unit2a version 12 - 10/11</option>
                        </select>

		<img src="png/arrow_chevron_blue.png" alt=">" />
		<input type="submit" name="delete" value="Delete" />
	</form>
</div>								
    <div style="position: absolute;	top: 30%;	left: 20%; 	z-index: 3000;	background-color: #FFECEC;	text-align: center;	border: 3px double #9F0000;	white-space: nowrap;	padding: 10px;">
	Are you sure you want to<br/>
                permenently delete unit:<br/>
                <b>unit2a version 12 - 10/11</b>?<br/>
	<form action="mct-home_2.php" method="post">
		<input type="hidden" name="unit_name" value="unit2a version 12 - 10/11"/>
		<input class="button blue medium" type="submit" value="No" />
		<input class="button red medium" type="submit" name="yes_delete" value="Yes" />
	</form>
</div>
</body>
</html>

I've you recreate this html you'll see the div floats over the <select> but in ie6 the <select> remains on top

haku · September 2, 2010

There we go. Try giving the first div a lower z-index than the second div. That will either fix it, or it won't. If it doesn't fix it, I'd say you are probably out of luck.

freelance84 · September 2, 2010

Nope. Hasn't worked.

Well, looks like i'm giong to have to position the popup away from the <select> tags.

That is seriously annoying. Sodding Gates! >:(

Well, cheers for helping though.

Sign In

css popup message

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Important Information