ulissesalmeida/ie8-lot-of-bugs.html

## ie8-lot-of-bugs.html
<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>jQuery Snippet</title>
    <link rel="stylesheet" href="http://rawgithub.com/necolas/normalize.css/master/normalize.css">
    <script src="http://rawgithub.com/LeaVerou/prefixfree/gh-pages/prefixfree.min.js"></script>
    <style type="text/css">

      label {

      }

      .checkbox {
        display: none;
      }

      .image-wrapper {
        position: relative;
        width: 300px;
      }

      img {
       filter: alpha(opacity = 50);
      }

      .image-wrapper:after {
        position: absolute;
        bottom: 0;
        right: 0;

        content: '';
        display: block;
        background-image: url('product-add-icon.png');
        height: 20px;
        width: 20px;
      }

      label:hover .image-wrapper:after {
        content: 'bilubilu';
        background-image: url('product-add-icon-hover.png');

        /* Image replacement thigs */
        text-indent: 100%;
        white-space: nowrap;
        overflow: hidden;
      }
    </style>
  </head>
  <body>
    <label>
      <div class='image-wrapper'>
        <img class='image' src='justin.jpg' width="300" />
        <span class='marker'></span>
      </div>
        <span>Toda Teen</span>
        <input class='checkbox' type='checkbox'>
    </label>
    <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
    <script>
      $(function($) {
        $('.checkbox').on('change', function() { alert('oi')});

        // if ie8
        var handler = function(e) {
          e.preventDefault();
          e.stopPropagation();

          var checkbox = $(e.target).closest('label').find('.checkbox');

          checkbox.click(); // click on the checkbox
        };

        $('span').on('click', handler);
        $('.image-wrapper').on('click', handler);
      });
    </script>
  </body>
</html>
	<!doctype html>
	<html lang="en">
	<head>
	<meta charset="utf-8">
	<title>jQuery Snippet</title>
	<link rel="stylesheet" href="http://rawgithub.com/necolas/normalize.css/master/normalize.css">
	<script src="http://rawgithub.com/LeaVerou/prefixfree/gh-pages/prefixfree.min.js"></script>
	<style type="text/css">

	label {

	}

	.checkbox {
	display: none;
	}

	.image-wrapper {
	position: relative;
	width: 300px;
	}

	img {
	filter: alpha(opacity = 50);
	}

	.image-wrapper:after {
	position: absolute;
	bottom: 0;
	right: 0;

	content: '';
	display: block;
	background-image: url('product-add-icon.png');
	height: 20px;
	width: 20px;
	}

	label:hover .image-wrapper:after {
	content: 'bilubilu';
	background-image: url('product-add-icon-hover.png');

	/* Image replacement thigs */
	text-indent: 100%;
	white-space: nowrap;
	overflow: hidden;
	}
	</style>
	</head>
	<body>
	<label>
	<div class='image-wrapper'>
	<img class='image' src='justin.jpg' width="300" />
	<span class='marker'></span>
	</div>
	<span>Toda Teen</span>
	<input class='checkbox' type='checkbox'>
	</label>
	<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
	<script>
	$(function($) {
	$('.checkbox').on('change', function() { alert('oi')});

	// if ie8
	var handler = function(e) {
	e.preventDefault();
	e.stopPropagation();

	var checkbox = $(e.target).closest('label').find('.checkbox');

	checkbox.click(); // click on the checkbox
	};

	$('span').on('click', handler);
	$('.image-wrapper').on('click', handler);
	});
	</script>
	</body>
	</html>