?
Solved

Overlay text not displaying in Safari 5.1.7 on a PC

Posted on 2014-03-20
14
Medium Priority
?
840 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
Simplify Your Workload with One Tool

How do you combat today’s intelligent hacker while managing multiple domains and platforms? By simplifying your workload with one tool. With Lunarpages hosting through Plesk Onyx, you can:

Automate SSL generation and installation with two clicks
Experience total server control

 

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 84

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 43

Assisted Solution

by:David S.
David S. earned 1000 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 84

Accepted Solution

by:
Dave Baldwin earned 1000 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 43

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

Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

Question has a verified solution.

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

Browsers only know CSS so your awesome SASS code needs to be translated into normal CSS. Here I'll try to explain what you should aim for in order to take full advantage of SASS.
This article discusses how to implement server side field validation and display customized error messages to the client.
The purpose of this video is to demonstrate how to set up basic WordPress SEO. This will be demonstrated using a Windows 8 PC. The plugin used will be WordPress SEO by Yoast. Go to your WordPress login page. This will look like the following: myw…
The viewer will learn the basics of jQuery including how to code hide show and toggles. 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…
Suggested Courses

719 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