Unwanted underline on hover on buttons in FF21.0

This topic has 7 replies, 2 voices, and was last updated 11 years, 5 months ago by Eric.

Viewing 8 posts - 1 through 8 (of 8 total)

Author

Posts
June 10, 2013 at 4:58 am #5166
Mark Scott
Customer
Hi

This isn’t a theme issue, but I hope you’re able to help.

I specified buttons in my new Ally-themed site using class=”button”. This was fine, except in Safari (6.0.4 on iMac using OSX 10.8.3). The buttons rendered as squares and the text was stacked. I’ve seen the same issue on other sites when browsing with Safari.

So I changed the buttons to use input type=”button”. Now the buttons are fine in Chrome, Safari and IE, but in Firefox (21.0)–on PC and iMac–an underline appears on hover.

Have you come across this issue? Is there any way of resolving it?

My site is http://www.thedocumentalist.com.au
June 10, 2013 at 10:31 pm #5177
Eric
Customer
Did you get this fixed? I don’t see any issues on my end…..(Macbook air Firefox,Safari, Chrome)

Your site looks great BTW! Wes will need to add this to the showcase (whenever he gets it setup)

I create awesome sites for awesome people! Contact me if interested – ericsanchez1585@gmail.com
June 10, 2013 at 10:35 pm #5178
Eric
Customer
Never mind I see which button you’re talking about now….

Your button is wrapped in a hyperlink with no class, so it’s referencing the basic link styles which can be found around line 151 –
```
a:hover {
    text-decoration: underline;
}
```
So if you want to keep that there for other hyperlinks, then you could add a class to it and style it as text-decoration: none; as you did with the input.

I create awesome sites for awesome people! Contact me if interested – ericsanchez1585@gmail.com
June 10, 2013 at 11:03 pm #5185
Mark Scott
Customer
Hi Eric,

Thanks for the quick response.

I’ve added the class to the link:

<a href="/contact/"><input type="button" class="medium blue" value="Contact Mark Scott"></a>

Both classes have text-decoration: none.

But the underline is still there.

I have thought of a work around. I was planning to change the underline on hover to use a border-bottom instead, as well as changing the link to the regular text colour. That would mask it on the button.

BTW, thanks for the feedback on the site. I’m very happy with it … and I love Ally.
June 10, 2013 at 11:12 pm #5186
Mark Scott
Customer
I just added ‘button’ to the class, and still nothing.

By the way, I added class to the button on the home page. The link code in my previous post was for a different page.
June 11, 2013 at 1:06 am #5189
Eric
Customer
You need to add a class to the actual hyperlink (the “a” that wraps around it, not the “input”) and style it with text-decoration: none;

Example, it should look like this (your html code) –
```
<a class="front-button" href="/hire-me">
    <input type="button" class="button medium blue" value="Find out more">
</a>
```
and this is what the css should look like –
```
.front-button:hover {
    text-decoration: none;
}
```
I created “front-button” as an example class for you. If you add this to your html and css it will work, I just tested it myself

….you could change this to anything you want…this is just a quick solution I came up with.

I create awesome sites for awesome people! Contact me if interested – ericsanchez1585@gmail.com
June 11, 2013 at 2:02 am #5190
Mark Scott
Customer
Oh, now I understand.

Eric, thank you. It worked.
June 11, 2013 at 11:45 pm #5198
Eric
Customer
You’re Welcome

I create awesome sites for awesome people! Contact me if interested – ericsanchez1585@gmail.com
Author

Posts

Viewing 8 posts - 1 through 8 (of 8 total)

The topic ‘Unwanted underline on hover on buttons in FF21.0’ is closed to new replies.