Jump to content

Strange underscore appearing by my image in Google Chrome?


Recommended Posts

I have been working on this site for a while, I took a break for about 2 months, now I have this strange error. Everything looked fine before but now there is an odd underscore after three of my four image links. It displays just fine in FireFox but it acts up in Google Chrome. Does anyone know why I am having this issue? Here is a picture of the problem in both Chrome and FireFox:TheProblem.png Here is a link to the page:http://wbvclan.com/I_index.php Here is the HTML right around the buttons:

<div class="buttons">							<a class="home" href="" 					onmouseover="changeButtonColor('home', '/Images/homeButtonGreen.png')" 						onmouseout="changeButtonColor('home', '/Images/homeButtonRed.png')" >									 <img border="0" id="home" src="/Images/homeButtonRed.png" width="71" height="39" alt=""/>				</a>								<a class="forum" href="" 					onmouseover="changeButtonColor('forum', '/Images/forumButtonGreen.png')" 					onmouseout="changeButtonColor('forum', '/Images/forumButtonRed.png')">								 <img border="0" id="forum" src="/Images/forumButtonRed.png" width="71" height="39" alt=""/>				</a>								<a class="profile" href="" 					onmouseover="changeButtonColor('profile', '/Images/profileButtonGreen.png')" 					onmouseout="changeButtonColor('profile', '/Images/profileButtonRed.png')">								 <img border="0" id="profile" src="/Images/profileButtonRed.png" width="71" height="39" alt=""/>				</a>								<a class="apply" href="" 					onmouseover="changeButtonColor('apply', '/Images/applyButtonGreen.png')" 					onmouseout="changeButtonColor('apply', '/Images/applyButtonRed.png')">								 <img border="0" id="apply" src="/Images/applyButtonRed.png" width="71" height="39" alt=""/>				</a>							</div>

Here is the linked CSS:


And here is the JS function:

function changeButtonColor(id, to){	 document.getElementById(id).src = to;	}

Thanks in advance for your help.

Link to comment
Share on other sites

The issue is coming from webkit's default style sheet. The anchor tags have a text-decoration:underline applied by default. Try adding this to your stylesheet:

.home, .forum, .profile, .apply{text-decoration: none;}

or better yet:

div.buttons > a {  text-decoration:none;}

That should fix your issue.

Edited by lastlifelost
Link to comment
Share on other sites

Wow, thank you! That worked great. :) Thanks a million!

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Create New...