OnMouseOver; how to centre icons in updated code

Apparently so. http://caniuse.com/#search=padding

Reload the jsfiddle page and try again.

When you press down on it, and there’s visible movement that means there’s padding on it, right?

When you press down on it, and there’s 0 movement, that means 0 padding, right?

Maybe internet explorer 11 doesn’t respect it.

i.e. is red, so that means it doesn’t.

ok, now I know that.

thanks.

I closed my browser, opened it.

nothing.

When I try to debug in IE11 the browser crashes. Thanks Microsoft. I’ll try Edge.

1 Like

I use firefox as my main browser.

the padding question was only referring to i.e., cause I wondered why.

I’m going to lint the CSS code and see what problems might be found.

Ooh - 13 warnings.

Should I try this and see if it works cause hover isn’t working for me.
Unless you’re able to figure it out.
onmouseover, and onmouseout?

It’s internet bloody explorer. It’s gonna take some time.

1 Like

I don’t use explorer.
I use firefox.

I gained the impression from “Maybe internet explorer 11 doesn’t respect it.” that you were experiencing the problem in IE11.

Is the situation different?

1 Like

Hover isn’t initiating on firefox.

I use firefox.

It also doesn’t work on internet explorer, a browser that just collects dust, which I have no purpose for.

It might be something to do with the button element. Lemme check.

Yeah, I thought so. Look at the “Content model” section at this HTML5 spec page about the button element.

Is there a way to fix it, or no?

There’s no way to fix it while it continues to be a button. You’ll have to make it a div instead.

To prevent conflict with the hover, add #playButton2 to it, so that it’s #playButton2 div:hover

Even if I used

onmouseover, and onmouseout?

Firefox refuses to have child elements within buttons, because they are following the specs.

2 Likes

Still nothing

<style>
#playButton2 {
    width: 79px; height: 79px; cursor: pointer; padding:0; border: 1px solid #0059dd;
    background-color: black; background-image: url('https://i.imgur.com/ltrxz9z.jpg');
    background-repeat: no-repeat; background-size: cover;
}
#playButton2 div:hover {
border-radius: 50%;border: 1px solid red;
}

.initial {
 display:inline-block; margin: 0 auto;width: 36px;height: 36px; background-color: rgba(0,0,0,.7);background-image: url('https://i.imgur.com/jqGA2vF.png');background-repeat: no-repeat;background-position: 58% 50%;border-radius: 50%;border: 1px solid white;cursor: pointer;
}


.pause {
display: none; width: 36px;height: 36px;background-color: rgba(0,0,0,.7); background-image: url('https://i.imgur.com/5nQe2FE.png');background-repeat: no-repeat;background-position: 50%;border-radius: 50%;border: 1px solid white;cursor: pointer;
}


.play {
  display: none; width: 36px;height: 36px; background-color: rgba(0,0,0,.7);background-image: url('https://i.imgur.com/jqGA2vF.png');background-repeat: no-repeat;background-position: 58% 50%;border-radius: 50%;border: 1px solid white;cursor: pointer;
}


</style>


<button id="playButton2"  onclick=" 
var button = document.getElementById('playButton2');
var player = document.getElementById('player2');
  document.querySelector('#playButton2 .initial').style.display='none';
  document.querySelector('#playButton2 .pause').style.display='none';
  document.querySelector('#playButton2 .play').style.display='none';
player.volume=1.0; if (player.paused) {
document.querySelector('#playButton2 .pause').style.display='inline-block';
player.play();
} else {
document.querySelector('#playButton2 .play').style.display='inline-block';
player.pause();
}">

<div class="initial"> </div>

<div class="pause"> </div>

<div class="play" > </div>

</button>

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

It’s still nothing because you are still expecting Firefox to notice that the button has div elements inside of it. Firefox won’t change its mind on this.

2 Likes