css

There are several tutorials on how to make CSS sticky footers, sticky headers, and sticky sidebars.  This is one.  There is a working demo to check out.

Remember to compensate at the bottom of your page.  If your sticky footer is 75px high, add 80px padding or margin so that the sticky footer doesn’t cover the content at the bottom of your page.  The 2 main CSS elements for the sticky footer are position: fixed; and bottom: 0px;

The important thing to understand about  position: fixed; in a sticky footer is that it’s in a fixed position relative to the element or “container” it’s in. Continue reading

Posted in CSS.
html

Have you ever made an HTML email with images in it and it looked good in most email clients, but not gmail or possibly hotmail?

You’ve made sure to build your HTML email using tables instead of divs, used colspans, specified heights and widths. But…the images still separate in gmail. This might be the fix. Continue reading

html

Here we examine why you would use a protocol relative URL.  Have you ever had this error in ie – “This page contains both secure and nonsecure items?” A protocol relative URL may also be called a “network-path reference” or “scheme-relative URL.” If your page is through HTTPS protocol, then it will request the assets be through HTTPS protocol also.  If an asset is requested through HTTP on an HTTPS page it will throw an error.  The error is “This page contains both secure and nonsecure items” error.  This is where the protocol relative URL can help. Continue reading

css

“CSS clearfix” is often needed to clear floats.

  • Examples 1-3 clear floats by applying a CSS class to a p tag. The p tag holds a “non-breaking space” – ascii code for space is “ ”
  • Examples 4 and 5 clear floats by applying the CSS clearfix class in a different manner. The clearfix is applied to a div tag that contains the floated items.

Continue reading

Posted in CSS.