Vertically Centering Multiple Lines of Text in CSS

It used to be pretty difficult to vertically center a paragraph of text within its container using CSS.  Fortunately, CSS 3 makes it a bit easier: p { position: relative; top: 50%; -ms-transform: translateY(-50%); -webkit-transform: translateY(-50%); transform: translateY(-50%);}  Here’s an example on JSBin.


Hiding Vertical Scrollbars with Pure CSS in Chrome, IE (6+), Firefox, Opera, and Safari

I just spent the past day trying to figure out the best way to hide scrollbars using pure CSS in the latest versions of every browser.  I wanted to be able to still scroll within the element, however, so using: .element { overflow: hidden; }  was not an option.  I looked at how Facebook hides…


JsonRequestBehavior.AllowGet Not Working?

Today, I got the following error: This request has been blocked because sensitive information could be disclosed to third party web sites when this is used in a GET request. To allow GET requests, set JsonRequestBehavior to AllowGet. When I looked in my controller, I found: return Json(response, JsonRequestBehavior.AllowGet); That’s strange… A quick run of…


Detecting if the User has Set Your Website as His or Her Homepage (IE-only)

I learned today that Internet Explorer has an API for detecting whether the user has set your website as his or her homepage.  More details are available here:   I made a quick Fiddle to demonstrate:   Worth noting is that the isHomepage method will always return false if the document that…


Distinguishing between min-height and height in CSS

Suppose we set the height of the body of a page to be 100%.  Then what happens is that the body’s height takes up 100% of the viewable area.  If the content is taller than 100% of the screen (i.e., a scrollbar is needed), then body tag will not extend to that height.  So how…


Expanding a Column to Fill the Remaining Horizontal Space

When you have two columns on a page, there is a pretty simple (though non-obvious) way to make the second column fill up the remaining width of the parent.  First, you must float the first column to the left and set its width.  Then, instead of floating or setting a width on the second column,…


Making An Element Fill 100% Height In Pure CSS

A common problem that web developers have is trying to make an element span 100% of its parent container’s height.  Most solutions to this problem involve JavaScript that is bound to resize events, load events, etc.  I am writing this blog post to tell you that there is a better way!  This new method works…


Awesome PNG Compression Tool

Compressing images can save a lot of valuable bandwidth.  One tool I really like for compressing images is PNGGauntlet.  Give it a try!


Opening the Internet Explorer Developer Tools Dialog on Modal Windows

As you may have noticed, Internet Explorer’s Developer Tools window (press F12 to get there) cannot be opened for modal windows.  Here’s a quick workaround: Open Internet Explorer Click the “Tools” gear (Alt+X) Select “Internet options” Select the “Security” tab Click the “Custom level…” button Disable the “Allow websites to open windows without address or…