Ie 7 Breaking Css Filters On Dynamic Drive Site

[Elijah7]

Here is the Link : http://www.dynamicdrive.com/dynamicindex5/popinfo.htm

View this in IE 6 - LOVELY...

View this Link in IE 7 - FAILURE.

Question?

What is the if(lte IE7) code to make the link http://www.dynamicdrive.com/dynamicindex5/popinfo.htm
work in both Browser Versions?

The Javascript File needs editing and the author's email no longer functions.

Transitions and Complex shadows are the target for the solution.

Does anyone in the forum have a clue how to do this?

i give up - hope someone can help.

Thanks very much...

Blessings to ALL...

Elijah

[jscheuer1]

Actually, due to a bug in the current version of IE 7, you cannot use style filters (these are also partly powered by Active X) with text anyway. The filters make the text lose its Clear Type anti-aliasing quality. In IE 6 and below (those versions supporting these filters) all that was required to overcome this problem was to have a solid background color or image for the filtered text. This no longer helps in IE 7. So, in that browser, at least for the time being, these filters are for images only*.


*Added:
This is not to say that filters in IE 7 will not work with text, just that they look bad. If a script doesn't render filters in that browser, it means that the code was written in a way that prevents that from happening.

[Elijah7]

Thanks John - appreciate the fast reply.

So if the tool tip is just an image, the filters will then work??

Can easily make my tooltips images only.

Would that fix it?

Really just want the tooltips to do the transitions with nice shadows around the boxes.

The Mozilla impersonator of this effect works great, BUT, the javascript slows down the page dramatically in IE, hence the Essam script.

Will try an image only test and see what happens...

Will post the result..

Thanks again....

[Elijah7]

Okay John - well that did not work. Typical.

The javascript files that run this are here

http://www.Constellation7.org/main.js

http://www.Constellation7.org/style.js

shown on page http://www.Constellation7.org/demo.htm

The one we want to use is under visual effects

The read me page is here also http://www.Constellation7.org/readme.html

If you can think how to tweak the code to use just an image only and achieve the transitions and complex shadow effect, in IE 7 & 6 would be very impressed.

Stumped right now....

An image example to use is here :-

http://www.Constellation7.org/BannerTest2.gif

Using the "Float" method and all transitions.

Anytime you get a chance...have so many tips that fail in IE7...very annoyed with MS - yet again...

Thanks and Blessings always..

Elijah

PS: The author's home page just doesn't load and his email is dead - otherwise wouldn't bother the forum...

[Twey]

I think John's far overstating the ClearType problem. The lack of ClearType really doesn't render the text all that unreadable - in fact, to me it just looks as if it's normal text rather than the "bold" look that results from ClearType. The original problem with IE6 and filters was far more serious, and had nothing to do with ClearType.

[jscheuer1]

Twey,

Well, on a page where all other text is rendered in Clear Type, having filtered text not be so looks like crap, and in certain circumstances makes it illegible, or nearly so.

Elijah7,

I didn't mean that it would automatically work with images. Apparently, whoever coded that script simply turned off filters somehow for IE 7. If so, this was a good idea because the tips are intended to be text. As such, they wouldn't look too good in IE 7 with filters.

If that is the case, and you can determine the mechanism for that, the script (and/or perhaps its style) could be altered to allow IE 7 to use the filters. IE 7 is capable, just not well suited when text is the object.

However, I took a bit of a look at the script before and again recently, in response to your first posting about this. Neither time was I able to determine how the style was actually done. Maybe a third time will be a charm.

[Twey]

Well, on a page where all other text is rendered in Clear Type, having filtered text not be so looks like crap, and in certain circumstances makes it illegible, or nearly so.

If it's consistency that's required, a simple solution is to disable ClearType for the whole page. If it's illegible without ClearType, there are serious design issues: remember that no other browser has ClearType, so it'd be illegible in them.

[jscheuer1]

If it's illegible without ClearType, there are serious design issues: remember that no other browser has ClearType, so it'd be illegible in them.

You would think so, but either its not, or there is more at issue than just Clear Type. You are really at a loss in not being able to readily observe the problem.

[Twey]

I did observe it when working on my version of that fade script you did a while back. There wasn't a huge amount of difference: unless I peered at the screen closely enough to see the pixels, I couldn't actually tell the moment when the filter applied and ClearType was lost.

[jscheuer1]

This post includes the solution to the original question.

I did observe it when working on my version of that fade script you did a while back. There wasn't a huge amount of difference: unless I peered at the screen closely enough to see the pixels, I couldn't actually tell the moment when the filter applied and ClearType was lost.

It could also have to do with monitors. I know it looks awful here and I have had reports from folks in the forum that they think it unsightly as well. Also, in IE 7 there can be other problems with filters and stacking, in that the otherwise logical stacking order of elements no longer applies and sometimes cannot be brought back (depending on the design) no matter what one does. This can result in the loss of link functionality. Both of these bugs will hopefully be addressed sooner or later by MS, or they will issue a "it's a feature, not a bug" statement on it at some point.

In any case, I have figured out how to enable the transitions in this script for IE 7. Find this line near the top of main.js and add the red part:

var cssFilters = ((ua.indexOf("MSIE 5.5")>=0||ua.indexOf("MSIE 6")>=0||ua.indexOf("MSIE 7")>=0)&&ua.indexOf("Opera")<0)? 1:0