Can someone tell me why my code is rendering differently on jsfiddle than it is on jssbin?

HTML & CSS
1

Can someone debug this for me and tell me what’s the matter so I can fix it.

I want to know why, how come it’s rendering differently? Will someone be able to tell me?

jsfiddle

vs.

jsbin
https://jsbin.com/kawananaza/edit?html,output
http://i.imgur.com/sORFaIb.png

<div style="margin: 0;width: 50px; height: 50px; background-color:#00a0b0; color:#000000; border-top-left-radius:50px;"></div>

<div style="margin: -50px 0 0 54px; width: 50px; height: 50px; background-color:#6a4a3c; color:#000000; "></div>

<div style="margin: -50px 0 0 108px; width: 50px; height: 50px; background-color:#cc333f;color:#000000;"></div>

<div style="margin: -50px 0 0 162px; width: 50px; height: 50px; background-color:#eb6841;color:#000000; "></div>

<div style="margin: -50px 0 0 216px; width: 50px; height: 50px;background-color:#edc951;color:#000000; border-top-right-radius:50px; "></div>

<div style="width:0;" onmouseover="myObject=document.getElementById('myObj'); 
myObject.style.display='block'; this.style.display='none'">

<div style="margin:0px 0px -24px 0px;width: 260px;height:18px;border-radius:50px;background-image: linear-gradient(  to right,  #0ff 83px,#0059dd 83px, #0059dd 86px,  #fff 86px,  #fff 174px, #0059dd 174px, #0059dd 177px,  #f0f 177px  );border: 3px solid #0059dd;"></div>

<button id="playButton" style="border:none;cursor: pointer;background-color:transparent;color:blue;width:266px;height:24px;margin:0px 0px 0px 0px; " onmouseover=" 
var player = document.getElementById('player').volume='1.0';
var button = document.getElementById('playButton');
  var player = document.getElementById('player');
  if (player.paused) {
    playButton.style.cursor = 'pointer';
    playButton.style.backgroundColor = 'transparent';
  
    player.play();
  } else {
    playButton.style.cursor = 'pointer';
    playButton.style.backgroundColor = 'transparent';
   
    player.pause();
  }">
 </button>
</div>

<a href="" target="_blank" style="display:block; margin: 0; cursor: pointer; width: 50px; height: 50px;background-color:#00a0b0;color:transparent;"
onmouseover="this.style.backgroundColor='#000000';
this.style.width='40px';this.style.height='40px';
this.style.border='thick solid #5cb378'"
onmouseout="this.style.backgroundColor='#00a0b0';
this.style.width='50px';this.style.height='50px';
this.style.border='none'">
</a>

<a href="" target="_blank" style="display:block; margin: -50px 0 0 54px; width: 50px; height:50px; background-color:#6a4a3c;" onmouseover="this.style.backgroundColor='#badac5';
this.style.color='transparent'"
onmouseout="this.style.backgroundColor='#6a4a3c'"></a>

<a href="" target="_blank" style="display:block; margin: -50px 0 0 108px; width: 50px; height: 50px;background-color:#cc333f;" onmouseover="this.style.backgroundColor='#b7ab9d';
this.style.color='transparent'"
onmouseout="this.style.backgroundColor='#cc333f'"></a>

<a href="" target="_blank" style="display:block; margin: -50px 0 0 162px; width: 50px; height: 50px; background-color:#eb6841;" onmouseover="this.style.backgroundColor='#4679c7';
this.style.color='transparent'"
onmouseout="this.style.backgroundColor='#eb6841'"></a>

<a href="" target="_blank" style="display:block; margin: -50px 0 0 216px; width: 50px; height: 50px; background-color:#edc951; color:#000000;" onmouseover="this.style.backgroundColor='#45bf21';
this.style.color='transparent'"
onmouseout="this.style.backgroundColor='#edc951'"></a>
3

You need to tell us what you think is the matter with it. In what way is it failing to behave as you expect? If you want others to help you, the least you can do is take the time to ask a question clearly and provide relevant details.

6

I can’t reproduce that, copying the code into an HTML page in my browser. Both display the same.

Can you post just those parts of your code which differ between the two, so I can compare them? (There’s too much other stuff in there to wade through.)

7

Are you looking on jsbin?

You have to look on jsbin.

8

I can’t get JSBin to run in Firefox, and if it’s rendering code differently, then I would say the issue lies with JSBin, not the code.

Is there actually a difference between the code you posted on JS Fiddle and the code you posted on JSBin? If so, please can you show just those sections.

9

That’s it, I want to know why, how come it’s rendering differently.

10

What does it matter how it looks in jsbin? It’s not a browser that people use to view websites.
If you save an actual html file and view that in the most popular browsers, that’s what people actually see and all that matters.

2 Likes
11

where would I do that? Where am I going to save it off of?

12

there’s white space under codepen also.

13

Any plain text editor, such as Notepad, or a dedicated code editing program. Save as pagename.html, be sure to use UTF-8 encoding when you save.
Then open the file in a browser.

14

asasass12.html (3.3 KB)

This looks the same in Firefox and Chromium. Both display the gap. As @SamA74 says, it’s a quirk in the way JSBin renders it; what matters is how browsers render it.

1 Like
15

Here… Look.

16

You have a computer - save it in any directory that’s convenient to you.Here’s a template you can use for the rest of the HTML file.

<!doctype html>
<html class="no-js" lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <title>Add title here</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
  </head>
  <body>
    <!--[if lt IE 8]>
        <p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
    <![endif]-->

    <!-- Add your site or application content here -->


    <script></script>
  </body>
</html>
17

Set the button element to {display:block;}

18

Someone on stackoverflow told me to do line-height: 0;

19

But your way works too. Why did display:block fix it? What was causing the gap?

20

So presumably JS Bin is wrongly rendering a button as a block element by default?

21

And someone on SitePoint showed you that {line-height:0} was not the correct solution to the issue and you seemed to understand that the space was because the element was inline and that is why it responded to the line-height.

2 Likes