Applying an ie7 glow filter to links.

Hi everyone

I hate ie and the following is one of the reasons. Its stupid.

I have a problem with a site I am redesigning and the problem is specifically with ie7. If you look at dev.indigoniche.com (this usually redirects you back to the main site because of some cookie thing so after that happens just go back to the dev site) you will see in the top right the login module. The background of the head section changes between 5 designs on page load. Because the designs are so busy and conflicting colourwise, I need to highlight the text in the login module, which I have done fine in non ie browsers with the use of the following code

text-shadow:0 0 5px #000000, -1px -1px 5px #000000;

Open in new window


In ie7 you can use the following filter

filter: glow(color=#000000,strength=3);

Open in new window


so I have this in a conditional ie7.css file as so

#form-login-password, #form-login-username, .custom_loginmodule form input, #forgot_password_text a, #register_text a, .custom_loginmodule a:visited, .custom_loginmodule a:link, .custom_loginmodule a:hover{

filter: glow(color=#000000,strength=3);
}

#modlgn_username{

filter: glow(color=#000000,strength=0);
}

Open in new window


You can see in ie7 that this glow works fine on the login button and the username and password fields but it just wont apply to the 'register' or 'forgot password' text, possibly due to them being links.

I can't for the life of me work out why it wont work on the links. Any ideas?

Additionally the login, register and forgot password should have a hover state and the text boxes themselves don't need the glow which I haven't been able to turn off.

Thanks for looking and I hope you can help me.

On Stackoverflow I asked the same question and I got a suggestion to add
zoom:1;

Open in new window

to the element which seemed to help a little but didnt apply the filter. This isn't represented in the css code above.

Thanks

Luke
LVL 9
SnarflesAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Shinesh PremrajanEngineering ManagerCommented:
As this is microsoft specific styling, you need to define it like this

{filter:progid:DXImageTransform.Microsoft.Glow(Color=#8800FF00, Strength=3)}

Hope this helps.

0
Shinesh PremrajanEngineering ManagerCommented:
As this is Microsoft specific styling, you need to define it like this

{filter:progid:DXImageTransform.Microsoft.Glow(Color=#000000, Strength=3);}

Hope this helps.

0
SnarflesAuthor Commented:
Hi Shinuq

Thanks for responding.

That makes it look worse. The username and password are shifted down and half cut off. I could probably just move them back up but it hasn't fixed the problem with the two links.

Cheers

Luke

#form-login-password, #form-login-username, .custom_loginmodule form input, #forgot_password_text a, #register_text a, .custom_loginmodule a:visited, .custom_loginmodule a:link, .custom_loginmodule a:hover{


filter:progid:DXImageTransform.Microsoft.Glow(Color=#000000, Strength=3);

}

Open in new window

Screenshot.png
0
The Ultimate Tool Kit for Technolgy Solution Provi

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy for valuable how-to assets including sample agreements, checklists, flowcharts, and more!

s8webCommented:
I would make a separate class for the elements that you want to apply the effect on, then add that class to the element in the markup.

So:

/*css*/

.glow{
filter: glow(color=#000000,strength=0);
}

<!--Markup-->

<input id="modlgn_username" class="glow" name="" type="text" />

This way you can use the same class for links as well as form elements.

0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
SnarflesAuthor Commented:
Thanks for your comments so far. I am getting closer but still not there. IE7 now looks ok.

This is the css for ie7.css
#form-login-password, #form-login-username, .custom_loginmodule form input, #forgot_password_text a, #register_text a, .custom_loginmodule a:visited, .custom_loginmodule a:link, .custom_loginmodule a:hover, .custom_logioutmodule, .custom_logioutmodule .button, .glow{


filter: glow(color=#000000,strength=3);
zoom:1;

}

Open in new window

0
SnarflesAuthor Commented:
And this is the current one for ie8.css ..... its more or less the same but the two links still dont work in ie8.
#form-login-password, #form-login-username, .custom_loginmodule form input, #forgot_password_text a, #register_text a, #form-login .custom_loginmodule a:visited, #form-login .custom_loginmodule a:link, #form-login .custom_loginmodule a:hover, .custom_logioutmodule, .custom_logioutmodule .button, #form-login .glow, a .glow, .glow a{


filter: glow(color=#000000,strength=3);

}
#modlgn_passwd, #modlgn_username {
	width:150px;
filter: glow(color=#000000,strength=0);
}

Open in new window

0
SnarflesAuthor Commented:
Still trying to get this final bit working in ie8... any ideas why the glow doesnt work on links specifically for ie8?
0
SnarflesAuthor Commented:
I did a lot of testing and have come to the conclusion that ie8 simply does not support adding the glow filter for links. It works on other elements but not links.

What I have done to solve this is changed the links to buttons with an onclick javascript link. It works how I need it to now.
0
SnarflesAuthor Commented:
ie8 does not support the filter glow in regards to links. You need to find an alternate way to make a glow/shade for links in ie8.
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
Web Browsers

From novice to tech pro — start learning today.