Solved

Overlay text not displaying in Safari 5.1.7 on a PC

Posted on 2014-03-20
14
815 Views
Last Modified: 2014-03-25
I'm using a WordPress plugin called Ajax Portfolio.

I'm using it here:

http://173.254.82.233/~theblum6/design/

Rollover any thumb and an overlay slides up with a text title - i.e. "design | portfolio"

The text title does not display on Safari 5.1.7 on my PC (not sure about MAC but it works on my iPad). The overlay slides up but no text. If I click and drag over the overlay area, I see the the title -but it's not displaying.

Here are the styles -I tried messing with z-index but no love:

@font-face {

    font-family: 'icons';

    src: url('../font/fontawesome-webfont.eot');

    src: url('../font/fontawesome-webfont.eot?#iefix') format('embedded-opentype'),

         url('../font/fontawesome-webfont.woff') format('woff'),

         url('../font/fontawesome-webfont.ttf') format('truetype'),

         url('../font/fontawesome-webfont.svg#entyporegular') format('svg');

    font-weight: normal;

    font-style: normal;



}



/* Clearfix

---------------------------------------------------------- */



.clearfix:before,

.clearfix:after {

    content: " "; /* 1 */

    display: table; /* 2 */

}



.clearfix:after {

    clear: both;

}



.clearfix {

    *zoom: 1;

}



/* Isotope Styles

---------------------------------------------------------- */



.isotope-item {

  z-index: 2;

}



.isotope-hidden.isotope-item {

  pointer-events: none;

  z-index: 1;

}



/**** Isotope CSS3 transitions ****/



.isotope,

.isotope .isotope-item {

  -webkit-transition-duration: 0.8s;

     -moz-transition-duration: 0.8s;

      -ms-transition-duration: 0.8s;

       -o-transition-duration: 0.8s;

          transition-duration: 0.8s;

}



.isotope {

  -webkit-transition-property: height, width;

     -moz-transition-property: height, width;

      -ms-transition-property: height, width;

       -o-transition-property: height, width;

          transition-property: height, width;

}



.isotope .isotope-item {

  -webkit-transition-property: -webkit-transform, opacity;

     -moz-transition-property:    -moz-transform, opacity;

      -ms-transition-property:     -ms-transform, opacity;

       -o-transition-property:      -o-transform, opacity;

          transition-property:         transform, opacity;

}



/**** disabling Isotope CSS3 transitions ****/



.isotope.no-transition,

.isotope.no-transition .isotope-item,

.isotope .isotope-item.no-transition {

  -webkit-transition-duration: 0s;

     -moz-transition-duration: 0s;

      -ms-transition-duration: 0s;

       -o-transition-duration: 0s;

          transition-duration: 0s;

}



/* Portfolio Grid Styles

---------------------------------------------------------- */

.portfolio-grid { position:relative }



.portfolio-grid * {

	margin:0;

	padding:0;

	list-style:none;

	-moz-box-sizing:border-box;

		-webkit-box-sizing:border-box;

			box-sizing:border-box;

}



.portfolio-grid-container {

	width: 908px;

	position: relative;

	opacity:0;
	margin-left:35px;
	margin-top:-5px;
	

}

.portfolio-grid-container .portfolio-image {

	display: block;

	position:relative;
	width:209px;
	height:157px;
	margin-bottom:18px;

}



.portfolio-grid-container .portfolio-image.active > div { 

	opacity:1 !important;

	display:block !important;

	bottom:0px !important;

}



.portfolio-grid-container .portfolio-image.active > div.overlay { 

	opacity:1 !important;

	display:block !important;

	bottom:0px !important;

	width:100% !important;

	height: auto !important;

	left: 0 !important;

	position: absolute !important;

	visibility: visible !important;

	

}





.portfolio-grid-container .portfolio-image img {

	display:block;

	margin:0;

	width:100%;

}



/* Ajax Container Styles */

.ajax-container { position:relative; overflow:hidden; height:0; }





.ajax-container .close-ajax-container,

.ajax-container .next-ajax-container,

.ajax-container .prev-ajax-container {

	background: #fff;

    border: 1px solid #EBE8E6;

    display: inline-block;

    font-family: 'icons';

    font-size: 14px;

    height: 40px;

    line-height: 39px;

    position: absolute;

    right: 0;

    text-align: center;

    width: 40px;

    z-index: 20;

}



