Adding a special ie7 glow effect to hyperlinks

Currently, I am facing an issue with a website that I am in the process of redesigning. The problem seems to be specific to Internet Explorer 7 (ie7). If you visit dev.indigoniche.com (you may be redirected back to the main site due to a cookie issue, in which case please navigate back to the dev site), you will notice the login module on the top right corner. This module has a background section that changes between five different designs when the page loads. The designs are visually busy and have conflicting colors, so I need to emphasize the text within the login module. I have successfully achieved this in non-ie browsers using the following code:

text-shadow:0 0 5px #000000, -1px -1px 5px #000000;

In ie7, you can apply the following filter:

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

Therefore, I have included this code in a conditional ie7.css file as shown below:

.......

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

.......

While the glow effect works perfectly for the login button and the username and password fields in ie7, it does not seem to apply to the 'register' or 'forgot password' text, possibly because they are links.

I am unable to understand why the effect is not working on the links. Any suggestions would be greatly appreciated?

Additionally, the login, register, and forgot password options should have a hover state, but I haven't been able to turn off the glow effect on the text boxes themselves.

Thank you for taking the time to look into this matter. Your help would be highly valued.

Warm regards,

Luke

css

Answer №1

Your webpage is experiencing layout issues. It's possible that the anchors on your page are lacking proper layout attributes. One solution to try is adding the following CSS property:

zoom:1;

Answer №2

After countless hours of experimentation, I finally cracked the code for ie7. By creating a .glow class and directly applying it to the links, I was able to achieve success despite the frustration.

But then came the challenge of ie8. It became clear that this browser simply did not support the filter: glow or -ms-filter properties for links. Despite thorough testing and troubleshooting, it seemed like an impossible feat.

In the end, I made the decision to convert the links into buttons and style them accordingly. Surprisingly, the css styles that failed with links worked perfectly fine with buttons, giving me the desired effect I was after.

For anyone facing similar struggles in the future, consider this workaround as a potential solution.

Sincerely, Snarfles

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Unusual body padding found in the mobile design

When visiting on a mobile device and inspecting the elements in Google Chrome, try disabling the style rule overflow-x: hidden from the body element and then resizing the window. You may notice a white vertical stripe (padding) appearing on the right side ...

javascripthtmlcss

How can you update an image's source when hovering over it?

My goal is to switch the image source upon mouseover using a combination of asp.net and javascript. Here is the code I am currently using: <asp:ImageButton id="button" runat="server" Height="65px" ImageUrl="~/images/logo.png" OnMouseOver="src='~ ...

c#javascriptjqueryasp.netcss

Updating the CSS link href in ASP.NET using code behind

I'm struggling with changing the CSS href in the code-behind of my .ASPX page. I've tried various methods but haven't found a solution that works as intended. HTML Markup: <link id="linkCSS" runat="server" href='/css/1.css' re ...

c#htmlcssasp.net

Can the looping feature be applied to CSS?

I've been reusing the same CSS code multiple times, just changing the names each time. It feels repetitive to call the same CSS repeatedly with different names. I'm considering looping through it instead. Any suggestions? #block1{display:block; ...

htmlcss

Maintaining aspect ratio in CSS grid layouts

I am in the process of designing a CSS grid layout where I want to maintain the same height for all columns. Additionally, I would like the first item to have a 16:9 aspect ratio. However, I am encountering an issue where the images are not fitting perfect ...

csscss-grid

"I am facing an issue where the button does not appear centered after using jQuery

I can't help but notice that when applying CSS directly, my buttons end up centered horizontally. Yet, when I insert the same code using append(), the buttons seem to align towards one side instead. Here is the HTML/CSS code snippet: <div style=" ...

jquerycssappend

Older versions of Internet Explorer, specifically IE 8 and below, are causing issues with iframe

I am currently working on a website that includes an embedded Vimeo video. The majority of our target audience uses IE8 or older, and interestingly enough, most of them have their browsers zoomed to 125% view. Unfortunately, while everything else on the si ...

cssinternet-exploreriframezooming

Measuring the space between HTML input elements

Can anyone help me with spacing out two input fields on my form? Here is what it looks like currently: https://i.sstatic.net/KRZ58.png. This is the code I am using: <form class="popup-form" id="login-popup-form"> <label>Your username/email:< ...

htmlcss

The challenge of applying flex property in React Native JSX

I'm facing a challenge while trying to implement form field validation in various forms within a React Native mobile application. The problem arises when the error message, which should appear below the text input field, ends up occupying half of the ...

cssreact-nativemobile

The drop-down menu appears to be falling behind the 'content' div element

Whenever I try to hover over the dropdown menu, it frustratingly appears behind the content div that I painstakingly created. Despite all my efforts with z-index adjustments, the issue still persists. Below you'll find all the code for my website, but ...

javascriptjqueryhtmlcss

The scrolling function of the jQuery UI select menu is not working properly on the Android browser

I am currently developing a mobile application that utilizes the jQuery UI select menu. The functionality works well, but I have encountered an issue with certain drop downs being too long to display properly. While my PC shows scrollable floating divs as ...

androidcssjquery-uihtmloverflow

Error arising from CSS positioning with dynamically generated images

My challenge is displaying dynamic images from a database alongside details like color, name, and size, with a hover effect that shows a border. Whenever I hover over one image, the other images shift to the right or left. I want them to stay in place. T ...

cssposition

Using CSS to align and place elements

Currently facing a challenge with my HTML/CSS code regarding the horizontal centering of two divs (A, B) within one absolutely positioned div (C) that contains background images. Key aspects to consider: The bottom edge of the larger div (A) should alig ...

csshtmlbackground-imagecss-position

Utilize external stylesheets in dash-bootstrap exclusively for the accordion component

Could you please provide guidance on how to apply external_stylesheets only to the accordion component in the main section of my app? Currently, the style is being applied to the entire app which is causing unwanted changes. Thank you in advance for your ...

pythoncssdash-bootstrap-components

Is it possible to alter the background behind each word in a text using only CSS?

I have a question about styling quotes by highlighting each word in the text with a background color. The issue I'm facing is that when using a solid background, there are no gaps between the colors. How can I achieve a result similar to this, but wit ...

css

Is there a way to prevent an HTML5 video from pausing or stopping when scrolling?

At the top of my page, there's a HTML5 video banner with the autoplay and loop attributes. However, when I start scrolling down, the video stops and doesn't resume when I scroll back up. I want the video to keep playing regardless of the user&apo ...

javascriptjquerycsshtmlvideo

JavaScript and CSS tabs with smooth transition effect

I want to create tabs that smoothly fade between each other when switching. The code I have works, but there's a slight issue. When transitioning from one tab to the previous one, there is a momentary glitch where the last tab briefly changes state be ...

javascripthtmlcss

The appearance of new divs will not be seen beneath a fixed header

My webpage has a fixed header image in the first div, but I'm having trouble displaying subsequent divs/sections underneath it. Despite my efforts, I can only see the header image and not the div positions below it. Any idea why this might be happeni ...

htmlcsscss-position

Modify only the visual appearance of a specific element that incorporates the imported style?

In one of my defined less files, I have the following code: //style.less .ant-modal-close-x { visibility: collapse; } Within a component class, I am using this less file like this: //testclass.tsx import './style.less'; class ReactComp{ re ...

javascriptcssreactjsless

Customizing Bootstrap styles with a custom CSS file

Currently, in my Django project, I am attempting to customize the base.html file which is utilizing the default bootstrap.min.css by replacing it with a custom.css file like so: base.html: <body id="bootstrap-overrides"> custom.css: #bootstrap-ov ...

cssdjangooverriding