Applying an ie7 glow filter to links.

Question

Hi everyone 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;

In ie7 you can use the following filter

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

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);


}

.......

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.

Thanks

Luke

Answer 1

An element needs layout. Maybe your anchors don't have layout? Try applying..

zoom:1; to whatever element(s) it doesn't work on.

Answer 2

I eventually solved this for ie7... after MUCH mucking around. I used a .glow class and applied it directly to the links... it was quite frustrating..

However...

I then went to work on ie8... and eventually I conceeded that ie8 just does not support either of the following

filter: glow(color=#000000,strength=3); -ms-filter:"progid:DXImageTransform.Microsoft.glow(color=#000000,strength=3)";

when it comes to links. It seemed to work on other elements just not links. I even did testing outside of the site to confirm there was nothign else conflicting.

My end solution was to change the links to buttons and style them all how I wanted. The css styles mentioned above work ok on buttons so I have got the effect I wanted.

Hope this helps someone in the future.

Snarfles