But I’m already using
border: 3px solid #0059dd;
Doing that removes it.
But notice that the size of the button box does not change.
{box-sizing:border-box} is an inherent property of the button.
No, it replaces the default border with your modification.
The 1st one it removes it
the 2nd it stays.
It depends where you place “border: none;” in the code?
Am I right or no?
If you include 2 (two) instances of any property in a css file or rule set, the last instance will replace or override the previous instance/s assuming they are of equal specificity… Just like @TechnoBear pointed out about the widths and heights.
What use is including border: none; if it’s going to be over ridden and not work?
Why did you add border:none to start with?
I have no use for it, and it’s not even visible
button has a border, href doesn’t. That’s what I wanted to know.
What are the errors that you see?
The closing > before </button> is missing.
"... bold;font-size:23px; color:#000000;"</button>
and
border-radius:;
is empty. It should be deleted or commented out but not left empty.
<button id="playButton" style="display:block;width: 606px;height:50px;border-radius:50px;background-image: linear-gradient( to right,#000000 199px,#0059dd 199px, #0059dd 202px, #000000 202px, #000000 399px, #0059dd 399px, #0059dd 402px, #000000 402px );border: 3px solid #0059dd; cursor: pointer;font-family: Tahoma; font-weight: bold;font-size:23px; color:#000000;"
onclick="
var button = document.getElementById('playButton');
var player = document.getElementById('player'); player.volume=1.0;
if (player.paused) {
playButton.innerHTML = '1980s.fm';
playButton.style.background = 'linear-gradient( to right, #00ffff 199px,#0059dd 199px, #0059dd 202px, #ffffff 202px, #ffffff 399px, #0059dd 399px, #0059dd 402px, #ff00ff 402px )';
player.play();
} else {
playButton.innerHTML = '';
playButton.style.background = 'linear-gradient( to right, #000000 199px,#0059dd 199px, #0059dd 202px, #000000 202px, #000000 399px, #0059dd 399px, #0059dd 402px, #000000 402px )';
player.pause();
}">
</button>
See post #1.
I was resizing it, that’s why it was blank.
Cause I was only asking about the width and height, not the entire code.
Then it is not a problem, is it.
Unfortunately, we have a practice of looking at the entire code because it usually matters and we respond to what we see, just as @John_Betong did.
1 Like
It is because, tags like div, a and input use content-box, whereas button uses border-box.
To make both same height, use
button {
box-sizing: content-box;, -moz-box-sizing: content-box;, -ms-box-sizing: content-box;
}
This should do the trick. For more info: http://www.quirksmode.org/css/box.html
I’m sorry, but {box-sizing:content-box} doesn’t seem to work in this situation. It looks like it adds the inherent border width to the content width. Anyway, the button becomes wider than it should.
{box-sizing:border-box} does the trick, here.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>template</title>
<!--
-->
<style type="text/css">
button,a {
display:block;
width:200px;
height:50px;
border:3px solid #0059dd;
background-color:#bdf;
box-sizing:content-box; /* feel free to swap content-box and border-box */
}
</style>
</head>
<body>
<button></button>
<a href="" target="_blank"></a>
</body>
</html>
The question was only based on taller and shorter, so my answer only checked those boxes. My bad, I didn’t check for the width.
In any case, changing box-sizing to your liking should be fine. 
As I said in your other thread, you really need to take time to learn and understand basic terminology if you’re going to continue with HTML/CSS, as you keep making nonsensical statements like this.
<button> is an HTML element.
<a> is an HTML element.
href is not; it is an attribute which can be applied to the <a> element, to specify the URL for the link.
<a href="http://www.sitepoint.com>This is a link to sitepoint</a>
in the same way, <img> is an HTML element, but width and height are attributes.
<img src="path/to/image" width="200" height="400">
5 Likes
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.