Solved

Applying an ie7 glow filter to links.

Posted on 2010-08-16
9
721 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:shinuq
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:shinuq
shinuq 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
 
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
Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

 
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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

This article discusses four methods for overlaying images in a container on a web page
Finding original email is quite difficult due to their duplicates. From this article, you will come to know why multiple duplicates of same emails appear and how to delete duplicate emails from Outlook securely and instantly while vital emails remai…
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …
This Micro Tutorial will demonstrate how nuggets on the Web are formatted by using Chrome Developer Tools. These tools would not only view the site's CSS but it can also modify it and save the CSS to use on your own site.

919 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

Need Help in Real-Time?

Connect with top rated Experts

21 Experts available now in Live!

Get 1:1 Help Now