Solved

Overlay text not displaying in Safari 5.1.7 on a PC

Posted on 2014-03-20
14
832 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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
Creating Instructional Tutorials  

For Any Use & On Any Platform

Contextual Guidance at the moment of need helps your employees/users adopt software o& achieve even the most complex tasks instantly. Boost knowledge retention, software adoption & employee engagement with easy solution.

 

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

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.
Suggested Courses

623 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