opacity in IE earlier than v9 « Support Forum | Kriesi.at

Support Forum » Flashlight

opacity in IE earlier than v9

5 posts from 2 voices

Started 1 year ago by fellfromgrace
Latest reply from fellfromgrace
This topic is resolved

Tags:

fellfromgrace
Member

Hi

I read through the earlier thread on opacity and used all of the methods with varying success, finally using the rgba method which seemed to work absolutely fine on Firefox (and chrome). Then, at my daughter's house, I loaded up the site on an older version of Maxthon which uses the IE engine (prior to ie 9 on which it looks fine) - all of the transparency had disappeared except for the left hand menu bar which had a white transparency, Everything else was black. As the logo had some out rather small I had redesigned the background and put the logo in the centre. I revamped it in Photoshop and put it at the bottom right, so that in the meantime it will show up ok

I have tried all the other transparency options shown in the original article and they all gave me a white semi transparent menu bar and a completely transparent everything else, which given that I have a heavily patterned background image, made it very hard to read. I increased a portion at the bottom of the background image to make it legible at least at the bottom but once scrolled up it was very very hard to read.

As I have absolutely no idea what I'm doing with CSS I am of course working totally 'in the dark' as it were, but I also tried it with a transparent png as the background - with this code:

.content .box {
background: url("http://www.myserver.com/blahblahblah/opacity_black_50.png") repeat transparent;
}

.blog-meta {
background: url("http: etc and same for
.return_content, {

wslidecontrolls_fullscreen, {

.arrowslidecontrolls_fullscreen, {

.hide_content_wrap a, {

.img_count, {

.slide_thumbnails, {

.widget {

and again I got the completely transparent background. I tried to omit the 'transparent' bit on each one but it didn't make any difference. I have tried combinations of all the options and have now run out of ideas. I have .png files of each as they look now (just using the rgba method) so can sent if you wanted t see how it looks, but I would like to have the same look in ie if this is possible, (Remembering I know absolutely nothing about css coding )

url of site is http://www.fellffromgrace.com. I am using a static background gallery (ie one pic in the gallery) as it seems to work better than a background image.

I am still getting the spinning wheel for the facebook bit at the top though ....

any help would be so much appreciated
many thanks

Posted 1 year ago #
Devin
Moderator

Hi Fellfromgrace,

First, I believe you are getting the spinning circle because you are missing image files in the featured-articles plugin. Specifically: left.png, nav.png,right.png. All within the "classic" theme folder for that plugin.

As for support in Maxthon, even if its using the IE engine, its not a supported browser for the theme.

You can try a couple of things: Turn off all plugins and switch to the default theme styling. Test the theme transparency issue again. If its working now, the style modifications are to blame. If its not, remove any custom styles you have added in the Quick CSS and save them to add in later. Check for proper display, add each style and repeat.

Posted 1 year ago #
fellfromgrace
Member

Hi Devin
thanks for your reply. Re the spinning circle, it happens whether or not the featured articles plugin is used so I don't think it's related. In fact I don't know where the spinning circle is coming from. I can see the code in firebug but I don't know how to amend/delete it as I don't know what plugin it is! I have turned off all the ones I thought it could be but to no avail, I will try your suggestion though if I can work out what to do ... I am a bit of a dunce with coding issues

Re Maxthon - I have tried it using IE7 and 8 and the result is the same. I haven't got them on my pc but I tried it on browserstack. I have read before that transparency is an issue on Internet Explorer but in an article that wasn't relevant to this theme. As I don't understand css (sorry) I wouldn't be able to relate that info to Flashlight so I was wondering if anyone had a solution. The defalt styling isn't transparent anyway so the IE vs Everyone else issue wouldn't apply if I used the default settings as there wouldn't be any transparency to be there or not (if you see what I mean) :-)

thanks again for your help

Posted 1 year ago #
fellfromgrace
Member

psI have discovered what was causing the spinning circle - it was wordbooker. Deactivated it and the spinner disappeared!

Posted 1 year ago #
fellfromgrace
Member

I have resolved this after much trawling the web and experimentation. Here's what I put in the custom css box:
.box, .blog-meta, .return_content, .arrowslidecontrolls_fullscreen, .hide_content_wrap a, .img_count, .slide_thumbnails, .widget{
background-color: rgba(0,0,0,0.80);
opacity:0.80;.opaque
-ms-filter:"progid:DXImageTransform.Microsoft
.Alpha(Opacity=70)";
filter: alpha(opacity=70);
}
.entry-content, .blog-meta {
font: 14px/1.7em Georgia,Times,"Times,"Times New Roman",serif;
}

This SEEMS to work ok - you would just change the required opacity in all of the above statements for the amount you require, I set it lower for the -ms-filter(Opacity and the filter: alpha opacity as it seemed to work in a different way, so I have 80% in the rgba setting and 70% in the ie 7 and 8 settings, I don't know how it looks in earlier versions of ie, I have tested it in browserstack and although it's somewhat greyer than in firefox or chrome, at least it DOES have a percentage opacity which is what I wanted. Hope this is of use to someone else as it has taken me over a week to get it sorted! :-)
PS: for anything earlier than ie7 I have added the plugin NoMoreIE6 which seems to work on on browserstack, as site doesn't seem to load in earlier versions ....

Posted 1 year ago #