CODEWITHSUNDEEP
htmlcssgoogle-chrome
JGallardo
JGallardo

Reputation: 11373

Button height distorted in Chrome browser

My button appears fine in Firefox

in firefox

But the height is distorted in Chrome

in Chrome

Here is my code

HTML

<input name="Submit" type="image" onclick="return CheckForm1();" class="button submit" />

CSS

.button {
  color: #fff;
  display: inline-block;
  line-height: normal;
  margin-bottom: 20px;
  text-align:center;
  text-decoration: none;
}
.button:hover {
  background-color: #fff;
  -moz-transition: all 0.2s ease;
  -webkit-transition: all 0.2s ease;
  -o-transition: all 0.2s ease;
  transition: all 0.2s ease;
}

.submit {
  background-color: #1ea1e3;
  border: #1ea1e3 3px solid;
  color: #fff;
  font-size: 20px;
  padding: 10px 0;
  width: 300px;
  max-width: 100%;
}
.submit:hover {
  border: #1ea1e3 3px solid;
  color: #1ea1e3;
}

Yes I did clear the cache.

The testing page is here.

Upvotes: 1

Views: 133

Answers (1)

C3roe
C3roe

Reputation: 96240

<input name="Submit" type="image" onclick="return CheckForm1();" class="button submit" />

Why are you using type="image" here? What sense does that make, without actually referring an image via the src attribute as well?

Change that to a type="submit" (and change the default for value that your browser might use if you’re not happy with it), and it displays mostly similar already. (Adjust minor issues like font-settings, borders, padding as you like.)

Upvotes: 4

Related Questions