Jump to content
Sign in to follow this  
kathmason

IE compatibility issues with transparency - blue colour

Recommended Posts

kathmason

Hi I'm having the above problems in IE using PageLines Lite with MUD theme installed. Sitehttp://weddingmakeupnewcastle.com.au Displays great in Firefox, Chrome WAlRx.jpg but instead of transparency in IE it displays a bright blue box. BPGmG.jpg I have checked fix IE compatibility issues with no success. I have deactivated plugins with no success. I have tried numerous suggestions on forum and google with no success. Editing the mud stylesheet only. Closest I have read is suggestion here http://robertnyman.com/2010/01/11/css-background-transparency-without-affecting-child-elements-through-rgba-and-filters/ but I don't know how to "declare background: transparent for IE web browsers, preferably served via conditional comments or similar" so I can't get this to work. A solution would be greatly appreciated, thanks

Share this post


Link to post
Share on other sites
catrina

IE is known to have issues with displaying transparency. Do you have that blue gradient image set up anywhere or is it just showing up?


Please read the docs before posting. Please do not private message me unless I ask you to.

Designer | Catrina Dulay

Founder | Catrina and Mouse

Share this post


Link to post
Share on other sites
kathmason

Not that I'm aware of. Yes I've read about the transparency issues and have tried to implement numerous suggestions without success, although I cannot tell if this is because I am doing so wrong or because the fixes do not work.

Share this post


Link to post
Share on other sites
Rob

You need to find a CSS3 solution to IE transparency. However, IE8 and before don't use CSS3 and I'm not too sure IE9 does too well with it. Just to give you an example... text shadowing has been around for a long time, but all versions of IE don't like it; won't do it and so in IE my shadowed text is plain. Unfortunately, even the most optimistic coding solutions can't fix bad browser coding. If I see anything I will post it but try that CSS3 solution idea. You never know!


Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
kathmason

I have found a few things about this topic but I am wondering if my implementation skills are up to the challenge. By using inspect element I believe this is the element? that is affected.

element {
	}
	/:2377
	.hentry-pad, .post-nav {
	    padding: 15px;
	    background-color: rgba(255, 255, 255, 0);
	    background-image: -moz-linear-gradient(center top , rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0.65));
	    background-repeat: repeat-x;
	    -moz-box-sizing: border-box;
	    box-shadow: 0px 1px 0px rgba(255, 255, 255, 0.8) inset, 1px 0px 0px rgba(255, 255, 255, 0.8) inset, 0px 1px 0px rgba(0, 0, 0, 0.05), 1px 0px 0px rgba(0, 0, 0, 0.05);
	}
	
	.hentry-pad {
	    padding: 0px 0px 25px;
	}
	
	html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
	    margin: 0px;
	    padding: 0px;
	    border: 0px none;
	    outline: 0px none;
	    font-size: 100%;
	    vertical-align: baseline;
	    background: none repeat scroll 0% 0% transparent;
	}
	
	.hentry, .fpost .post-excerpt {
	    font-size: 1.03em;
	    line-height: 1.55em;
	}
	
	#page, #subnav ul li a:active, .commentlist cite a, .metabar a:hover, .post-nav a:hover, #site #dsq-content .dsq-request-user-info td a, #page .wp-pagenavi a:hover, #page .wp-pagenavi .current, .content-pagination a:hover .cp-num {
	    color: rgb(0, 0, 0);
	}
	
	body, .font1, .font-primary, .commentlist {
	    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
	}
	
	body, .font1, .font-primary, .commentlist, input {
	    font-family: Georgia,'Times New Roman',Times,serif;
	}
	
	body {
	    font-size: 14px;
	    line-height: 155%;
	}
	
	body {
	    line-height: 1;
	}
	
OK. Using
	div.hentry-pad{
	background:transparent;
	filter:progid:DXImageTransform.Microsoft.gradient(startColorStr=#C6e0f2,endColorStr=#C6e0f2);
	-ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorstr=#C6e0f2,endColorstr=#C6e0f2)";
	zoom: 1;
	}
	

I have corrected the bright blue colour to a lighter blue but knocked out the transparency in Firefox and Chrome. Any suggestions on how to restore this? thanks

Share this post


Link to post
Share on other sites
Danny

Hi, I have viewed your website and your custom CSS, is slightly off. I would recommend you remove your custom CSS for the transparency and then use the link below to generate your code correctly. http://www.colorzilla.com/gradient-editor/


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
kathmason

Brilliant! Works a treat across IE, Chrome and Firefox. Thanks so much for your help Regards Kath

Share this post


Link to post
Share on other sites
Danny
:D No problem Kath, was happy to help!

Please search our forums, before posting!

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

Sign in to follow this  

×