By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
432,384 Members | 845 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 432,384 IT Pros & Developers. It's quick & easy.

Popup Window doesn't display

P: 3
Hello,
I have 2 problems. In my webpage, I have a dropdown list with a button that takes the user to a popup window specific to the option. I am using Firefox 2.0.0.13. I have successfully validated my HTML and CSS code.

1. When I clear cache and refresh my webpage, it takes 3 tries before the popup window displays - I click on the button once, a white window the size of my webpage displays. I close it and click on the button again (for the same option) and a white window the size of my webpage displays again. Close that window and click the button again (for the same option) and a white window initially displays, then goes away and the normal sized popup window displays correctly. I can then close the popup and choose any other option and get the popup with the first try. Once I clear cache though, it starts over again.

2. Once the popup window is displaying, it initially displays as a white page the same size as the webpage, then when it connects to the URL the white page goes away and the normal sized popup window displays.

I'm looking for 1. the popup window to display the first time I click on the submit button whether I've cleared cache or not, and 2. the initial, extra white page to not display.

Thank you for any help you might offer.


HTML
Expand|Select|Wrap|Line Numbers
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  2.         "http://www.w3.org/TR/html4/strict.dtd">
  3. <html>
  4.   <head>
  5.      <title>Company</title>
  6.       <meta http-equiv="Content-Type"
  7.          content="text/html; charset=utf-8">
  8.       <link href="style.css" rel="stylesheet" type="text/css" >
  9.       <link rel='SHORTCUT ICON'
  10.          href='../images/favicon.ico'>
  11.       <script src="http://www.google-analytics.com/urchin.js" type="text/javascript"></script>
  12.       <script type="text/javascript">
  13.          _uacct = "UA-12134";
  14.          urchinTracker();
  15.       </script>
  16.   </head>
  17.   <body id="support">
  18.        <div id="bodyWrapper"> <!-- center page on viewport -->
  19.             <div id="navright_container">
  20.                  <script type="text/javascript" src="topmenu.js"></script>
  21.             </div><!-- navright_container -->
  22.             <div style="clear:both;"></div>
  23.             <div id="topBorder">
  24.                  <img style="float:left;width:99%;" src="images/heading915x135.png" alt="Banner">
  25.                  <div style="clear:both;"></div>
  26.                  <div id="navbar_container">
  27.                       <div id="navbar">
  28.                            <script type="text/javascript" src="menu.js"></script><!-- menu -->
  29.                       </div>
  30.                  </div>
  31.                  <div style="clear:both;"></div>
  32.             </div><!-- topborder -->
  33.             <div class="leftpanel" style="height:26em;border:0;">
  34.             </div>
  35.             <div class="middleContainer">
  36.                  <div class="center">
  37.                       <h2 class="no_marg_pad" style="margin-bottom: 1em;">Support</h2>
  38.                  </div><!-- center -->
  39.                  We offer live support Monday through Friday, 7:00am - 5:00pm 
  40.                  <div style="margin-top:2em;float:left;">
  41.                       Choose the type of support needed:
  42.                            <script type="text/javascript">
  43.                            function supportWindow(URL)
  44.                            {
  45.                              window.open(URL+"&refURL="+escape(document.location),'popupwindow','scrollbars,resizable');
  46.                              return false;
  47.                            }
  48.                            </script>
  49.                            <p>
  50.                               <select id="sel" size="1">
  51.                                  <option value="https://company.webex.com/u2logic/webacd.wbx?AT=pqform&amp;QID=18427&amp;UID=0&amp;SK=9numbercodese">Support1</option>
  52.                                  <option value="https://company.webex.com/u2logic/webacd.wbx?AT=pqform&amp;QID=18442&amp;UID=0&amp;SK=fnumbercodes3">Support2</option>
  53.                                  <option value="https://company.webex.com/u2logic/webacd.wbx?AT=pqform&amp;QID=18407&amp;UID=0&amp;SK=5numbercodes1">Support3</option>
  54.                                  <option value="https://company.webex.com/u2logic/webacd.wbx?AT=pqform&amp;QID=18452&amp;UID=0&amp;SK=6numbercodese">Support4</option>
  55.                                  <option value="https://company.webex.com/u2logic/webacd.wbx?AT=pqform&amp;QID=18457&amp;UID=0&amp;SK=6numbercodes9">Support5</option>
  56.                                  <option value="https://company.webex.com/u2logic/webacd.wbx?AT=pqform&amp;QID=18447&amp;UID=0&amp;SK=fnumbercodes4">Support6</option>
  57.                                  <option value="https://company.webex.com/u2logic/webacd.wbx?AT=pqform&amp;QID=18417&amp;UID=0&amp;SK=6numbercodes0">Support7</option>
  58.                                  <option value="https://company.webex.com/u2logic/webacd.wbx?AT=pqform&amp;QID=18437&amp;UID=0&amp;SK=9numbercodes5">Support8</option>
  59.                                  <option value="https://company.webex.com/u2logic/webacd.wbx?AT=pqform&amp;QID=18422&amp;UID=0&amp;SK=enumbercodesc">Support9</option>
  60.                                  <option value="https://company.webex.com/u2logic/webacd.wbx?AT=pqform&amp;QID=18432&amp;UID=0&amp;SK=5numbercodes1">Support10</option>
  61.                                  <option value="https://company.webex.com/u2logic/webacd.wbx?AT=pqform&amp;QID=19612&amp;UID=0&amp;SK=dnumbercodes3">Support11</option>
  62.                                  <option value="https://company.webex.com/u2logic/webacd.wbx?AT=pqform&amp;QID=19607&amp;UID=0&amp;SK=5numbercodesf">Support12</option>
  63.                                  <option value="https://company.webex.com/u2logic/webacd.wbx?AT=pqform&amp;QID=19617&amp;UID=0&amp;SK=7numbercodes7">Support13</option>
  64.                                  <option value="https://company.webex.com/u2logic/webacd.wbx?AT=pqform&amp;QID=19907&amp;UID=0&amp;SK=bnumbercodes6">Support14</option>
  65.                                  <option value="https://company.webex.com/u2logic/webacd.wbx?AT=pqform&amp;QID=19912&amp;UID=0&amp;SK=enumbercodesf">Support15</option>
  66.                                  <option value="https://company.webex.com/u2logic/webacd.wbx?AT=pqform&amp;QID=20212&amp;UID=0&amp;SK=9numbercodesc">Support16</option>
  67.                               </select>                   
  68.                               <input type="button" value="Submit" onclick="supportWindow(document.getElementById('sel').value)">
  69.                            </p>
  70.                  </div>
  71.             </div><!-- middle container -->
  72.             <div style="clear:both;"></div>
  73.             <script type="text/javascript" src="footer.js"></script><!-- footer address -->
  74.        </div><!-- bodyWrapper -->
  75.   </body>
  76. </html>
  77.  
