IE6 CSS Fixer is a free web-based tool to decrease the monkey work when starting an IE6 CSS fix file.
It is not a magical one-click solution that will solve every possible problem, it can even create new errors, but it is a handy solution that offers customized fixes for commonly known problems.
The tool simply checks your CSS file & creates new CSS rules for the possible problematic objects. New rules can be inserted as a seperate CSS file easily to check if they cause any problems.
Some CSS fixes it offers are:
- adding
display:inline to floated elements
- converting
min-height values
- fixing negative margins & more.
Styleneat is a free web service that helps having "easy to read/update" CSS files.
It organizes and standardizes CSS – selectors, sub-selectors and properties – in a structure that makes it easier to define page areas and see how they relate to each other.
The service can be used in 3 ways:
- by pasting the CSS text
- by uploading the CSS file
- by providing the URL of the CSS file
It offers several options like "sorting properties and selectors alphabetically" or "single/multiple line formatting".
Filament Group is sharing a method of "creating CSS tooltip pointers with no images" that we’ll probably see in the upcoming jQuery UI widgets.
It uses Polygonal CSS, a trick to display non rectangular shapes, for creating the tooltip pointer (a triangle).
Although the method looks experimental, it is cross-browser & provides ease for creating flexible solutions by not requiring an image.
The website explains how it is achieved in detail & the solution will probably become more popular once we see them in the jQuery UI widgets.
Requirements: No Requirements
Compatibility: All Major Browsers
Vladimir Carrer, who also created the Emastic & Malo CSS frameworks has a fresh framework named Golden Grid.
It is a web grid system, that is totally focused on grid-based designs (not a complete CSS framework).
Golden Grid uses float:left approach for building grids rather than positions.
It is a 6/12 column grid system with a 970px main width. Total file size is <1kb when compressed.
To read more about it, you can check his blog post announcing the framework.
Requirements: No Requirements
Compatibility: All Major Browsers
Flash, Silverlight & JavaScript are already offering quality solutions for creating graphs. On the other hand, it is impressive to see what an be done in visualising data with CSS.
After the pure CSS data chart, Css Globe is presenting a very creative tutorial (with source codes) on creating a pure CSS line graph.
The solution creates a vertical/horizontal grid with dd & dl elements in the background. And, a smartly prepared image is used with CSS sprites technique to display the lines.
Although it looks complicated, the technique is simple yet clever & inspiring.
Veerle’s blog is presenting a tutorial, with source codes, on creating a simple & scalable css-based breadcrumbs.
What are breadcumbs?
From Wikipedia: Breadcrumbs or breadcrumb trail are a navigation technique used in user interfaces. Its purpose is to give users a way to keep track of their location within programs or documents.
Only 1 image is used for creating this navigation which is the seperator. It is a bigger image than the displayed one considering the breadcrumb will be scaled when needed.
A handy resource on a method that is used in almost every web application. To see the demo, click here.
Compatibility: All Major Browsers
EmChart is a handy resource when designing with "em"s & need to convert px values to em values.
By checking the "desired pixel size" / "current pixel size", it is possible to reach the em value. And, rather than calculating this every time, EmChart makes this process easier.
The chart can be reached online or downloaded & used offline.
Forcing a footer to stick to the bottom of a page is sometimes challenging.
CSS Sticky Footer presents a cross browser solution including Google Chrome.
When compared to some other popular solutions, it works with floated 2-column layouts & no overlaps occur in resized browsers. Also, no empty divs required for pushing.
A how-to on using CSS Sticky Footers can be found here.
Requirements: No Requirements
Compatibility: All Major Browsers
SenCSs is a CSS framework that doesn’t provide a layout system but aims to take care of the rest, like:
- fonts & font-sizes
- paddings
- margins
- colors,
- tables & lists
- headers, blockquotes and what more..
SenCSs has support for forms which helps presenting them nicely (better form support is on the way).
There are also styles for elements like errors, warnings or success messages which are parts of a standard web application.
SenCSs, although being fresh & currently in development, is a nice base to start with & improve depending on your needs.
An example HTML file can be found here.
Malo is a very small CSS framework (0,25 kb compressed) for creating a structural base for small or medium web sites.
It is derived from Emastic CSS Framework (created by the same author – see WRD post).
Malo has two parts:
It covers most of the grid scenarios & very ideal for anyone that doesn’t want to use a complete framework but get some essentials, specially grids, which are problematic in general.
