People have been asking me about how to make a footer stick to the bottom of the screen regardless of which vertical position the browser screen is at. In other words, how to create a footer just like how Facebook does it.

First of all, there are two different types of footer which I’d like to classify them as Floating Header Footer and Sticky Header Footer.

(more…)

With Apple’s iPhone and iPod Touch, Google’s Android smartphones and other portable devices gradually dominating the market, it is getting more important to optimize websites to look better in these relatively-smaller-screen portable devices.

If you have been in CSS game for quite a while, you may think that defining media=handheld will do the trick

@media handheld {
  .navigation {
    display: none;
  }
}

Unfortunately Apple defined it in such that iPhones will look for “screen” media type instead of the limited “handheld” media which deem to be outdated.

The solution to this is to specify CSS rule that looks at the device screen resolution.

There are some sayings that Internet Explorer has issues ignoring the CSS rule, but that can be easily fixed with Internet Explorer’s “conditional comments” feature.

Conceptually, you can define a separate set of CSS for iPhone (or devices with width less than 480px) as follow:

<!--[if !IE]>-->
<link media="only screen and (max-device-width: 480px)" rel="stylesheet" type="text/css" href="iphone.css"/>
<!--<![endif]-->

And the iphone.css can be any CSS definitions that will overwrites the original CSS definitions.

Hopefully this basic and simple trick can help you to kick start your website revamp to cater for different sizes of portable devices.