CSS
Expand|Select|Wrap|Line Numbers
  1. html {
  2.      /* commented backslash hack \*/
  3.      height:100%;
  4.      /* end hack */
  5.      margin:0;
  6.      padding:0;
  7. }
  8. body {
  9.      /* commented backslash hack \*/
  10.      height:100%;
  11.      /* end hack */
  12.      min-height:100%;
  13.      text-align:center;
  14.      min-width:80%;
  15.      margin:0;
  16.      padding:0;
  17.      background:#406580;
  18.      background:#115681;
  19. }
  20. body#downloads a#downloads_link,
  21. body#index a#index_link,
  22. body#services a#services_link,
  23. body#cases a#cases_link,
  24. body#employment a#employment_link,
  25. body#about a#about_link,
  26. body#contact a#contact_link,
  27. body#support a#support_link,
  28. body#webdocs a#webdocs_link,
  29. body#webcrm a#webcrm_link {
  30.      text-decoration:none;
  31.      color:white;
  32.      font-weight:bold;
  33.      background-color: #2175B5;
  34.      margin:0;
  35.      padding:0 .5em 0 .5em;
  36. }
  37. #bodyWrapper {
  38.      position:relative;
  39.      background-color:white;
  40.      margin-right:auto; /* center */
  41.      margin-left:auto;  /* center */
  42.      padding:0;
  43.      width:59.1em;
  44.      padding-bottom:1px;
  45.      text-align:left;
  46.      font-family:Helvetica, Arial, Verdana, sans-serif;
  47. /*     border:1px solid black; */
  48. }
  49. /* img.logo and .tagline height, margins, padding, font size, and maybe bold work together.
  50.    If change one, will have to adjust others.  */
  51. img.logo {
  52.      width:29.6%;
  53.      float:left;
  54.      margin:0 0 0 4%;
  55.      padding:1% 0 1% 0
  56. }    
  57. .tagline {
  58.      float:right;
  59.      height:75px;
  60.      width:60%;
  61.      color:white;
  62.      font-family:Helvetica, Arial, Verdana, sans-serif;
  63.      font-weight:bold;
  64.      font-size:1.5em;
  65.      text-align:center;
  66.      padding:4% 0 0 0;
  67.  /*    background-image: url(images/TagBackground630x120.png)
  68. */
  69. }
  70. .center {
  71.      text-align:center;
  72. }
  73. .leftpanel {
  74.      float:left;
  75.      margin:.5% 0 0 .25%;
  76.      width:20%;
  77.      border:#C9CFD1 1px solid;
  78.      border-top:0;
  79. }
  80. .sampleApp {
  81.      float:left;
  82.      width:95%;
  83.      padding:0;
  84.      margin:2% 0 0 2%;
  85. }
  86. .dividerBar {
  87.      background-color:#C9CFD1;
  88.      height:1px;
  89.      margin-top:2%;
  90.      margin-bottom:2%;
  91.      padding:0;
  92. }
  93. .webEase {
  94.      float:left;
  95.      width:95%;
  96.      margin:2% 0 0 2%;
  97. }
  98. .topleft {
  99. /*     background-color:#CEDFEF;
  100. */
  101. }
  102. .bottomleft {
  103. /*     background-color:#FFE3C6;
  104. */
  105. }
  106. .sidetext {
  107.      margin:1% 1% 0 3%;
  108.      font-size:.75em;
  109. }
  110. .mainContainer {
  111.      float:left;
  112.      width:100%;
  113.      margin:3% 0 1% 9%;
  114.      font-family:Helvetica, Arial, Verdana, sans-serif;
  115. }
  116. .middleContainer {
  117.      float:left;
  118.      width:60%;
  119.      margin:3% 0 1% 9%;
  120.      font-family:Helvetica, Arial, Verdana, sans-serif;
  121. }     
  122. .no_marg_pad {
  123.      margin:0;
  124.      padding:0;
  125. }     
  126. .pt75em {
  127.      font-size:.75em;
  128. }
  129. .introText {
  130.      float:left;
  131.      margin:0 0 .25% 0;
  132.      padding:0;
  133.      font-size:.8em;
  134.      font-family:Helvetica, Arial, Verdana, sans-serif;
  135.      font-weight:bold;
  136. }
  137.  
  138. table {
  139.      border-collapse:collapse;
  140.      margin:1em 0 0 5em;
  141. }
  142. td { 
  143. /*     border:1px solid silver; */
  144.      font-size:.9em;
  145. }
  146. /* th { border:1px solid silver; } */
  147.  
  148.  
  149.  
  150. /* Code to build header picture.  Example to use for future page.
  151. <br />
  152. <img class="logo" src="images/logo.png" alt="logo" />
  153. <div class="head_frame" style="border:#339966 1em solid;"></div>
  154. <img style="position:relative;left:20em;top:-13em;" src="images/Company.png" alt="About Us" />
  155. <div style="height:180px; position:relative;top:-24.5em;left:46.8em;width:11.4em;background:#339966;filter:alpha(opacity=60);
  156. filter:progid:DXImageTransform.Microsoft.Alpha(opacity=60);-moz-opacity:0.60;opacity:0.6;" />
  157. */
  158. .category_hdg {
  159.      font-weight:bold;
  160.      font-size:.9em;
  161.      color:white;
  162.      padding:3% 0 3% 0;
  163.      text-align:center;
  164.      border-bottom:black 2px solid;
  165. }
  166. .saas_category_hdg {
  167.      font-weight:bold;
  168.      font-size:.9em;
  169.      color:white;
  170.      padding:1% 0 1% 0;
  171.      text-align:center;
  172.      border-bottom:black 2px solid;
  173. }
  174. .product_txt {
  175.      font-size:.75em;
  176. }
  177. .txt80 {
  178.      font-size:.80em;
  179.      margin:2% 4% 0 4%;
  180. }
  181. .product_txt ul {
  182.      margin:2% 0 0 11%;
  183.      padding:0;
  184.      font-size:.955em;
  185. }
  186. .product_txt80 {
  187.      font-size:.80em;
  188. }
  189. .product_txt80 ul{
  190.      margin:4% 0 0 13%;
  191.      padding:0;
  192. }
  193. .product_txt90 li{
  194.      margin:2% 0 0 0;
  195. }
  196. .product_txt90 a {
  197.      color:black;
  198. }
  199. #footer {
  200.      position:relative;
  201.      top:1px;left:0;
  202.      width:100%;
  203.      text-align:center;
  204.      background:#3D93CA;
  205.      background:#013654;
  206.      color:white;
  207.      font-size:10pt;
  208.      border-top:1px solid black;
  209.      border-bottom:1px solid black;
  210.      margin:0 0 0 -1px;
  211.      padding:0 2px 2px 0;
  212. }
  213. /* Right Menu */
  214. #navright_container {
  215.      width:100%;
  216.      float:right;
  217.      background-color:#013654;
  218.      border-top:1px solid black;
  219.      border-bottom:1px solid black;
  220.      color:white;
  221. }
  222. #navright {
  223.      margin:0;
  224.      padding:0;
  225. }
  226. #navright ul {
  227.      float:right;
  228.      margin:0;
  229.      padding:0;
  230. }
  231. #navright ul li {
  232.      display: inline;
  233. }
  234. #navright a {
  235.      float:right;
  236.      border-left: 1px white solid;
  237.      text-decoration:none;
  238.      font-weight:bold;
  239.      font-size:.75em;
  240.      color: white;
  241.      padding:0 .5em 0 .5em;
  242.      margin:0;
  243. }
  244. #navright a:hover {
  245.      color: #234163;
  246.      background: #BDDFF7;
  247.      text-decoration:none;
  248.      font-weight:bold;
  249. }
  250. /* Menu */
  251. #navbar_container {
  252.      width:100%;
  253.      float:left;
  254.      border-top:1px solid black;
  255.      border-bottom:1px solid black;
  256.      background-color:#013654;
  257. }
  258. #navbar {
  259.      margin:0;
  260.      padding:0;
  261. }
  262. #navbar ul {
  263.      float:left;
  264. }
  265. #navbar ul li {
  266.      display: inline;
  267. }
  268. #navbar a {
  269.      float:left;
  270.      border-right: 1px white solid;
  271.      text-decoration:none;
  272.      font-weight:bold;
  273.      font-size:.75em;
  274.      color: white;
  275.      padding:0 .5em 0 .5em;
  276.      margin:0;
  277. }
  278. #navbar a:hover {
  279.      color:#013654;
  280.      background:#BDDFF7;
  281.      text-decoration:none;
  282.      font-weight:bold;
  283. }
  284. .leftBackground {
  285.      float:left;
  286.      width:100%;
  287.      height:33px;
  288.      margin:0;
  289.      padding:0;
  290.      background-repeat:no-repeat;
  291. }
  292. .leftTitles {
  293.      float:left;
  294.      width:100%;
  295.      margin:.6em 0 0 0;
  296.      text-align:center;
  297.      font-size:.90em;
  298.      font-weight:bold;
  299. }
  300. /* Blue Rounded Corners */
  301. .raised {background: transparent; width:400px;}
  302. .raised .ab1, .raised .ab2, .raised .ab3, .raised .ab4, .raised .ab1b, .raised .ab2b, .raised .ab3b, .raised .ab4b {display:block; overflow:hidden; font-size:1px;}
  303. .raised .ab1, .raised .ab2, .raised .ab3, .raised .ab1b, .raised .ab2b, .raised .ab3b {height:1px;}
  304. .raised .ab2 {background:#2175B5; border-left:1px solid #fff; border-right:1px solid #eee;}
  305. .raised .ab3 {background:#2175B5; border-left:1px solid #fff; border-right:1px solid #ddd;}
  306. .raised .ab4 {background:#2175B5; border-left:1px solid #fff; border-right:1px solid #aaa;}
  307. .raised .ab4b {background:#BDDFF7; border-left:1px solid #FFE6CC; border-right:1px solid #999;}
  308. .raised .ab3b {background:#BDDFF7; border-left:1px solid #FFE6CC; border-right:1px solid #999;}
  309. .raised .ab2b {background:#BDDFF7; border-left:1px solid #FFE6CC; border-right:1px solid #999;}
  310. .raised .ab1 {margin:0 5px; background:#fff;}
  311. .raised .ab2, .raised .ab2b {margin:0 3px; border-width:0 2px;}
  312. .raised .ab3, .raised .ab3b {margin:0 2px;}
  313. .raised .ab4, .raised .ab4b {height:2px; margin:0 1px;}
  314. .raised .ab1b {margin:0 5px; background:#999;}
  315. .raised .aboxcontent {display:block; background:#BDDFF7; border-left:1px solid #fff; border-right:1px solid #999;} 
  316. /* End Blue Rounded Corners */
  317. /* Green Rounded Corners */
  318. .raised {background: transparent; width:400px;}
  319. .raised .cb1, .raised .cb2, .raised .cb3, .raised .cb4, .raised .cb1b, .raised .cb2b, .raised .cb3b, .raised .cb4b {display:block; overflow:hidden; font-size:1px;}
  320. .raised .cb1, .raised .cb2, .raised .cb3, .raised .cb1b, .raised .cb2b, .raised .cb3b {height:1px;}
  321. .raised .cb2 {background:#18BA63; border-left:1px solid #fff; border-right:1px solid #eee;}
  322. .raised .cb3 {background:#18BA63; border-left:1px solid #fff; border-right:1px solid #ddd;}
  323. .raised .cb4 {background:#18BA63; border-left:1px solid #fff; border-right:1px solid #aaa;}
  324. .raised .cb4b {background:#BDF7D6; border-left:1px solid #FFE6CC; border-right:1px solid #999;}
  325. .raised .cb3b {background:#BDF7D6; border-left:1px solid #FFE6CC; border-right:1px solid #999;}
  326. .raised .cb2b {background:#BDF7D6; border-left:1px solid #FFE6CC; border-right:1px solid #999;}
  327. .raised .cb1 {margin:0 5px; background:#fff;}
  328. .raised .cb2, .raised .cb2b {margin:0 3px; border-width:0 2px;}
  329. .raised .cb3, .raised .cb3b {margin:0 2px;}
  330. .raised .cb4, .raised .cb4b {height:2px; margin:0 1px;}
  331. .raised .cb1b {margin:0 5px; background:#999;}
  332. .raised .cboxcontent {display:block; background:#BDF7D6; border-left:1px solid #fff; border-right:1px solid #999;} 
  333. /* End Green Rounded Corners */
  334. /* Orange Rounded Corners */
  335. .raised {background: transparent; width:400px;}
  336. .raised .b1, .raised .b2, .raised .b3, .raised .b4, .raised .b1b, .raised .b2b, .raised .b3b, .raised .b4b {display:block; overflow:hidden; font-size:1px;}
  337. .raised .b1, .raised .b2, .raised .b3, .raised .b1b, .raised .b2b, .raised .b3b {height:1px;}
  338. .raised .b2 {background:#DE7129; border-left:1px solid #fff; border-right:1px solid #eee;}
  339. .raised .b3 {background:#DE7129; border-left:1px solid #fff; border-right:1px solid #ddd;}
  340. .raised .b4 {background:#DE7129; border-left:1px solid #fff; border-right:1px solid #aaa;}
  341. .raised .b4b {background:#FFD7C6; border-left:1px solid #FFE6CC; border-right:1px solid #999;}
  342. .raised .b3b {background:#FFD7C6; border-left:1px solid #FFE6CC; border-right:1px solid #999;}
  343. .raised .b2b {background:#FFD7C6; border-left:1px solid #FFE6CC; border-right:1px solid #999;}
  344. .raised .b1 {margin:0 5px; background:#fff;}
  345. .raised .b2, .raised .b2b {margin:0 3px; border-width:0 2px;}
  346. .raised .b3, .raised .b3b {margin:0 2px;}
  347. .raised .b4, .raised .b4b {height:2px; margin:0 1px;}
  348. .raised .b1b {margin:0 5px; background:#999;}
  349. .raised .boxcontent {display:block;background:#FFD7C6; border-left:1px solid #fff; border-right:1px solid #999;} 
  350. /* End Orange Rounded Corners */
  351.  
Apr 9 '08 #1
Share this Question
Share on Google+
2 Replies


drhowarddrfine
Expert 5K+
P: 7,435
I can only think this is a javascript problem and not html or css.
Apr 9 '08 #2

P: 3
Thank you for your reply and taking a look. I posted it on the JavaScript forum.
Apr 9 '08 #3

Post your reply

Sign in to post your reply or Sign up for a free account.