asked on

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

James Williams

 "visibility:hidden"

Open in new window

Try deleting the above or change to

style="visibility:hidden"

Open in new window

Selvol

Kim Walker

Do you have javascript or jquery to perform something when the x is clicked? It isn't closing for me in Firefox nor Chrome.

DS928

ASKER

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

DS928

ASKER

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?

Scott Fell

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.

DS928

ASKER

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.

Scott Fell

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.

ASKER CERTIFIED SOLUTION

Scott Fell

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

DS928

ASKER

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.

DS928

ASKER

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

Scott Fell

> 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

DS928

ASKER

Thank you! I appreciate the suggestion.