How To Force SVG To Use the Correct Content-Type

Author: , April 22nd, 2016

If when trying to use SVG as an image <img src=”image.svg”> or as a CSS background-image, the browser doesn’t display it, your web host is probably serving the SVG with the wrong content-type. Add this to your web server config or .htaccess file: AddType image/svg+xml .svg .svgz

How To Deploy Google Fonts

Author: , April 24th, 2014

The HTML 1 2 3 4 5 6 <head>    <link       href=’http://fonts.googleapis.com/css?family=PT+Sans:400italic,400,700,700italic|Open+Sans:400italic,700italic,800italic,300italic,600italic,400,300,700,600,800′       rel=’stylesheet’ type=’text/css’    > </head> <head> <link href=’http://fonts.googleapis.com/css?family=PT+Sans:400italic,400,700,700italic|Open+Sans:400italic,700italic,800italic,300italic,600italic,400,300,700,600,800′ rel=’stylesheet’ type=’text/css’ > </head> The CSS 1 2 3 4 5 6 7 8 9 10 11 h1, .yourClass, #yourID {    font-size: 28px;    line-height: 32px;    font-weight: […]

How To Select the First Table Cell in the First Row Using CSS

Author: , April 19th, 2014

table.myTable > tbody > tr:first-child > td:first-child

How To Create a Full-time Right Scroll Bar in CSS

Author: , November 13th, 2013

1 2 3 4 5 6 7 8 9 10 11 html {     width: 100%;     height: 101%;     overflow-x: hidden;     overflow-y: scroll; }   body {     width: 100%;     height: 100%; } html { width: 100%; height: 101%; overflow-x: hidden; overflow-y: scroll; } body { […]

How To Manually Compile and Minify LESS Source Files

Author: , May 24th, 2012

Prerequisites: LESS Compiler YUI Compressor Unzip and copy the build/yuicompressor-2.4.7.jar file to a known location. Java runtime Install of this is beyond the scope of this post 1 2 /usr/lib/nodejs/less/bin/lessc yourFile.less > yourFile.css /usr/bin/java -jar yuicompressor-2.4.7.jar yourFile.css -v -o yourFile.min.css –charset utf-8 /usr/lib/nodejs/less/bin/lessc yourFile.less > yourFile.css /usr/bin/java -jar yuicompressor-2.4.7.jar yourFile.css -v -o yourFile.min.css –charset utf-8 […]

How To Install LESSC Using node.js

Author: , April 26th, 2012

I did this as root. YMMV… gem uninstall less (just in case you used the old way…) git clone git://github.com/ry/node.git (or use wget http://nodejs.org/dist/v0.6.15/node-v0.6.15.tar.gz; tar xvzf node-*) cd node ./configure make make install cd .. curl http://npmjs.org/install.sh | sh npm install less ln -s /usr/lib/nodejs/less/bin/lessc /usr/bin/lessc

How To Fix IE7 Inline-Block Bug

Author: , October 2nd, 2011

If you’re using inline-block on elements that are inline by nature (a, span, etc.), IE7 will not recognize your inline-block. Simply use this IN ADDITION to your CSS to make it work. 1 2 zoom: 1; *display:inline; zoom: 1; *display:inline;

How To Implement A Very Simple Ajax Loader Using jQueryUI

Author: , September 23rd, 2011

GET Resources http://code.jquery.com/jquery-1.6.4.min.js http://jqueryui.com/resources/download/jquery-ui-1.10.1.custom.zip LOAD Resources 1 2 3 <LINK rel="stylesheet" HREF="/css/smoothness/jquery-ui-1.8.14.custom.min.css"> <script src="/js/jquery-1.6.4.min.js"></script> <script src="/js/jquery-ui-1.8.16.custom.min.js"></script> <LINK rel=”stylesheet” HREF=”/css/smoothness/jquery-ui-1.8.14.custom.min.css”> <script src=”/js/jquery-1.6.4.min.js”></script> <script src=”/js/jquery-ui-1.8.16.custom.min.js”></script> HTML Substitute your own loader graphic from http://www.ajaxload.info/ 1 2 3 4 5 6 <img      src="//www.ericmichaelstone.com/wp-content/uploads/2013/02/ajax-loader.gif"      alt="Please wait…"      class="Spinner hidden"      id="Spinner-first" /> <img src=”//www.ericmichaelstone.com/wp-content/uploads/2013/02/ajax-loader.gif” […]

How To Delete Development File Versions (i.e. .css or .js)

Author: , June 30th, 2011

1 /usr/bin/find /my/dir -name "*.css" -a -not -name "*.min.*" -exec rm {} \; /usr/bin/find /my/dir -name “*.css” -a -not -name “*.min.*” -exec rm {} \;

How To Style A Trademark Symbol Easily

Author: , May 5th, 2011

I wanted the trademark symbol on the site title to be tiny. A simple thing, really, but it took me a few tries to get just right… 1 2 3 4 5 6 The CSS: h1 { font-size: 36px; line-height: 36px; } h1 sup { font-size: 15px; line-height: 15px; }   The HTML: <h1>The Site […]