Solved

Applying an ie7 glow filter to links.

Posted on 2010-08-16
9
710 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
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
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
How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

 
LVL 9

Author Comment

by:Snarfles
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
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

How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

Join & Write a Comment

Suggested Solutions

Title # Comments Views Activity
jquery, html5 UI 1 47
jQuery CSS Scroll Issue 3 30
Hovering effect 9 28
Any idea why my scrolling images are not showing?? 8 13
Several part series to implement Internet Explorer 11 Enterprise Mode
CSS is a visual language used to classify objects and define rules about how they should be displayed. CSS skills aren’t restricted to developers anymore, there is a big benefit to having a basic understanding of the language, regardless of your occ…
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …
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 +…

744 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

18 Experts available now in Live!

Get 1:1 Help Now