SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Enthusiast
    Join Date
    Jul 2012
    Posts
    49
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Mosaic Sliding Boxes

    Is anyone familiar with the mosaic sliding boxes script?
    I am having issues with IE !!!

    The paragraph text is meant to be white, but IE shows it as a light grey, like there is a transparency on the text.

    Mosaic CSS
    Code:
    /*
    	Mosaic - Sliding Boxes and Captions jQuery Plugin
    	Version 1.0.1
    	www.buildinternet.com/project/mosaic
    	
    	By Sam Dunn / One Mighty Roar (www.onemightyroar.com)
    	Released under MIT License / GPL License
    */
    
    /*General Mosaic Styles*/
    
    html, body, div, h1, h2, h3, h4, h5, h6, p, a, blockquote, pre, code, hr, img, form, fieldset, legend, label, textarea, span, em, strong, sub, sup, cite, table, tbody, td, tfoot, th, thead, tr, tt, dl, dt, dd, ol, ul, li {margin: 0; padding: 0;}
    
    .mosaic-block {
    	float:left;
    	position:relative;
    	overflow:hidden;
    	width:280px;
    	height:250px;
    	margin-right:10px;
    	background:#111 url(../img/progress.gif) no-repeat center center;
    	border:0px solid #fff;
    	clear: left;
    	margin-bottom: 10px;
    }
    
    	.mosaic-backdrop {
    		display:none;
    		position:absolute;
    		top:0;
    		height:100%;
    		width:100%;
    		background:#D31145;
    	}
    	
    	.mosaic-overlay {
    		display:none;
    		z-index:5;
    		position:absolute;
    		width:100%;
    		height:100%;
    		background:#D3BBB0;
    	}
    	
    		/*** Custom Animation Styles (You can remove/add any styles below) ***/
    		.circle .mosaic-overlay {
    			background:url(../img/hover-magnify.png) no-repeat center center;
    			opacity:0;
    			-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=00)";
    			filter:alpha(opacity=00);
    			display:none;
    		}
    		
    		.fade .mosaic-overlay {
    			opacity:0;
    			-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=00)";
    			filter:alpha(opacity=00);
    			background:url(../img/bg-black.png);
    		}
    		
    		.bar .mosaic-overlay {
    			bottom:-100px;
    			height:100px;
    			background:url(../img/bg-black.png);
    		}
    		
    		.bar2 .mosaic-overlay {
    			bottom:-50px;
    			height:100px;
    			opacity:0.8;
    			-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
    			filter:alpha(opacity=80);
    		}
    		
    			.bar2 .mosaic-overlay:hover {
    				opacity:1;
    				-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    				filter:alpha(opacity=100);
    			}
    		
    		.bar3 .mosaic-overlay {
    			top:-100px;
    			height:100px;
    			background:url(../img/bg-black.png);
    		}
    		/*** End Animation Styles ***/
    
    
    .clearfix{ display: block; height: 0; clear: both; visibility: hidden; }
    						
    				.details{ margin:15px 20px; }	
    					h4{
    	line-height:80%;
    	color:#fff;
    	font-family: Arial, Helvetica, sans-serif;
    	font-size: 25pt;
    	font-weight: bold;
    	display: block;
    	margin-bottom: 10px;
    }
    					para{
    	color:#FFF;
    	font-family: Arial, Helvetica, sans-serif;
    	font-size: 10px;
    	font-weight: normal;
    }
    					a{ text-decoration:none; }


    HTML Code:
    <div class="mosaic-block fade">
    <a href="sectors.htm" target="_blank" class="mosaic-overlay">
    <div class="details">
    <h4>HEADING</h4><p>
    		<para>We are blah.</para>				
    </div></a>
    <div class="mosaic-backdrop"><img src="images/market-sectors.jpg"/></div>
    	</div>
    Any ideas on how to fix this?

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,177
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    It's most likely to do with this:

    Code:
    .bar2 .mosaic-overlay {
    			bottom:-50px;
    			height:100px;
    			opacity:0.8;
    			-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
    			filter:alpha(opacity=80);
    		}
    That's likely to cause text to have slight opacity, letting the background through. A live link would enable more definite conclusions.

  3. #3
    SitePoint Enthusiast
    Join Date
    Jul 2012
    Posts
    49
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    It's most likely to do with this:

    Code:
    .bar2 .mosaic-overlay {
    			bottom:-50px;
    			height:100px;
    			opacity:0.8;
    			-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
    			filter:alpha(opacity=80);
    		}
    That's likely to cause text to have slight opacity, letting the background through. A live link would enable more definite conclusions.
    thanks ralph.m, but that didn't fix the problem.
    The problem seems to lie here:
    para{
    color:#FFF;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 10px;
    font-weight: normal;
    The h4 tag shows up as white on IE, but the para which contains the description is still very faint and grey.

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,177
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by milkandhoney View Post
    thanks ralph.m, but that didn't fix the problem.
    How did you test it? It you comment out that code, make sure to refresh your browser.

  5. #5
    SitePoint Enthusiast
    Join Date
    Jul 2012
    Posts
    49
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I did refresh, about two hundred times

    What did the trick in the end was to change the para tag to a div class and it is rendering OK across IE and other browsers, although not sure why...

  6. #6
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,177
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by milkandhoney View Post
    What did the trick in the end was to change the para tag to a div class and it is rendering OK across IE and other browsers, although not sure why...
    O, I didn't notice you had <para> </para> tags in there. The problem is that these tags don't exist in HTML.

  7. #7
    SitePoint Enthusiast
    Join Date
    Jul 2012
    Posts
    49
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    O, I didn't notice you had <para> </para> tags in there. The problem is that these tags don't exist in HTML.
    LOL as a novice I had no idea that that was the case, so I just did what I always do "trial and error".
    Thanks ralph.m


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •