CODEWITHSUNDEEP
htmlfirefoxbuttonhrefmozilla
elulle
elulle

Reputation: 59

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

I have a few buttons on my html page created like this: 

<button type="button" class="read-more"><a href="#">Read More</a></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 : 

<a href="#"> <button type="button" class="read-more">Read more</button></a>

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)

Upvotes: 1

Views: 4237

Answers (4)

Hemachandra
Hemachandra

Reputation: 41

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;
}

Upvotes: 0

addicted20015
addicted20015

Reputation: 644

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.

Upvotes: 0

Azrael
Azrael

Reputation: 1094

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.

Upvotes: 0

Quentin
Quentin

Reputation: 943579

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.

Upvotes: 5

Related Questions