CODEWITHSUNDEEP
htmlcss
volume one
volume one

Reputation: 7573

Why does a hyperlink and a button styled with the same CSS look different?

Here is the JSFiddle

My HTML:

<a href="register" class="btn btn-splash-action">Register</a><br>
<input name="SignIn" type="submit" class="btn btn-splash-action" value="Sign In" alt="Sign In" />

My CSS:

.btn {
    display: inline-block;
    font-family:Arial, Helvetica, sans-serif;
    text-align:center;
    text-decoration: none;
}
.btn-splash-action {
    background: #09F;
    border: 1px solid #0b0e07;
    color: #ffffff;
    font-family:Arial, Helvetica, sans-serif;
    font-size: 120%;
    text-decoration: none;
    padding-bottom: 5px;
}

Basically I've got a hyperlink with the CSS classes applied to it as a button element. However they visually have different widths and Firebug calculates the widths as different as well.

I've got the same problem in IE10 and FireFox 26.

If I'm applying the same styling to both elements, why do they look different?

EDIT: Updated the JSFiddle to http://jsfiddle.net/DnaDG/1/

Trying to reset the padding, margin, and border using the .btn class but it still doesn't work.

Upvotes: 0

Views: 105

Answers (2)

Stephen Thomas
Stephen Thomas

Reputation: 14053

In both cases the browser starts with default styles for the corresponding elements and then adds your styles to those. The <a> tag and the <input> tag have different default (starting) styles.

Here are the default styles Safari uses for <a> elements:

color: -webkit-link;
text-decoration: underline;
cursor: auto;

And here are some of the default styles for <input> elements:

-webkit-align-items: flex-start;
text-align: center;
cursor: default;
color: buttontext;
padding-top: 2px;
padding-right: 6px;
padding-bottom: 3px;
padding-left: 6px;
border-top-width: 2px;
border-right-width: 2px;
border-bottom-width: 2px;
border-left-width: 2px;
border-top-style: outset;
border-right-style: outset;
border-bottom-style: outset;
border-left-style: outset;
border-top-color: buttonface;
border-right-color: buttonface;
border-bottom-color: buttonface;
border-left-color: buttonface;
border-image-source: initial;
border-image-slice: initial;
border-image-width: initial;
border-image-outset: initial;
border-image-repeat: initial;
background-color: buttonface;
box-sizing: border-box;

There are actually a whole lot more in addition to those. Also, different browsers have different defaults.

Upvotes: 3

xanesis4
xanesis4

Reputation: 338

The default styling for each element is different... A hyperlink doesn't have a border for example, and there are some styles that you are not overriding, so the element retains those. Thus, not all the styles from your css will have an effect. Does that make sense? Hope this helps!

Upvotes: 1

Related Questions