<button> working in chrome but not in Firefox - why? - html

Question

I have a few buttons on my html page created like this:
<button type="button" class="read-more">Read More</button>
they are responsive in chrome and Safari - they work perfectly fine. However when I tested them in mozzilla Firefox they do not respond at all. Does anyone know what the issue could be?
I tried doing them like this :
<button type="button" class="read-more">Read more</button>
This links the button, but it does not show the clickable curser and does not pick up some of the css (e.g. the underline and the font color)

Answer 1

Your HTML is invalid. Use a validator. A button cannot contain an anchor and an anchor cannot contain a button. Different browsers recover from that error in different ways.
If you want to link somewhere, use an anchor.
If you want to submit a form, or have a control that does nothing but run some JavaScript, use a button.
Then apply CSS to make it look the way you want.

Answer 2

As Quentin said, your HTML is invalid. If you REALLY wanted to use the default buttons as redirect you could create a workaround like this:
<form action="REDIRECTURLHERE"><input type="submit" value="BUTTON TEXT"></form>
where REDIRECTURLHERE would be the location to put your destination URL in, and BUTTON TEXT the place to enter your button text.

Answer 3

The way you have used Button and Anchor tags are kind of invalid.
Either you use an ANCHOR tag to make a redirect or you can use the following input button. On clicking this button, will not submit the form:
<input type="button" value="Read More" class="read-more" />
If you want the form to be submitted, then you have to use the submit input type.

Answer 4

I have also faced issue with button is working fine in chrome but not in Mozilla fire fox. I did the below changes in code then it's working fine in both the browsers.
Old code:
<input type="search" name="focus" class="form-control search-box" placeholder="{{Messages.Label.search}}" style="width:100%"
ng-model="dashboardCtrl.searchvalue" ng-change="dashboardCtrl.searchChangeHandler()" required >
<button class="close-icon" type="reset" ng-click="dashboardCtrl.removeSearchTab()"></button>
<img ng-src="/assets/images/search-icon.svg" width="18px" style="position:relative;left: 90%;top: -30px" ng-show="dashboardCtrl.searchvalue === undefined"/>
New code:
I changed above button as div and css remains the same as below.
.search-box,.close-icon {
position: relative;
}
.search-box {
border: 1px solid $color_nobel_approx;
outline: 0;
border-radius: 0px;
padding-right:22px;
margin-top: 3px;
width: 190px;
box-sizing: border-box;
-webkit-transition: width 0.4s ease-in-out;
transition: width 0.4s ease-in-out;
}
.search-box:focus {
box-shadow: 0 0 2px 2px $color_azure_radiance_approx;
border: 1px solid #bebede;
width: 100%;
}
.close-icon {
border:1px solid transparent;
background-color: transparent;
display: block;
outline: 0;
cursor: pointer;
right: -94%;
top: 2px;
height: 0px;
}
.close-icon:after {
content: "X";
display: block;
width: 20px;
height: 20px;
position: absolute;
z-index:1;
right: 5px;
top: -30px;
margin: auto;
padding: 2px;
text-align: center;
color: black;
font-weight: bold;
font-size: 12px;
cursor: pointer;
}
.search-box:not(:valid) ~ .close-icon {
display: none;
}