Can someone explain to me why one is taller & shorter than the other, I don't get it

HTML & CSS
1

Why is one taller than the other?

<button id="playButton" style="display:block;width: 606px;height:50px;border-radius:;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;"</button><br>
<br>


<a href="" target="_blank" style="display:block;width: 606px;height:50px;border-radius:;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;"></a>
2

If and only if there was an online version you would be able to use the W3.org CSS Jigsaw validation which would show the CSS syntax error.

3

What are you talking about, I just want to know why href calculates things differently than button?

4

This is the full button code.

<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>
5

Is button or href more correct than the other when it comes to Width / Height?

6

The CSS has syntax errors. Browsers will try to guess your requirements.

I believe after the first syntax error the remaining CSS will be ignored.

As mentioned previously and numerous times the CSS should be in a separate style sheet which would simplify validation and drastically reduce your scripting problems.

7

You didn’t answer my question as to why href is calculating width height differently than button.

8

What do you not understand about my reply to your question?

9

Maybe someone else will have a better answer for me.

10

11

The original post has CSS syntax errors and is different to your validated script. I am confused as to why you validated the different script.

12

I was only asking about the width and height, I wasn’t asking about the whole entire code.

13

While there are a couple of errors in your code, there is nothing wrong with your code that would cause that problem.

A button has a border by default. It is considered part of the dimensions of the button.

An anchor is an inline object by default and has no border. You have added a border to the button and the anchor. The button sees the border as part of its dimensions. The anchor sees the button as an additional width and height.

You know about the box model.

To make the anchor and the button have matching dimensions, one must apply {box-sizing: border-box} to the anchor.

14

I just wanted to know why button calculates width & height differently than href.

15

What are the errors that you see?

16

Will that work?
style="box-sizing: border-box;

18

A button has a border by default.

Is there a way to visibly see the border, or is it entirely invisible?

19

Type

<button></button>

on an HTML page and open it in your browser.

It will be very small, but it’s there.

20

I just did it, I see it.

21

border: none ; removes it.

1 Like