CODEWITHSUNDEEP
cssrendering
Rumi P.
Rumi P.

Reputation: 1737

Why would the same browser render two buttons with the same CSS differently?

I need button which has more bling than a standard browser rendering, and because I am not a designer, I thought I'd use an existing solution. So, I went to a button maker I found on the Internet, and it made me a button which looks good. I copied the CSS, and my own button looks differently in my browser. On Inspect Element, the CSS is the same.

Their button looks like this:

enter image description here

And it has following rules applied:

enter image description here

My button looks uglier, because it gets a large border on all sides:

enter image description here

But when I look at the CSS, there is no difference to the applied rules. And while my element is an input, I also have "real" buttons on my page, and they show the same behavior.

enter image description here

I tried running my page with or without a resetting CSS, but this made no difference. I always get the ugly look.

When I run their code in a fiddle, I get the same ugly result.

This happens in two different tabs of the same browser on the same machine, a Firefox 29.

Here again the problematic code: 

button {
   border-top: 1px solid #bfd1ed;
   background: #5987d1;
   background: -webkit-gradient(linear, left top, left bottom, from(#2662c3), to(#5987d1));
   background: -webkit-linear-gradient(top, #2662c3, #5987d1);
   background: -moz-linear-gradient(top, #2662c3, #5987d1);
   background: -ms-linear-gradient(top, #2662c3, #5987d1);
   background: -o-linear-gradient(top, #2662c3, #5987d1);
   padding: 5px 10px;
   -webkit-border-radius: 8px;
   -moz-border-radius: 8px;
   border-radius: 8px;
   -webkit-box-shadow: rgba(0,0,0,1) 0 1px 0;
   -moz-box-shadow: rgba(0,0,0,1) 0 1px 0;
   box-shadow: rgba(0,0,0,1) 0 1px 0;
   text-shadow: rgba(0,0,0,.4) 0 1px 0;
   color: #ffffff;
   font-size: 14px;
   font-family: Georgia, serif;
   text-decoration: none;
   vertical-align: middle;
   }
button:hover {
   border-top-color: #2662c3;
   background: #2662c3;
   color: #bdbdbd;
   }
button:active {
   border-top-color: #2662c3;
   background: #2662c3;
   }

body {
    background-color: #555555;
}

Upvotes: 0

Views: 230

Answers (3)

EyeSpy
EyeSpy

Reputation: 215

Thats because you use the wrong HTML tag

the css in your example is for an element with the class "button"

and if you look at the example in the button builder, you will see that they don't use:

<button name="My button"> A button! </button>

but they use a link tag and style it like a button:

<a class="button" name="My button" href="#">A button!</a>

so if you use the second version for the button, it will look like the example in the button builder

Upvotes: 1

tobiasandersen
tobiasandersen

Reputation: 8688

Just put border: none; on your button:

http://jsfiddle.net/wn7vh/

Hope that helps.

Upvotes: 1

Denys S&#233;guret
Denys S&#233;guret

Reputation: 382514

The difference is you're using a button element.

Us a span element and you'll get the same result.

Demonstration

You might also take the opposite approach and try to reset the button's style but in my opinion it's easier to style a span than to remove those styles.

Upvotes: 5

Related Questions