Pop Out box has a strange block of nothing at the top

brysonprice · February 26, 2011

On the CONTACT page, there is a GMAIL logo. When this logo is clicked, a box pops out and the background becomes greyed-out. I like the box, but there is a block of nothing at the top of the box! Where is this coming from?

******* I have 2 GMAIL logos, CLICK THE ONE ON THE RIGHT FOR THE CONTACT FORM POP OUT BOX TO APPEAR ********

here is a pic of the problem:

here is the code:

<!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>Bryson Price Music</title>
<link href="styles.css" rel="stylesheet" type="text/css" />
   <title>bryson price contact</title>
       <script type="text/javascript">
var GB_ROOT_DIR = "./greybox/";
function MM_swapImgRestore() { //v3.0
 var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_preloadImages() { //v3.0
 var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
   var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
   if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_findObj(n, d) { //v4.01
 var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
   d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
 if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
 for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
 if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
 var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
  if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
       </script>

   <script type="text/javascript" src="greybox/AJS.js"></script>
   <script type="text/javascript" src="greybox/AJS_fx.js"></script>
   <script type="text/javascript" src="greybox/gb_scripts.js"></script>
   <link href="greybox/gb_styles.css" rel="stylesheet" type="text/css" media="all" />

   <script type="text/javascript" src="static_files/help.js"></script>

</head>
<body onload="MM_preloadImages('img/rollyoutube.png','img/rolltwitter.png','img/rollfacebook.png','img/rollgmail.png')">
<div class="header"><span class="Biography"><img src="img/contact.png" alt="biography" width="435" height="107" vspace="50" /></span>
</div>
<div id="wrapper">
 <div class="Biography" id="biography">
 </div>    
 <div class="belowheader" id="belowheader"><img src="img/newbelowheadcontact.png" width="390" height="123" alt="belowheader" />
 </div>
<div class="biobody" id="biobody">
 <div class="youtubetwitter"><a href="www.youtube.com/brysonprice" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('youtube','','img/rollyoutube.png',1)"><img src="img/youtube.png" name="youtube" width="213" height="87" border="0" id="youtube" /></a><a href="www.twitter/brysonprice" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('twitter','','img/rolltwitter.png',1)"><img src="img/twitter.png" name="twitter" width="213" height="87" border="0" id="twitter" /></a></div>
 <div class="facebook"><a href="www.facebook.com/brysonprice" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('facebook','','img/rollfacebook.png',1)"><img src="img/facebook.png" name="facebook" width="217" height="91" border="0" id="facebook" /></a><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('gmailroll','','img/rollgmail.png',1)"><img src="img/gmail.png" name="gmailroll" width="213" height="87" border="0" id="gmailroll" /></a><a href="form.html" title="Google" rel="gb_page_center[640, 480]"><img src="img/gmail.png" width="213" height="87" alt="gmail" /></a><script type="text/javascript">
GB_myShow = function(caption, url, /* optional */ height, width, callback_fn) {
   var options = {
       caption: caption,
       height: height || 500,
       width: width || 700,
       fullscreen: false,
       show_loading: false,
       callback_fn: callback_fn
   }
   var win = new GB_Window(options);
   return win.show(url);
}
   </script></div>
 </div>
</div>



</body>
</html>

Edited February 26, 2011 by brysonpice

newseed · February 27, 2011

Not enough to go on. Got a url so we can see it in action? Provide details to help us replicate that problem you are having.

brysonprice · February 27, 2011

Not enough to go on. Got a url so we can see it in action? Provide details to help us replicate that problem you are having.

Eddie,

I haven't put any of this on my website yet, but I can send the dreamweaver file...would that help? What else would I need to provide ?

thanks for helping

falkencreative · February 28, 2011

I took a look at the .zip which you linked to. It looks like the popup box's caption/close button table has a class of .header, which is conflicting with your header area which also uses a class of .header. In this case, you have specified that the .header class have a height of 170px, so that applies to wherever the header class is used.

You have a couple options...

-- Use a different class name for your header area (probably easiest)

-- Modify the popup script (if you know how) to use a different class name for the .header area

-- override the popup box's height by adding this to your stylesheet:

#GB_Window .header { height:24px; /* change height as necessary */ }

brysonprice · February 28, 2011

-- Use a different class name for your header area (probably easiest)

I tried doing the first suggestion, but when I changed my header to a different name in the .css style sheet, the header went missing from my pages. Do I have to go in and manually change the name somewhere else after I change the name on my style sheet?

thanks for figuring this problem out for me . You have been a GREAT HELP!

falkencreative · February 28, 2011

You would need to change the class name both within your CSS file, and any instances within your pages. For example:

<div class="header"><span class="Biography"><img src="img/contact.png" alt="biography" width="435" height="107" vspace="50" /></span>
</div>

brysonprice · February 28, 2011

You would need to change the class name both within your CSS file, and any instances within your pages. For example:
<div class="header"><span class="Biography"><img src="img/contact.png" alt="biography" width="435" height="107" vspace="50" /></span>
</div>

Do you what part of the code would change the box size?

You don't know how much I appreciate your help! I've been trying to figure this out for a while

falkencreative · February 28, 2011

You set the size when you initialize the Graybox:

GB_myShow = function(caption, url, /* optional */ height, width, callback_fn) {
   var options = {
       caption: caption,
       height: height || 500,
       width: width || 700,
       fullscreen: false,
       show_loading: false,
       callback_fn: callback_fn
   }
   var win = new GB_Window(options);
   return win.show(url);
}
   </script>

You should be able to change the "500"/"700" to whatever height/width you need.

brysonprice · February 28, 2011

You set the size when you initialize the Graybox:

GB_myShow = function(caption, url, /* optional */ height, width, callback_fn) {
   var options = {
       caption: caption,
       height: height || 500,
       width: width || 700,
       fullscreen: false,
       show_loading: false,
       callback_fn: callback_fn
   }
   var win = new GB_Window(options);
   return win.show(url);
}
   </script>

You should be able to change the "500"/"700" to whatever height/width you need.

that's exactly what I thought, but when I change it, even setting the height and width to 0, it doesn't do anything

Sign In

Pop Out box has a strange block of nothing at the top

Recommended Posts

brysonprice

newseed

brysonprice

falkencreative

brysonprice

falkencreative

brysonprice

falkencreative

brysonprice

Join the conversation

Browse

Activity

Store

Support

Sign In

** Pop Out box has a strange block of nothing at the top **

Recommended Posts

Join the conversation

Pop Out box has a strange block of nothing at the top