Snipplr

(CSS) Device orientation - paul66

Thu, 27 Jan 2011 04:16:51 UTC

These are just two css media queries you may want to use for your website development. With lots of smart-phones, and tablets being able to orientate their screens from landscape to portrait, you may want to include different styles for each. This is how you would go about achieving this.

(CSS) IE7 image resizing - paul66

Thu, 27 Jan 2011 04:11:48 UTC

IE7 by default uses an image resizing algorithm that means that scaled down images can look far from awesome. To solve this, we simply enable a much better resizing algorithm that is available in IE7 that produces results similar to what youâ€™d expect from most image editing software. To read more about this, and similar solutions for IE6, follow the link.

(CSS) Screenreader access - paul66

Thu, 27 Jan 2011 04:10:29 UTC

This snippet basically gives us the best of both worlds, allowing the best usability when it comes to link outlines for both screenreaders tabbing through links, and mouse users.

(CSS) Clickable inputs - paul66

Thu, 27 Jan 2011 04:08:30 UTC

For some reason, most browsers donâ€™t apply a pointer cursor to some clickable inputâ€™s by default to let the user know that this item is clickable, so we solve this by doing it ourselves.

(CSS) Aligning Labels - paul66

Thu, 27 Jan 2011 04:07:32 UTC

Alignment of labels with their relevant inputs can be a horrible task to achieve in older browsers. This snippets solves that for us by making it consistent across browsers!

(CSS) Formatting quoted code - paul66

Thu, 27 Jan 2011 04:05:40 UTC

This snippet simply makes the text wrap when it reaches the walls of its container, in this case, the pre tag, whilst still preserving line breaks and white space cross browser.

(CSS) Force scrollbar - paul66

Thu, 27 Jan 2011 04:03:53 UTC

Sometimes, pages can be shorter than the browser view-port, and when you load a page on the same site that has longer content and uses a scrollbar, content can jump side to side. By forcing a scrollbar no matter the height of our content, we stop this small, but annoying issue.

(CSS) Font normalisation - paul66

Thu, 27 Jan 2011 04:01:20 UTC

To get rid of rendering inconsistencies that can occur between browsers and OSâ€™s when rendering fonts in pixels, this snippet allows you to size your fonts in such a way that the size and line-height will remain consistent across these platforms for your website. You will basically be setting your font sizes via percentages that can be found at the YUI website.

(CSS) Html5 ready reset - paul66

Thu, 27 Jan 2011 03:59:48 UTC

Plenty of you will have used Eric Meyerâ€™s css reset before now. It is included in many frameworks and so on, like 960.gs. This is a revamped version of that reset, that brings it into the present with full support for html5. It sets all the new structural tags as block level, and resets all their default styling as expected.