How To Vertically Align Blocks Using CSS

Author: , June 4th, 2020

Outer Block – set the line-height: {some value} Inner Block – set the line-height: normal, along with display: inline-block; vertical-align: middle; Also works if you set OUTER height instead of the line-height (or together with the same value as the height).

How To Calculate CSS Height On The Fly Using Calc

Author: , March 25th, 2020

I needed to use an iframe between a pre-defined header and footer that would auto-fill the full height on any size screen. On a desktop, the combined height of the header + footer was 223px and for mobile was 157px, so below find the CSS example: calc(100vh – 223px) – for desktop calc(100vh – 157px) […]

How To Create a PayPal-styled Button Using CSS and HTML

Author: , August 31st, 2018

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

The CSS

Google Fonts Reference font-weight values: 100: Ultra Light 200: Thin 300: Light 400: Regular 500: Semi Bold 600: Bold 700: Extra Bold 800: Heavy 900: Ultra Heavy

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

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

Good luck!

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.