CODEWITHSUNDEEP
htmlcss
whitebear
whitebear

Reputation: 12461

There comes white box with image button only in iPhone browser

I have button.

<div class="row" id="ctrlBar">
  <div class="col-6">
    <div class="text-center">
      <img type="button" class="ctrlBtn" src="img/NextTry.png" onMouseOut="this.src='img/NextTry.png'" onMouseOver="this.src='img/NextTry_hover.png'" id="nextBtn"/>
      </div>
</div>

in Style sheet

.ctrlBtn{
  height:50px;
  max-width:300px;
}

@media only screen and (max-width: 750px) {
  .ctrlBtn{
    height:32px;
    width:252px;
    padding:0px 0px 0px 0px ;
  }

It looks well for browser on PC and android.

However on iPhone it looks like this with white transparent box.

enter image description here

Image file is

enter image description here

650 x 129

Why does this happen??

Upvotes: 1

Views: 90

Answers (1)

Jai248
Jai248

Reputation: 1649

Try to make button outside of img tag . because <img type="button" is not valid HTML.

  <div class="col-6">
    <div class="text-center">
      <button id="nextBtn">
         <img class="ctrlBtn" src="img/NextTry.png" onMouseOut="this.src='img/NextTry.png'" onMouseOver="this.src='img/NextTry_hover.png'" />
      </button>
      </div>
</div>

Upvotes: 2

Related Questions