Go Premium for a chance to win a PS4. Enter to Win

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 755
  • Last Modified:

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
0
Snarfles
Asked:
Snarfles
  • 6
  • 2
2 Solutions
 
Shinesh PremrajanCommented:
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 PremrajanCommented:
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
Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

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

Featured Post

Keep up with what's happening at Experts Exchange!

Sign up to receive Decoded, a new monthly digest with product updates, feature release info, continuing education opportunities, and more.

  • 6
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now