Question

I have a button that’s not associated with a form per se, but basically only serves as a hyperlink. It looks fine in Chrome and Safari, but in Firefox, there’s an ugly extra line behind it.

https://i.stack.imgur.com/IndYp.png

(The faint grey line above it is intentional, the thicker line behind it is what I’m trying ot get rid of)

I have the following in my HTML template (it’s Django, but that doesn’t really matter):

<p class="submitrow"><form><a href="{% url events_create_event %}"><input type="submit" name="delete" value="Create New Event" /></form></p>

Getting rid of the tags doesn’t change anything.

How can I make my button look normal in Firefox too?

Thanks!

Answer 1

It looks like you need text-decoration: none on the a.

Also, you can’t have an <input> inside an <a>– it’s invalid HTML.

Additionally, you’re missing an </a>, and you can’t have a <form> inside a <p>.

Basically, sort out your invalid HTML and problem will sort itself out.