I've been trying for weeks (yes, it's embarrassing) to create a dhtml popup window w/min, max and close buttons in a title bar.

I can do this fine w/a table, but I hate tables, and want to accomplish the same thing w/non-table css.

Here is a rough image of what I want to accomplish:

|        Title           -  +  x |
|                                |
|                                |
|                                |
|                                |
|                                |

Where the title is centered in the *whole* width of the title bar, and there are 3 images (icons 16x16) in the upper-right corner of the title bar.

I cannot seem to get the above working in multiple browsers. What works in FF 3.5 and IE8 doesn't work in IE7. What works in IE 7 doesn't work in FF3.0!! Ack.

Could someone show me the pristine css that would accomplish what I want to do? It would really help me understand what I'm doing wrong (believe me, I have PAGES of css and html that doesn't work).

Thanks all.

7 Years
Discussion Span
Last Post by ko ko

There is a guy asked last few hours like your question.
Try this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
<html xmlns="http://www.w3.org/1999/xhtml" lang="en-us">
<title>Popup Box</title>
<style type="text/css">
body {
background: #EEE; font: normal 11pt/100% Arial, Verdana, Helvetica, Sans-serif; 

color: #1b1b1b }

/*---- popup box -----*/
#popup {
/*-- Set your popup box width and height.. I set it 220px width and 178px 

height ---*/
width: 220px; height: 178px; background: #cfcfcf; position: relative; margin: 

1.3em auto 0 2.7em }
/*---- title ----*/

#title {
background: #727272; /* If you want to set the height */
height: 22px; /*--- Set the vertical alignment of child ----*/ line-height: 

22px }
#title h3 {
color: #FFF; font-weight: normal; /*-- You want the text to center --*/ 

text-align: center }

/* set button on right corner of title bar ---*/
#title .button {
position: absolute; /* top and right corner */ right: 0; top: 0; /* Need width 

and height, you have 3 buttons with 16px width and height, so you need 16px 

width and height*/ width: 54px; height: 18px; /* I set more width and height 

for button */  }
#title .button img {
/* three buttons next to each */ float: right; margin-right: 2px; /*Don't 

forget the wrapper is 54px width, so you cann't give margin more than 2px */ }
/** This is what you want **/
<div id="popup">
	<div id="title">
		<h3>Title</h3><span class="button"><img src="/" border="0" 

title="Minimize" alt="x" /><img src="/" border="0" title="Maximize" alt="+" 

/><img src="/" border="0" title="Close" alt="-" /></span>
	<div id="content">
		<p>Pop-up Message.</p>

Good luck..

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.