How To Vertically Align Blocks Using CSS

Author: erics, 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).

Categories: How-To's, Technology Tags: Align, CSS, height, HotTo, html, line, line-height, normal, tips, Vertical | No comments

How To Calculate CSS Height On The Fly Using Calc

Author: erics, 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) […]

Categories: How-To's, Technology Tags: Auto, cacl(), Calc, CSS, Fly, Function, height, howto, html, On The Fly, tips | No comments

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

Author: erics, August 31st, 2018

<button class="paypal-btn large" onclick="window.location='https://www.yoursite.com/targetPage/';return false">What a Great Button</button>

1	<button class="paypal-btn large" onclick="window.location='https://www.yoursite.com/targetPage/';return false">What a Great Button</button>

button.paypal-btn {
 white-space: nowrap;
}
button.paypal-btn {
 white-space: nowrap;
 overflow: hidden;
 border-radius: 13px;
 font-family: "Arial", bold, italic;
 font-weight: bold;
 font-style: italic;
 border: 1px solid #ffa823;
 color: #0E3168;
 background: #ffa823;
 position: relative;
 text-shadow: 0 1px 0 rgba(255,255,255,.5);
 cursor: pointer;
 z-index: 0;
}
button.paypal-btn:before {
 content: " ";
 position: absolute;
 width: 100%;
 height: 100%;
 border-radius: 11px;
 top: 0;
 left: 0;
 background: #ffa823;
 background: -webkit-linear-gradient(top, #FFAA00 0%,#FFAA00 80%,#FFF8FC 100%);
 background: -moz-linear-gradient(top, #FFAA00 0%,#FFAA00 80%,#FFF8FC 100%);
 background: -ms-linear-gradient(top, #FFAA00 0%,#FFAA00 80%,#FFF8FC 100%);
 background: linear-gradient(top, #FFAA00 0%,#FFAA00 80%,#FFF8FC 100%);
 z-index: -2;
}
button.paypal-btn:after {
 content: " ";
 position: absolute;
 width: 98%;
 height: 60%;
 border-radius: 40px 40px 38px 38px;
 top: 0;
 left: 0;
 background: -webkit-linear-gradient(top, #fefefe 0%, #fed994 100%);
 background: -moz-linear-gradient(top, #fefefe 0%, #fed994 100%);
 background: -ms-linear-gradient(top, #fefefe 0%, #fed994 100%);
 background: linear-gradient(top, #fefefe 0%, #fed994 100%);
 z-index: -1;
 -webkit-transform: translateX(1%);
 -moz-transform: translateX(1%);
 -ms-transform: translateX(1%);
 transform: translateX(1%);
}
button.paypal-btn.small {
 padding: 3px 15px;
 font-size: 12px;
}
button.paypal-btn.large {
 padding: 4px 19px;
 font-size: 14px;
}

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

button.paypal-btn {

white-space: nowrap;

}

button.paypal-btn {

white-space: nowrap;

overflow: hidden;

border-radius: 13px;

font-family: "Arial", bold, italic;

font-weight: bold;

font-style: italic;

border: 1px solid #ffa823;

color: #0E3168;

background: #ffa823;

position: relative;

text-shadow: 0 1px 0 rgba(255,255,255,.5);

cursor: pointer;

z-index: 0;

}

button.paypal-btn:before {

content: " ";

position: absolute;

width: 100%;

height: 100%;

border-radius: 11px;

top: 0;

left: 0;

background: #ffa823;

background: -webkit-linear-gradient(top, #FFAA00 0%,#FFAA00 80%,#FFF8FC 100%);

background: -moz-linear-gradient(top, #FFAA00 0%,#FFAA00 80%,#FFF8FC 100%);

background: -ms-linear-gradient(top, #FFAA00 0%,#FFAA00 80%,#FFF8FC 100%);

background: linear-gradient(top, #FFAA00 0%,#FFAA00 80%,#FFF8FC 100%);

z-index: -2;

}

button.paypal-btn:after {

content: " ";

position: absolute;

width: 98%;

height: 60%;

border-radius: 40px 40px 38px 38px;

top: 0;

left: 0;

background: -webkit-linear-gradient(top, #fefefe 0%, #fed994 100%);

background: -moz-linear-gradient(top, #fefefe 0%, #fed994 100%);

background: -ms-linear-gradient(top, #fefefe 0%, #fed994 100%);

background: linear-gradient(top, #fefefe 0%, #fed994 100%);

z-index: -1;

-webkit-transform: translateX(1%);

-moz-transform: translateX(1%);

-ms-transform: translateX(1%);

transform: translateX(1%);

}

button.paypal-btn.small {

padding: 3px 15px;

font-size: 12px;

}

button.paypal-btn.large {

padding: 4px 19px;

font-size: 14px;

}

Categories: How-To's, Technology Tags: Button, Class, Create, CSS, howto, html, onclick, PayPal, style, tips | No comments

How To Force SVG To Use the Correct Content-Type

Author: erics, 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

Categories: How-To's, Technology Tags: .htaccess, apache, Background, Content, Content-Type, CSS, howto, html, Image, img, SVG, tips, Type, Web, Web server, XML | No comments

How To Deploy Google Fonts

Author: erics, April 24th, 2014

The HTML

<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>

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>

The CSS

h1,
.yourClass,
#yourID
{
   font-size: 28px;
   line-height: 32px;
   font-weight: 300;
   margin: 0 0 8px 0;
   text-align: center;
   font-style: normal;
}

1

2

3

4

5

6

7

8

9

10

11

h1,

.yourClass,

#yourID

{

font-size: 28px;

line-height: 32px;

font-weight: 300;

margin: 0 0 8px 0;

text-align: center;

font-style: normal;

}

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

Categories: Technology Tags: CSS, Font, font-style, font-weight, Fonts, Google, Google Fonts | No comments

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

Author: erics, April 19th, 2014

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

Categories: How-To's, Technology Tags: :first-child, Cell, Child, CSS, first, howto, html, Row, select, Table, TD, TH, tips | No comments

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

Author: erics, November 13th, 2013

html {
    width: 100%;
    height: 101%;
    overflow-x: hidden;
    overflow-y: scroll;
}

body {
    width: 100%;
    height: 100%;
}

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%;

}

Categories: How-To's, Technology Tags: Bar, CSS, howto, Right Scroll, Scroll, Scroll bar, Scrollbar, tips | No comments

How To Manually Compile and Minify LESS Source Files

Author: erics, 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

/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

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

Good luck!

Categories: Technology Tags: compile, Compress, CSS, LESS, Minify, YUI, YUI Compressor | No comments

How To Install LESSC Using node.js

Author: erics, 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

Categories: How-To's, Technology Tags: CSS, howto, JS, LESS, lessc, node, npm, tips | No comments

How To Fix IE7 Inline-Block Bug

Author: erics, 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.

zoom: 1;
*display:inline;

1 2	zoom: 1; *display:inline;

Categories: How-To's, Technology Tags: CSS, Display, Div, Element, howto, IE7, Inline, Inline-Block, Internet Explorer, Microshit, Span, tips, Zoom | No comments

How To Vertically Align Blocks Using CSS

How To Calculate CSS Height On The Fly Using Calc

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

How To Force SVG To Use the Correct Content-Type

How To Deploy Google Fonts

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

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

How To Manually Compile and Minify LESS Source Files

How To Install LESSC Using node.js

How To Fix IE7 Inline-Block Bug

Our Link Network

Business

Client Websites

Fine Dining

Friends & Family

Galleries

Health

Resources

Technology

Travel

The Archives

Latest Ramblings…

Various Topics of No Interest