Lets say you have this HTML & CSS for a button:

<style type="text/css">
.button {
	background-color:#222;
	color:#fff;
	height:25px;
	text-align:center;
	vertical-align:middle;
	width:85px;
}
</style>

<div class="button">Submit</div>

You’d think that vertical-align would center the text vertically, but it does not work in a DIV. The typical fix for this is to add padding to the top and/or bottom of the div and hope it looks good in every browser. While this is a legit fix – and a good one if you do not have a fixed height – there is an even better one for divs that only have one line of text and a fixed height: using a line-height that equals the height of the div.

Your CSS should look like this – the important parts are in red:

<style type="text/css">
.button {
	background-color:#222;
	color:#fff;
	height:25px;
	line-height:25px;
	text-align:center;
	width:85px;
}
</style>

In the end, your div will look like this:

A nice clean, hack-free fix.

We’ve been talking in the office about producing environments as part of the user experience. People explore websites to reach their goal just like we explored worlds in video games to reach the end boss. We’re realizing that people don’t want to be online doing work, they want to be online having fun.

So lets start by making work fun.

Check out Jparallax, a clever parallax effects in Jquery.

Whatever content you have to present, you can present them in a more interactive & more responsive ways. In this article we’d like to present 10 smart javascript techniques for showing and hiding content using different JS libraries.”

Whole post here

Read whole article here

The first 6 bits of fonts on this list are considered “web-safe” – they’re supported by all major browsers on any platform. The fonts in the following 2 bits come pre-installed on most but not all systems. The fonts in the last 8 bits are mainly used for decorative purposes, and implemented on the Web as sIFR or saved as images.

1. Helvetica, Helvetica Neue, Arial
2. Verdana
3. Georgia
4. Trebuchet MS
5. Century Gothic
6. Lucida Sans Unicode, Lucida Grande
7. Palatino
8. Garamond, Baskerville, Caslon
9. Univers Condensed, Linotype Univers
10. Myriad Pro
11. Rockwell
12. Warnock Pro
13. FF DIN
14. Gotham
15. Frutiger
16. Dax Regular

Read whole article here

ScreenGrab: https://addons.mozilla.org/en-US/firefox/addon/1146
Screengrab saves entire webpages as images.
It will save what you can see in the window, the entire page, just a selection, a particular frame… basically it saves webpages as images.
The following little keywords are at the request of those who can’t remember the name ScreenGrab! and want searches to work. It takes screen shots, screenshots – that is, shots, of web pages.

MeasureIt: https://addons.mozilla.org/en-US/firefox/addon/539
Draw out a ruler to get the pixel width and height of any elements on a webpage.

Inline Code Finder for Firebug: https://addons.mozilla.org/en-US/firefox/addon/9641
Inline Code Finder is an add-on to Firebug, to be able to find HTML elements with any of the below issues:
* Inline JavaScript events
* Inline style
* javascript: links
Detailed description can be found at http://www.robertnyman.com/inline-code-finder/

YSlow: https://addons.mozilla.org/en-US/firefox/addon/5369
YSlow analyzes web pages and tells you why they’re slow based on Yahoo’s rules for high performance web sites.

Pixel Perfect: https://addons.mozilla.org/en-US/firefox/addon/7943
Pixel Perfect is a Firefox/Firebug extension that allows web developers and designers to easily overlay a web composition over top of the developed HTML.
* Requires Firebug

ColorZilla 2.0: https://addons.mozilla.org/en-US/firefox/addon/271
With ColorZilla you can get a color reading from any point in your browser, quickly adjust this color and paste it into another program. You can Zoom the page you are viewing and measure distances between any two points on the page. The built-in palette browser allows choosing colors from pre-defined color sets and saving the most used colors in custom palettes. DOM spying features allow getting various information about DOM elements quickly and easily. And there’s more…

IE Tab: https://addons.mozilla.org/en-US/firefox/addon/1419
This is a great tool for web developers, since you can easily see how your web page displayed in IE with just one click and then switch back to Firefox.

PageDiff 1.3.0: https://addons.mozilla.org/en-US/firefox/addon/4274
Pagediff is a simple page compare application. It helps web developers and designers to see HTML-code(text) differences between web pages.
It doesn’t take original page source. It takes browser generated DOM compliant view source. It omits Doctype declaration and HTML tags.
After installation, to use this, one has to
1. Right click on a page & select ‘Start DIFF’ (this action saves the current page to memory),
2. Go to the page which one wants to compare (with the saved one) and
3. Right click on the page & select ‘Show DIFF’.

Html Validator: https://addons.mozilla.org/en-US/firefox/addon/249
HTML Validator is a Mozilla extension that adds HTML validation inside Firefox and Mozilla. The number of errors of a HTML page is seen on the form of an icon in the status bar when browsing.
The extension can validate the HTML sent by the server or the HTML in the memory (after Ajax execution).
The details of the errors are seen when looking the HTML source of the page.
The extension is based on Tidy and OpenSP (SGML Parser). Both algorithms were originally developed by the Web Consortium W3C. And now extended and improved by a lot of persons. Both algorithms are embedded inside Mozilla/Firefox and makes the validation locally on your machine, without sending HTML to a third party server.
Each algorithm has advantages and inconvenients. The program will give you the choice at startup. But mostly,
- The SGML parser is the same program than the one running behind validator.w3.org.
- Tidy has accessibility check for the 3 levels defined in WAI

Console²: https://addons.mozilla.org/en-US/firefox/addon/1815
As of Firefox 1.5, the JavaScript Console is used not only for JavaScript errors, but for CSS errors as well. This extension takes this into account by providing a simple possibility to display errors by type.
Console² let’s you display errors filtered by type (Errors, Warnings, Messages), language (JavaScript, CSS, XML) and context (Chrome, Content). Furthermore it provides a simple search box (as seen in the History and Bookmarks sidebars), hiding of duplicates, sidebar optimizations, a customizable toolbar and some more accessibility improvements.

http://www.sohtanaka.com/web-design/css-fixes-tools-hacks-cross-browser-solutions/