.ajax-container .close-ajax-container { top: 25px }



.ajax-container .next-ajax-container { top: 64px; }



.ajax-container .prev-ajax-container { top: 103px }



.ajax-container > .ajax-controls a:hover { background-color:#eee }



.ajax_project {

	/*background: red;*/

	padding: 25px 0 25px 0;

	/*border-top: 1px solid #EBE8E6;

	border-bottom: 1px solid #EBE8E6;*/
width:875px;
/*margin-left:35px;*/

}

.ajax_project .project_media {

	float:left;

	width:75%;

	padding-right:0;
	/*margin-left:-45px;*/
	/*background:gray;*/
	

}

.ajax_project .project_description {

	padding-right:0;
	padding-left:30px;

	overflow:hidden;
	background:white;
	

}

.ajax_project .project_description {

	font-size:13px;

	line-height:20px;

}

.ajax_project .title {

    font-size: 14px;

	margin:0 0 10px;

	padding:0;

    font-weight: bold;

    letter-spacing: 0;

    text-transform: uppercase;

	color: #676761;

}



.ajax_project .project_description p {

	margin-bottom:12px;

}



.ajax_project .project_description > *:first-child { margin-top:0; }

.ajax_project .project_description > *:last-child { margin-bottom:0; }



/* Slider Styles */



.animating-height {

    -moz-transition: height 400ms ease;

    -webkit-transition: height 400ms ease;

    transition: height 400ms ease;

}



.project_flexslider { position:relative }



.project_slides {

	position:relative;

	margin:0;

	padding:0;

	list-style:none;
	width:621px;
	

}



.project_slides > li {

	margin:0;

	padding:0;

	list-style:none;

	display: none;
	

	-webkit-backface-visibility: hidden;
	
	overflow:hidden;

}



.project_slides li img,

.project_slides li video {

	display:block;

	margin:0;

	padding:0;

	width: 100%;

	max-width:100%;

}



.project_slides li iframe {

	max-width: 99.4%;

    width: 100%;

	background:url(../images/loader_small.gif) center center no-repeat;

}



.project_flexslider .flex-direction-nav {}



.project_flexslider .flex-direction-nav a {

	background-color:rgba(0, 0, 0, 0.3);

	background-position:center center;

	background-repeat:no-repeat;

    display: block;

    height: 50px;

    margin: -25px 0 0;

    position: absolute;

    text-align: center;

    text-decoration: none;

    text-indent: -800%;

    top: 50%;

    width: 50px;

    z-index: 99;

	border-radius:3px;

}



.project_flexslider .flex-direction-nav a:hover { background-color:rgba(0, 0, 0, 0.6) }

.project_flexslider .flex-direction-nav a:focus { outline:none }

.project_flexslider .flex-direction-nav a.flex-disabled { display:none }

.project_flexslider .flex-direction-nav a.flex-prev {

	background-image:url(../images/arrow_prev.png);

	left:50px;

}



.project_flexslider .flex-direction-nav a.flex-next {

	background-image:url(../images/arrow_next.png);

	right:16px;

}





/* Gallery

---------------------------------------------------------- */



.gallery-block .gallery-inner {

    font-size: 20px;

    margin: auto;

    position: relative;

    text-align: center;

    min-height: 0;

    -moz-transition: height .4s ease;

    -webkit-transition: height .4s ease;

    transition: height .4s ease;

    overflow: hidden;
	width:600px;
	
	/*background:olive;*/

}



.gallery-block ul {

    list-style: none;

    padding: 0;

    margin: 0;

}



.gallery-block .item img { width: 100% }



.gallery-block .items-small {

    position: relative;

    z-index: 2;

}
/*.gallery-block .items-small img{width:194px;}*/
/*from demo assets css*/
.project_flexslider { position:relative }

.project_flexslider ul.project_slides { position:relative; margin:0 0 0 20px; padding:0 0 0 35px; list-style:none;}
.project_flexslider ul.project_slides li { margin:0; padding:0; list-style:none; -webkit-backface-visibility: hidden; }

.project_flexslider ul.project_slides li img,
.project_flexslider ul.project_slides li video { display:block; margin:0; padding:0; width: 95%; max-width:95%; }
.project_flexslider ul.project_slides li iframe { background:url(../../images/loader_small.gif) center center no-repeat; max-width: 99.4%; width: 100%; }
/*eof from demo assets css*/

/*custom styles added by craig*/
.project_slide.slide-type-image div img{/*width:800px;*/}
/*eof custom styles added by craig*/



.gallery-block .items-small .item {

    display: block;

    cursor: pointer;

    width: 25%;

    float: left;

    -webkit-transition-property: -webkit-transform;

    -ms-transition-property: -ms-transform;

    -moz-transition-property: -moz-transform;

    transition-property: transform;

}



.gallery-block .items-big {

    position: absolute;

    top: 0;

    left: 0;

    right: 0;

    width: 100%;

    height: 100%;

    z-index: 1;

}



.gallery-block .items-big .item {

    position: absolute;

    width: 100%;

    height: auto;

    left: 0;

    right: 0;

    top: 0;

    opacity: 0;

    visibility: hidden;

}



.gallery-block .controls {

    text-align: center;

    font-size: 14px;

    display: none;

    opacity: 0;

    position: absolute;

    bottom: 10px;

    left: 0;

    right: 0;

    z-index: 10;

}



.gallery-block .controls > span {

    background: #E2472F;

    color: #fff;

    border-radius: 3px;

    width: 26px;

    text-align: center;

    line-height: 26px;

    cursor: pointer;

    display: inline-block;

    margin: 0 2px;

	font-family:'icons';

}



.gallery-block .controls > span:hover {

    background: rgba(0,0,0,0.5);

    color: #fff;

}





/**** Portfolio Filters Styling ****/



.sort_width_container {

    padding: 14px 0;

    text-align: center;

    text-transform: uppercase;

	/*border-bottom:1px solid #EBE8E6;*/

	margin-bottom:-1px;
	
	width:875px;
	margin-left:35px;

}



.sort_width_container a{

	color: #676761;

    font-size: 14px;

    text-decoration: none;

	outline:none;

}



.sort_width_container a:after {

	color: #676761;

    content: "/";

    display: inline-block;

    font-weight: normal;

    margin-right: 8px;

    padding-left: 8px;

}



.sort_width_container a:last-child:after { display:none }



.sort_width_container a:hover { color:#111 }





.sort_width_container a.active_sort {

    font-weight: bold;

}





/**** Loader  ****/



.portfolio-grid .portfolio-loader {

	position:absolute;

    z-index: 10000;

	top:0;

	bottom:0;

	left:0;

	right:0;

	display:none;

	

}



.portfolio-grid .portfolio-loader > div {

	background: url(../images/loader.gif) no-repeat center center #000;

    border-radius: 30px;

    height: 60px;

    left: 50%;

    margin-left: -30px;

    margin-top: -30px;

    position: absolute;

    top: 50%;

    width: 60px;

	opacity:0.7;

    z-index: 10000;

}



/* General

----------------------------------------------------------------------------------------------------*/

.overlayer { display: inline-block; max-width: 100%; }

.overlay { display: none }

.overlayer .overlay { visibility: hidden }





/* Default Style

----------------------------------------------------------------------------------------------------*/

.overlayer .overlay-default { background: url(../images/overlay-zoom.png) 50% 50% no-repeat; background-color: rgba(0,0,0,0.5); display: none; }

.overlayer .overlay-default.play { background: url(../images/overlay-play.png) 50% 50% no-repeat; background-color: rgba(0,0,0,0.5); }

.overlayer .overlay-default.link { background: url(../images/overlay-link.png) 50% 50% no-repeat; background-color: rgba(0,0,0,0.5); }



/* Overlay Style

----------------------------------------------------------------------------------------------------*/

.overlayer .overlay { background: url(../images/overlay-ie.png) 0 0 repeat; background: none rgba(0,0,0,0.5); text-shadow: none; z-index: 99; display: none; }

.overlayer .overlay,

.overlayer .overlay a { color: #fff }

.overlayer .overlay a { text-decoration: underline }

.overlayer .overlay > div { padding: 10px }

.overlayer .overlay.remove-padding > div { padding: 0 }

.overlayer .overlay > div > *:first-child { margin-top: 0 }

.overlayer .overlay > div > *:last-child { margin-bottom: 0 }





@media only screen 

and (max-width: 767px) {

	.ajax_project .project_media {

		float:none;

		width:100%;

		padding-right:0;

		margin-bottom:25px;

	}

	.ajax_project .project_description {

		padding-right:0;

	}

	

	.ajax-container .close-ajax-container,

	.ajax-container .next-ajax-container,

	.ajax-container .prev-ajax-container {

		top: 25px;

		width: 40px;

		z-index: 20;

	}

	

	.ajax-container .close-ajax-container {

		right: 25px;

	}

	

	.ajax-container .next-ajax-container {

		right: 64px;

	}

	

	.ajax-container .prev-ajax-container {

		right: 103px;

	}



	.portfolio-grid-container .portfolio-image > div.overlay { 

		opacity:1 !important;

		display:block !important;

		bottom:0px !important;

		width:100% !important;

		height: auto !important;

		left: 0 !important;

		position: absolute !important;

		visibility: visible !important;

		

	}

	

}

Open in new window

0
Comment
Question by:phillystyle123
  • 6
  • 4
  • 2
  • +1
14 Comments
 
LVL 82

Expert Comment

by:leakim971
ID: 39943695
run fine for me, clear your browser cache
0
 

Author Comment

by:phillystyle123
ID: 39943749
so you saw the text in the overlays on safari in a PC??
0
 
LVL 82

Expert Comment

by:leakim971
ID: 39943757
yes, Safari on a PC safari 5.1.7 (75345.57.2)
0
DevOps Toolchain Recommendations

Read this Gartner Research Note and discover how your IT organization can automate and optimize DevOps processes using a toolchain architecture.

 

Author Comment

by:phillystyle123
ID: 39943759
just cleared my history and restarted safari -still the same issue -no overlay text in safari on a pc -

http://173.254.82.233/~theblum6/design/
0
 

Author Comment

by:phillystyle123
ID: 39943760
wow! i just cleared my history and still no text! hmm
0
 
LVL 82

Expert Comment

by:leakim971
ID: 39943768
same address?
0
 

Author Comment

by:phillystyle123
ID: 39943794
same address or any of the others:

http://173.254.82.233/~theblum6/museum/
0
 
LVL 82

Expert Comment

by:leakim971
ID: 39943812
strange...
0
 
LVL 83

Expert Comment

by:Dave Baldwin
ID: 39943813
The text that overlays the images on a mouseover works fine for me in Safari on both my PC and my Mac.  Same as Firefox.
0
 
LVL 42

Assisted Solution

by:David S.
David S. earned 250 total points
ID: 39943861
The problem is only showing up for some people? That's very strange.

The text is not visible here in Safari 5.1.7 on Win7x64 Pro.
0
 

Assisted Solution

by:phillystyle123
phillystyle123 earned 0 total points
ID: 39943929
that's exactly the configuration i'm dealing with - windows 8 works great
0
 
LVL 83

Accepted Solution

by:
Dave Baldwin earned 250 total points
ID: 39943957
If it is only Safari 5.1.7 on Win7x64 Pro, then it will never get fixed.  Apple does not support Safari on Windows anymore.
0
 
LVL 42

Expert Comment

by:David S.
ID: 39944003
Whether Apple supports it or not is not nearly as significant a fact as the one that some people continue to use it. Remember it took a long time for people to stop using IE5/Mac when MS stopped supporting it.

I would recommend making a minimal test case to try to figure out what is causing this bizarre issue.

By the way, I just checked Safari 5.0.5 on WinXP via a virtual machine and this bug is not present. However, that's pretty much irrelevant because people are much more likely to be using the browser and OS version combination with the bug than otherwise.
0
 

Author Closing Comment

by:phillystyle123
ID: 39952725
Thanks Dudes!
0

Featured Post

3 Use Cases for Connected Systems

Our Dev teams are like yours. They’re continually cranking out code for new features/bugs fixes, testing, deploying, testing some more, responding to production monitoring events and more. It’s complex. So, we thought you’d like to see what’s working for us.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
Placeholder text not disappearing in Contact Form 7 2 15
PHP AJAX Wordpress 9 21
css selector 1 16
Wordpress plugins not working in html 3 22
This article discusses how to create an extensible mechanism for linked drop downs.
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
The purpose of this video is to demonstrate how to exclude a particular blog category from the main blog page. This is can be used when a category already has its own tab, or you simply want certain types of posts not to show up on the main blog. …
The purpose of this video is to demonstrate how to prevent comment spam on a WordPress Website. This will be demonstrated using a Windows 8 PC. Plugin Akismet will be used. Go to your WordPress login page. This will look like the following: myw…

770 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question