Bad- after - diff

bad.html

<div id="home-container" style="width: 0px; height: 366px; overflow: hidden; position: relative; padding: 0px;">
  <div id="dragwrapper52126904" style="opacity: 0.25; position: absolute; padding: 0px; left: -4px; z-index: 20; width: 8px; height: 366px;" class="ui-draggable">
    <div id="drag52126904" style="width: 2px; height: 366px; background-color: rgb(136, 136, 136); position: absolute; left: 3px; background-position: initial initial; background-repeat: initial initial;">
      <img width="8" height="56" alt="handle" src="./js/handle.gif" id="handle52126904" style="z-index: 100; position: relative; cursor: pointer; top: 155px; left: -3px;">
    </div>
  </div>
  <div style="height: 366px; width: 0px; position: absolute; overflow: hidden; left: 0px; z-index: 10;">
    <img alt="before" src="/MahApps.Metro/images/home-title-light.png" height="366" id="beforeimage52126904" style="position: absolute; top: 0px; left: 0px;">
  </div>
  <div style="height: 366px; width: 0px; position: absolute; overflow: hidden; right: 0px;">
    <img alt="after" src="/MahApps.Metro/images/home-title-dark.png" height="366" id="afterimage52126904" style="position: absolute; top: 0px; right: 0px;">
  </div>
  <img src="./js/lt-small.png" width="7" height="15" id="lt-arrow52126904" style="z-index: 20; position: absolute; top: 175.5px; left: -20px; opacity: 0;">
  <img src="./js/rt-small.png" width="7" height="15" id="rt-arrow52126904" style="position: absolute; top: 175.5px; left: 12px; opacity: 0;">
</div>

good-bad.html

<div id="home-container" style="width: 0px; height: 366px; overflow: hidden; position: relative; padding: 0px;">
  <div id="dragwrapper52126904" style="opacity: 0.25; position: absolute; padding: 0px; left: -4px; z-index: 20; width: 8px; height: 366px;" class="ui-draggable">
    <div id="drag52126904" style="width: 2px; height: 366px; background-color: rgb(136, 136, 136); position: absolute; left: 3px; background-position: initial initial; background-repeat: initial initial;">
      <img width="8" height="56" alt="handle" src="./js/handle.gif" id="handle52126904" style="z-index: 100; position: relative; cursor: pointer; top: 155px; left: -3px;">
    </div>
  </div>
  <div style="height: 366px; width: 0px; position: absolute; overflow: hidden; left: 0px; z-index: 10;">
    <img alt="before" src="/MahApps.Metro/images/home-title-light.png" height="366" id="beforeimage52126904" style="position: absolute; top: 0px; left: 0px;">
  </div>
  <div style="height: 366px; width: 0px; position: absolute; overflow: hidden; right: 0px;">
    <img alt="after" src="/MahApps.Metro/images/home-title-dark.png" height="366" id="afterimage52126904" style="position: absolute; top: 0px; right: 0px;">
  </div>
  <img src="./js/lt-small.png" width="7" height="15" id="lt-arrow52126904" style="z-index: 20; position: absolute; top: 175.5px; left: -20px; opacity: 0;">
  <img src="./js/rt-small.png" width="7" height="15" id="rt-arrow52126904" style="position: absolute; top: 175.5px; left: 12px; opacity: 0;">
</div>

good.html

<div id="home-container" style="width: 1077px; height: 366px; overflow: hidden; position: relative; padding: 0px;">
  <div id="dragwrapper61348719" style="opacity: 0.25; position: absolute; padding: 0px; left: 534.5px; z-index: 20; width: 8px; height: 366px;" class="ui-draggable">
    <div id="drag61348719" style="width: 2px; height: 366px; background-color: rgb(136, 136, 136); position: absolute; left: 3px; background-position: initial initial; background-repeat: initial initial;">
      <img width="8" height="56" alt="handle" src="./js/handle.gif" id="handle61348719" style="z-index: 100; position: relative; cursor: pointer; top: 155px; left: -3px;">	
    </div>	
  </div>
  <div style="height: 366px; width: 538.5px; position: absolute; overflow: hidden; left: 0px; z-index: 10;">
    <img alt="before" src="/MahApps.Metro/images/home-title-light.png" height="366" id="beforeimage61348719" style="position: absolute; top: 0px; left: 0px;">
  </div>
  <div style="height: 366px; width: 1077px; position: absolute; overflow: hidden; right: 0px;">
   <img alt="after" src="/MahApps.Metro/images/home-title-dark.png" height="366" id="afterimage61348719" style="position: absolute; top: 0px; right: 0px;">	
  </div>
  <img src="./js/lt-small.png" width="7" height="15" id="lt-arrow61348719" style="opacity: 0; z-index: 20; position: absolute; top: 175.5px; left: 515px;">
  <img src="./js/rt-small.png" width="7" height="15" id="rt-arrow61348719" style="opacity: 0; position: absolute; top: 175.5px; left: 552px;">
</div>