freelance84 Posted August 28, 2010 Share Posted 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 Quote Link to comment https://forums.phpfreaks.com/topic/211935-css-popup-message/ Share on other sites More sharing options...
lostprophetpunk Posted August 29, 2010 Share Posted August 29, 2010 I am imagine this would help you out. Quote Link to comment https://forums.phpfreaks.com/topic/211935-css-popup-message/#findComment-1104809 Share on other sites More sharing options...
haku Posted August 30, 2010 Share Posted 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. Quote Link to comment https://forums.phpfreaks.com/topic/211935-css-popup-message/#findComment-1105141 Share on other sites More sharing options...
freelance84 Posted August 30, 2010 Author Share Posted 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 Quote Link to comment https://forums.phpfreaks.com/topic/211935-css-popup-message/#findComment-1105209 Share on other sites More sharing options...
freelance84 Posted August 31, 2010 Author Share Posted 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? Quote Link to comment https://forums.phpfreaks.com/topic/211935-css-popup-message/#findComment-1105566 Share on other sites More sharing options...
freelance84 Posted August 31, 2010 Author Share Posted 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> Quote Link to comment https://forums.phpfreaks.com/topic/211935-css-popup-message/#findComment-1105577 Share on other sites More sharing options...
haku Posted September 1, 2010 Share Posted 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. Quote Link to comment https://forums.phpfreaks.com/topic/211935-css-popup-message/#findComment-1105922 Share on other sites More sharing options...
freelance84 Posted September 1, 2010 Author Share Posted 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. Quote Link to comment https://forums.phpfreaks.com/topic/211935-css-popup-message/#findComment-1106005 Share on other sites More sharing options...
haku Posted September 1, 2010 Share Posted September 1, 2010 I don't see your HTML for your select element or your CSS for your select element. Quote Link to comment https://forums.phpfreaks.com/topic/211935-css-popup-message/#findComment-1106116 Share on other sites More sharing options...
freelance84 Posted September 1, 2010 Author Share Posted 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 Quote Link to comment https://forums.phpfreaks.com/topic/211935-css-popup-message/#findComment-1106156 Share on other sites More sharing options...
haku Posted September 2, 2010 Share Posted 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? Quote Link to comment https://forums.phpfreaks.com/topic/211935-css-popup-message/#findComment-1106260 Share on other sites More sharing options...
freelance84 Posted September 2, 2010 Author Share Posted 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 Quote Link to comment https://forums.phpfreaks.com/topic/211935-css-popup-message/#findComment-1106398 Share on other sites More sharing options...
haku Posted September 2, 2010 Share Posted 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. Quote Link to comment https://forums.phpfreaks.com/topic/211935-css-popup-message/#findComment-1106506 Share on other sites More sharing options...
freelance84 Posted September 2, 2010 Author Share Posted 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. Quote Link to comment https://forums.phpfreaks.com/topic/211935-css-popup-message/#findComment-1106533 Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.