Trying to figure this out. What's causing the left background to overlap the 2nd one when you click on it?

HTML & CSS
1

Not the code I’m using, I just like to try and figure things out when there’s something wrong.

When you click on it, the left background overlaps the middle background. Why is this happening. Can anyone figure it out? https://jsfiddle.net/hm2skng7/21/

It overlaps 1px over to the right after you click on it.

<div style="width:266px;" onclick="myObject=document.getElementById('myObj5h'); 
myObject.style.display='block'; this.style.display='none'">

<div style="display:block; cursor: pointer; width: 89px; height:24px; background-color:#00ffff; border-top-left-radius:50px;border-bottom-left-radius:50px;margin: 0px 0px 0 0px;text-align:center">
</div>

<div style="display:block; cursor: pointer;  width: 88px;height:24px;background-color:#ffffff;margin: -24px 0px 0 88px; ">
</div>

<div style="display:block; cursor: pointer;  width: 89px; height:24px; background-color:#ff00ff; border-top-right-radius:50px;border-bottom-right-radius:50px; margin: -24px 0px 0 177px;text-align:center">
</div></div>

<div id="myObj5h" style="display: none;">

<div style="display:block;width: 89px; height:24px; background-color:#00ffff; border-top-left-radius:50px;border-bottom-left-radius:50px;margin: 0px 0px 0 0px;text-align:center">

<button style="cursor: pointer; font-family:Tahoma; font-weight: bold;font-size:14px; border:none;background-color:#00ffff;color:blue;padding: 0px 0px 0px 0px;"
onclick="document.getElementById('player').play()">Play</button>
</div>

<div style="display:block; width: 88px;height:24px; background-color:#ffffff;margin: -24px 0px 0 89px;text-align:center;">

          
<button style="cursor: pointer; background-color:#ffffff;color:blue;font-family:Tahoma; font-weight: bold;font-size:14px; border:none;padding: 0px 0px 0px 0px;"    
onclick="document.getElementById('player').pause()">Pause</button>
</div>

<div style="display:block; width: 89px; height:24px; background-color:#ff00ff; border-top-right-radius:50px;border-bottom-right-radius:50px; margin: -24px 0px 0 177px;text-align:center;">
          
<button style="cursor: pointer;	background-color:#ff00ff;border:none;color:blue;padding: 0px 0px 0px 0px;font-family:Tahoma ;font-weight: bold;font-size:14px; padding: 0px 0px 0px 0px;"    
onclick="document.getElementById('player').pause() ;document.getElementById('player').currentTime=0;">Stop</button>
</div>   
      
<audio id="player" style="display:none;">
<source src='http://air.radiorecord.ru:8101/rr_320' type='audio/mpeg'/>
</audio>
</div>
2

Can you post a screenshot of the problem you’re seeing? I see no overlap.

3

4

5

I dropped it down to 2 blocks.

6

Don’t waste your time, TB. There is no overlap. There are different margins on the hidden left box and the visible left box.

1 Like
7

FIXED!!!

8

Float

<div style="width:266px;" onclick="myObject=document.getElementById('myObj5h'); 
myObject.style.display='block'; this.style.display='none'">

<div style="cursor: pointer; width: 89px; height:24px; background-color:#00ffff; 
border-top-left-radius:50px;border-bottom-left-radius:50px; float:left; text-align:center">       
</div>

<div style="cursor: pointer; width: 88px;height:24px; background-color:#ffffff; float:left">
</div>

<div style="cursor: pointer; width: 89px; height:24px; background-color:#ff00ff;
border-top-right-radius:50px;border-bottom-right-radius:50px; float:left; ">       
</div></div>

<div id="myObj5h" style="display:none;">

<div style="width: 89px; height:24px; background-color:orange; 
border-top-left-radius:50px;border-bottom-left-radius:50px; float:left; text-align:center">
          
<button style="cursor: pointer; background-color:transparent;padding-bottom:1px;"
onclick="document.getElementById('player').play()">Play</button>
</div>

<div style="width: 88px;height:24px; background-color:blue; float:left">
</div>

<div style = "width: 89px; height:24px; background-color:red;
border-top-right-radius:50px;border-bottom-right-radius:50px; float:left; text-align:center">
          
<button style="cursor: pointer; background-color:green;padding-bottom:1px;"
onclick="document.getElementById('player').pause()">Pause</button>
</div>

<audio id="player" preload="none" style="display:none;">
<source src='http://air.radiorecord.ru:8101/rr_320' type='audio/mpeg'/>
</audio>
</div>
9

Thanks, @ronpat. I guessed it would be something like that, but my eyes don’t detect a 1px difference, and I was unsure which area I was meant to be looking at.

10

How do you prevent float from collapsing?

What method do you like best?

11

I fixed it.
instead of 88px it was supposed to be 89 on one of the margin.

12

So why are you now posting unrelated code? I seem to have missed the connection somewhere.

Short answer - it depends on the context.

13

So delete it then.

14

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.