Skip to content

Instantly share code, notes, and snippets.

@mhulse
Created May 20, 2011 23:06
Show Gist options
  • Save mhulse/983983 to your computer and use it in GitHub Desktop.
Save mhulse/983983 to your computer and use it in GitHub Desktop.
HTML5 bare bones template with Selectivizr and jquery (code used to find a bug with the JS and background image).
#container {
padding: 5em;
padding: 10px;
}
#flag {
line-height: 1;
text-indent: -999em;
width: 79px;
height: 48px;
/*
* Selectivizr, along with jQuery, cause the remote URL to the below background image disapear.
* When I remove link to jQuery, and/or change path to a relative one, the background image re-appears.
*/
/*background: url(logo-01.png) no-repeat;*/
background: url(http://assets.hulse.me/images/template/logo-01.png) no-repeat;
margin: 0;
padding: 0;
overflow: hidden;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Test</title>
<meta name="description" content="">
<link rel="stylesheet" href="test.css?v=2">
<!--
<style type="text/css">
/* Embedded styles appear to not have any problems. */
#container {
padding: 5em;
padding: 10px;
}
#flag {
line-height: 1;
text-indent: -999em;
width: 79px;
height: 48px;
/*background: url(logo-01.png) no-repeat;*/
background: url(http://assets.hulse.me/images/template/logo-01.png) no-repeat; /* Not on same server as CSS. */
margin: 0;
padding: 0;
overflow: hidden;
}
</style>
-->
</head>
<body>
<div id="container">
<header>
<h1 id="flag">My Slogan</h1>
</header>
</div>
<!-- If I remove link to jQuery lib, then image shows up. -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<!--[if (lt IE 9) & (!IEMobile)]>
<script src="selectivizr.js"></script>
<![endif]-->
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment