CSS Link Hover Issue in Internet Explorer 7 & 8

I came across a really strange issue yesterday whilst testing a site build in Internet Explorer 6, 7 and 8. For some reason, my anchor link text was not accepting a hover state colour change even though I set the required styles within my style sheet. All other browser accepted the hover styling without any issue.

I decided to create another site in Visual Studio and added the same styling to my links and it worked. After comparing the difference between the original and new style sheet, the only difference was:

/* Original Stylesheet */
body
{
    font-family: Arial;
}

 

/* New Stylesheet */
body
{
    font-family: Arial, sans-serif;
}

 

By simply adding “sans-serif” to the font family allowed the hover styles to work correctly in all browsers. I have no idea why making this change resolved my issue.

blog comments powered by Disqus

About

Surinder Bhomra is a Web Developer.

He has achieved a BSc in Information Systems in 2006 and since then has been working in the IT industry.

Prior to working in the Web Development industry I have spent 1.5 years working as an IT Systems Analyst providing support for internal company systems.

Working in the Web Development industry has given me the opportunity to expand my current skills and allowing me to work on website projects using ASP, ASP.NET, CSS, HTML and SQL.

Disclaimer

The opinions expressed herein are my own personal opinions and do not represent my employer’s view in any way.

>