Improve rendering of play button

Do you want your button to work in JSFiddle, or do you want it to work when viewed directly in a browser, as with any normal web page?

If you only care about JSFiddle, then fine - leave it as it is. If you want it to display correctly in a browser, and you’ve just established that it doesn’t, then you’ll need to do something about it.

Which browsers did you test in?

Please post the full code of your HTML page.

1 Like

Firefox / ie 11.

Are you using {box-sizing:border-box} on the same element(s) in your HTML file?

In other words, is your code REALLY the same? Context matters.

1 Like

These 2 are lined up evenly and border box isn’t in it.

But those examples are using different code. Stop confusing the issue (and yourself).

In the example where one of your buttons does not line up correctly on IE11, Firefox and W3Schools, but does line up correctly on JSFiddle, are you quite certain that the code is identical in every way between the four tests?

If so, please post the full HTML page which you used for your test, so that we can have a look at it and confirm the behaviour.

I don’t understand how they are different codes when the same codes are used in both. It’s the same method used in both.

Code 1.)

<style>

  .button div{ width:37px;height: 37px;
    margin: 70px 72px;
    background-color:black;
    background-size: 14px 18px;
    background-repeat: no-repeat;
    border-radius: 50%;
    box-Shadow:inset 0 0 0 3px lime;
 position:absolute;
  } 
</style>

<div id="playButton2" style="position:relative;background-image: linear-gradient( to right,transparent 86px,#0059dd 86px, #0059dd 89px, transparent 89px, transparent  177px, #0059dd 177px, #0059dd 180px, transparent 180px );border: 3px solid #0059dd; width: 266px; height: 180px;cursor: pointer;" onclick=" 
var button = document.getElementById('playButton2');
var player = document.getElementById('player2');
button.querySelector('.play').style.display='none';
button.querySelector('.pause').style.display='none';
player.volume=1.0; if (player.paused) {
button.querySelector('.pause').style.display='inline-block';
player.play();
} else {
button.querySelector('.play').style.display='inline-block';
player.pause();
}">

    <svg width="180" height="180" style="position: absolute;">

  <defs>
        <clippath id="circleView">
      <circle cx="90" cy="90" r="85" fill="orange" />
        </circle></clippath>
    </defs>

<image width="180" height="180" xlink:href="https://i.imgur.com/uuqDlZB.jpg" clip-path="url(#circleView)" />

   <image width="180" height="180" xlink:href="http://i.imgur.com/4HJbzEq.png" /></image></image></svg>

    <div class="button" >
        <div class="play" style="background-image: url('https://i.imgur.com/Lj57czy.png'); background-position: 58% 50%;"> </div>
        <div class="pause" style="background-image: url('https://i.imgur.com/LgmfKda.png');background-position: 50%;display: none;"> </div>
        
    </div>

</div>

<audio id="player2" style="display:none;">
  <source src='http://hi5.1980s.fm/;' type='audio/mpeg'></source>
</audio>

Code 2.)
https://jsfiddle.net/bw7aLzL5/5/

Not Lined Up
https://www.w3schools.com/code/tryit.asp?filename=FL1HANBG0W59

Not Lined Up
.html document:

<div style="visibility: hidden; position: absolute">
 <img style="visibility: hidden; position: absolute" src="https://i.imgur.com/DrNBAbe.png" width="266" height="250" alt="" />
 <img style="visibility: hidden; position: absolute" src="https://i.imgur.com/9JZdJz0.png" width="16" height="20" alt="" />
 <img style="visibility: hidden; position: absolute" src="https://i.imgur.com/IvGhkoU.png" width="16" height="20" alt="" />
</div>

<style>

  .button div{ width:44px;height: 44px;
    margin: -153px 116px;
    background-color:yellow;
    background-size:14px 18px;
    background-repeat: no-repeat;
    border-radius: 50%;
    position:absolute;
  } 
</style>

<div id="playButton4" style="width: 266px; height: 250px; cursor: pointer;background-color: #000000 ;background-image: linear-gradient( to right,transparent 86px,#0059dd 86px, #0059dd 89px, transparent 89px, transparent  177px, #0059dd 177px, #0059dd 180px, transparent 180px ), url('https://i.imgur.com/DrNBAbe.png');box-Shadow:inset 0 0 0 3px #0059dd;background-repeat: no-repeat;" onclick=" 
var button = document.getElementById('playButton4');
var player = document.getElementById('player4');
 document.querySelector('#playButton4 .play').style.display='none';
 document.querySelector('#playButton4 .pause').style.display='none';
