Solved

Overlay text not displaying in Safari 5.1.7 on a PC

Posted on 2014-03-20
14
803 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
Comment Utility
run fine for me, clear your browser cache
0
 

Author Comment

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

Expert Comment

by:leakim971
Comment Utility
yes, Safari on a PC safari 5.1.7 (75345.57.2)
0
 

Author Comment

by:phillystyle123
Comment Utility
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
Comment Utility
wow! i just cleared my history and still no text! hmm
0
 
LVL 82

Expert Comment

by:leakim971
Comment Utility
same address?
0
 

Author Comment

by:phillystyle123
Comment Utility
same address or any of the others:

http://173.254.82.233/~theblum6/museum/
0
How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

 
LVL 82

Expert Comment

by:leakim971
Comment Utility
strange...
0
 
LVL 82

Expert Comment

by:Dave Baldwin
Comment Utility
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
Comment Utility
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
Comment Utility
that's exactly the configuration i'm dealing with - windows 8 works great
0
 
LVL 82

Accepted Solution

by:
Dave Baldwin earned 250 total points
Comment Utility
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.
Comment Utility
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
Comment Utility
Thanks Dudes!
0

Featured Post

IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

Join & Write a Comment

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.
Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
The purpose of this video is to demonstrate how to reset a WordPress password if you are locked out and cannot reset the password. A typical use would be if you cannot access the email to which WordPress would send the password recovery email to…
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…

772 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

Need Help in Real-Time?

Connect with top rated Experts

11 Experts available now in Live!

Get 1:1 Help Now