Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people, just like you, are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
Solved

Applying an ie7 glow filter to links.

Posted on 2010-08-16
9
734 Views
Last Modified: 2013-12-08
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
Comment
Question by:Snarfles
  • 6
  • 2
9 Comments
 
LVL 17

Expert Comment

by:Shinesh Premrajan
ID: 33451940
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
 
LVL 17

Assisted Solution

by:Shinesh Premrajan
Shinesh Premrajan earned 200 total points
ID: 33451946
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
 
LVL 9

Author Comment

by:Snarfles
ID: 33452120
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
Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

 
LVL 16

Accepted Solution

by:
s8web earned 300 total points
ID: 33453819
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
 
LVL 9

Author Comment

by:Snarfles
ID: 33462472
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
 
LVL 9

Author Comment

by:Snarfles
ID: 33462474
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
 
LVL 9

Author Comment

by:Snarfles
ID: 33471992
Still trying to get this final bit working in ie8... any ideas why the glow doesnt work on links specifically for ie8?
0
 
LVL 9

Author Comment

by:Snarfles
ID: 33472725
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
 
LVL 9

Author Closing Comment

by:Snarfles
ID: 33472743
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

Announcing the Most Valuable Experts of 2016

MVEs are more concerned with the satisfaction of those they help than with the considerable points they can earn. They are the types of people you feel privileged to call colleagues. Join us in honoring this amazing group of Experts.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
The article shows the basic steps of integrating an HTML theme template into an ASP.NET MVC project
This Micro Tutorial will demonstrate how to add subdomains to your content reports. This can be very importing in having a site with multiple subdomains.
How to create a custom search shortcut to site-search Experts Exchange using Google in the Firefox browser. This eliminates the need to type out site:experts-exchange.com whenever you want to search the site. Launch your Bookmark Menu: Press 'Ctrl +…

856 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question