player.volume=1.0; if (player.paused) {
document.querySelector('#playButton4 .pause').style.display='inline-block';
player.play();
} else {
document.querySelector('#playButton4 .play').style.display='inline-block';
player.pause();
}">

 <svg width="266" height="250" viewbox="0 0 266 150">
  <circle cx="138" cy="74" r="24.5" stroke-width="6" fill="orange"   />
  <line x1="6"   y1="75"  x2="32"  y2="75" stroke="#f00" stroke-width="6" />
   <line x1="39"  y1="75"  x2="111" y2="75" stroke="#f00" stroke-width="6" />
   <line x1="86"  y1="44"  x2="192" y2="105" stroke="#f00" stroke-width="6" />
   <line x1="137" y1="12"  x2="137" y2="136" stroke="#f00" stroke-width="6" />
   <line x1="86"  y1="105" x2="192" y2="44" stroke="#f00" stroke-width="6" />
   <line x1="152" y1="51"  x2="188" y2="-12" stroke="#f00" stroke-width="6" />
   <line x1="191" y1="-17" x2="205" y2="-40" stroke="#f00" stroke-width="6" />
   <line x1="151" y1="98"  x2="188" y2="161" stroke="#f00" stroke-width="6" />
   <line x1="191" y1="166" x2="205" y2="188" stroke="#f00" stroke-width="6" />
   <circle cx="138" cy="74" r="24.5"  stroke="red" stroke-width="6" fill="black"   /></svg>

    <div class="button" >
        <div class="play" style="background-image: url('https://i.imgur.com/9JZdJz0.png'); background-position: 58% 50%;background-size: 16px 20px;"> </div>
        <div class="pause" style="background-image: url('https://i.imgur.com/IvGhkoU.png');background-position: 50%;background-size: 16px 20px;display: none;"> </div>



</div>

<audio id="player4" style="display:none;">
  <source src='http://hi5.1980s.fm/;' type='audio/mpeg'></source>
</audio>

It may be the same method, but the codes are clearly not identical.

https://www.w3schools.com/code/tryit.asp?filename=FL1KADQN87BE produces

whereas the code you said you were having a problem with, in https://www.w3schools.com/code/tryit.asp?filename=FL1HANBG0W59, produces this:

I suggest you state clearly which code you want to work on, and stop confusing matters with different layouts.

I don’t understand why one method would work for one but not the other, on basically the same type of code.

Because “basically the same type” is not the same as “identical”.

Maybe someone on here will be able to figure out what the issue is.

Is it relevant to this topic?

Then for the last time, please stop confusing your topics with irrelevant posts, and stop directing members from one topic to another to assist you.

Answered by PM.

I don’t understand why the play button on Code 2, doesn’t stay in place like that of Code 1.

And, I just used code 1 as an example cause it uses the same method to do the same thing.

That isn’t an HTML document.

An HTML document is a proper working page, starting with a doctype, and with the style tag separated out into the header section, not left in the middle of the HTML.

Be that as it may, if I copy and paste your code as it stands into the body of a page and view it in Firefox 56, then the yellow button is correctly aligned, even without any corrections to coding errors. The same is true if I view it on Chromium.

You have a </source> tag which should not be there, and you are missing a closing </div> tag. When debugging, you should always validate your code to eliminate coding errors as the cause of problems. However in this case, I can’t reproduce your issue from the code you posted, before or after correcting the errors.

It’s because you ignored my advice and continued to use margins instead of co-ordinates and didn’t set position:relative on the containing block as I told you in the other thread.

e.g.

#playButton4{position:relative}
  .button div{ width:44px;height: 44px;
    /*margin: -153px 116px;*/
	top:102px;
	left:116px;
    background-color:yellow;
    background-size:14px 18px;
    background-repeat: no-repeat;
    border-radius: 50%;
    position:absolute;
  }

The w3schools editor is in an iframe without a doctype and thus renders in quirks mode and also has margins on the body that collapse with the margins on the absolute element.

Don’t use margins on absolute elements but use co-ordinates in relation to a parent with position relative applied.

4 Likes

Would it be a good idea to only use top:px / left:px; regardless only for when positioning playbuttons? and is there ever a time when margin over rules top / left and you use margin instead?

For this as an example, how come this code worked with margin, the window code, but I assume I should change that to top left, right?

You said anything that uses absolute, so that would include that.

How do you post the full html page?

Is there such thing as a place where you can upload it, then share the link to it where other people can see it?

Is there any such thing as that?

Just as a general question regarding this code.

How come .button div can’t be placed inside the div tags?

  .button div{ width:44px;height: 44px;
	top:102px;
	left:116px;
    background-color:yellow;
    background-size:14px 18px;
    background-repeat: no-repeat;
    border-radius: 50%;
    position:absolute;
  }