Unable to close Div in Safari

I have a Div popup that closes in Explorer and Chrome.  However, with Safari, it doesnt close.

the link... www.schuremediagroup.com
contact page.  After you hit send the div pop-ups and you click on the X to close it.

<div class="popup" "visibility:hidden">
								<a href="#" class="close" data-type="close"><span></span></a>
                                	<div align="center">
										<?php echo $popOut; ?>
									</div>
								</div>

Open in new window


The CSS
<style>
		.popup
		{
			font:Arial, Helvetica, sans-serif;
			font-size:36px;
			font-style:normal;
			font-color;#FFF;
			line-height:50px;
			display:inline-block;
			min-width:500px; 
			/*width:500px;
			height:100px;*/
			position:absolute;
			z-index:10;
			left:50%;
			top:30%;
			margin-left:-250px;
    		margin-top:-50px;
			border-style:solid;
 			border-color:#FFF;
			border-width:8px;
			background-color:#000000;
			opacity:0.6;
   			filter:alpha(opacity=60); /* For IE8 and earlier */
			padding:25px;
			border-radius-topleft: 20px; /* top left corner */
			border-radius-topright: 20px; /* top right corner */
			border-radius-bottomleft: 20px; /* bottom left corner */
			border-radius-bottomright: 20px; /* bottom right corner */
			border-radius: 20px 20px 20px 20px; /* shorthand topleft topright bottomright bottomleft */
			-webkit-border-top-left-radius: 20px;
			-webkit-border-top-right-radius: 20px;
			-webkit-border-bottom-left-radius: 20px;
			-webkit-border-bottom-right-radius: 20px;
			-moz-border-radius-topleft: 20px;
			-moz-border-radius-topright: 20px;
			-moz-border-radius-bottomleft: 20px;
			-moz-border-radius-bottomright: 20px;
		}
		</style>

Open in new window

DS928Asked:
Who is Participating?
 
Scott Fell, EE MVEConnect With a Mentor Developer & EE ModeratorCommented:
0
 
selvolCommented:
 "visibility:hidden"

Open in new window


Try deleting the above  or change to

style="visibility:hidden"

Open in new window


Selvol
0
 
Kim WalkerWeb Programmer/TechnicianCommented:
Do you have javascript or jquery to perform something when the x is clicked? It isn't closing for me in Firefox nor Chrome.
0
Free Tool: Subnet Calculator

The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

 
DS928Author Commented:
No didn't work.  I deleted it.

<div class="popup">
								<div class="close_popup" align="right">X</div>
                                <!--a href="#" class="close" data-type="close"><span></span></a-->
                                	<div align="center">
										<?php echo $popOut; ?>
									</div>
								</div>

Open in new window

0
 
DS928Author Commented:
I was playing with it. It should work now.

<script type="text/javascript"> Cufon.now(); </script>
		<script>
		$(window).load(function() {
			$('.spinner').fadeOut();
			$('body').css({overflow:'inherit'})
		})
		</script>

Open in new window


Could it be the z-index?
0
 
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
Part of your issue may have to do with html coding errors.  There are many looking at the validator.  Most of the errors may not make a difference, but it does show unclosed div's.  Every browser handles these errors differently.
0
 
DS928Author Commented:
I've been reading.  And I defintly think its the Z-index.  It seems to be a known issue.  Is there another way to make the div the top layer that works in all browsers?  Cleaned up almost all of the errors.  Not sure about the Max length and the div endings though.
0
 
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
I seem to remember working with that exact same template for somebody here on ee but for a hair salon.  I am pretty sure I rewrote the code because it was a mess in order for it to work.  I will  see if I can dig it up.
0
 
DS928Author Commented:
Thanks.  Very similar.  Everything is working on mine at this point.  I am ignoring the errors though, Cause after I fixed them everything was messed up.  In any case the only problem I have at this point is being able to click on the X and closing the Div.  Does not close on iPhone, or iPad using Safari.
0
 
DS928Author Commented:
This works.  It was the Javascript.

<script>
		$(document).on('click','.close_popup',function(){
    	$(this).parent().fadeTo(300,0,function(){
          $(this).remove();
    	});
		});
		if(document.addEventListener){
		document.addEventListener('touchstart', function(e){
			if(e.target.className == 'close_popup'){
				$('.close_popup').parent().stop().fadeTo(300,0,function(){
					$(this).remove();
				});
			}
		}, false);
	}

		
		</script>

Open in new window

0
 
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
>  I am ignoring the errors though, Cause after I fixed them everything was messed up

Yea it is a bit of a domino effect.  You may have had a fix that helped the symptom and not the problem.    I don't believe all the errors dealing with comments and dashes will mess you up, but unclosed tags will.  If you closed the tags and then found more or new problems, it could be the way the tags were closed.   It is a good idea to stagger your code to help you determine where to close open tags.  You can use a tool like html tidy http://infohound.net/tidy/ to try and get your html cleaned up and stagger.  

Just remember to close in the same order something is opened.

<div class="1">
     <div class="1.1">
          <p>stuff</p>
           <div class="1.1.1">
                <p>more stuff</p>
            </div>
     </div>
     <div class="2">
          <ul>
               <li>item</li>
               <li>item</li>
               <li>item</li>
          </ul>
     </div>
</div> 

Open in new window

0
 
DS928Author Commented:
Thank you!  I appreciate the suggestion.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.