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?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

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
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
Determine the Perfect Price for Your IT Services

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden with our free interactive tool and use it to determine the right price for your IT services. Download your free eBook now!

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
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
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
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.