Recommended Web Tools Archives

Two fundamental problems with CSS optimization and compression

Compressing CSS files can greatly reduce the size of the file and thus reduce the amount of bandwidth used every time the file is called from within a webpage.

On this blog I have talked about two tools that assist in compressing CSS files: CSS Tweak and Code Beautifier.

There are two problems that you should be aware of before using any CSS compression tool. These problems are related to editing the file.

The practical practice of editing the CSS file is hampered in several ways. When a CSS file is optimized and compressed, all the white space is removed. Thus, all the code is scrunched together. All line breaks and carriage returns are removed. When an optimized file is opened in a text editor, the text fills the screen and is difficult to read. Finding the item that needs to be edited is difficult. These problems exist even in tools such as Top Style Lite. While Top Style Lite can still find all the selectors, it cant navigate correctly to them since all the carriage returns are removed. It sees the file as one big long text sentence. It can’t find individual terms without the proper breaks and spacing.

To get around this issue it becomes necessary to have two CSS files. One that is readable yet not used “live”. The second one is a compressed version and is used in the live environment. When changes to the CSS file need to be made, changes are made to the readable version which is then recompressed. This recompressed file then replaces the current compressed “live” file. It can be a pain in the patookus.

If anyone has any practical advice please leave a comment. I am curious how others handle the editing of their compressed CSS files. I am especially interested if there is an editor that can easily read and find selectors of compressed files.

Advanced CSS Optimization with Code Beautifier

There are several frustrations working with CSS files. One is keeping the size of the CSS file small so that it does not take up a lot of bandwidth. Second, is keeping the CSS file “clean”. CSS optimizers seek to help users overcome these frustrations.

There are several CSS optimizers out there and I have reviewed one other in the past. Code Beautifier is a little more advanced than other optimizers and provides a greater set of options to control the optimization process.

The interface is easy. Either copy and paste your CSS file into a text box or point Code Beautifier to the URL of the CSS file. I would suggest that Code Beautifer also include a means to upload an actual fiile.

There are several options for optimizing your CSS file.

• Compression – This setting determines the level of compression. The levels are Highest, High, Standard and Low. The difference between each is the level of readability. The Highest level will remove all white space and scrunch everything together. This is ideal if you are seeking to shrink your CSS file as small as possible. Users can also create their own custom compression levels. I have not read how to do this, but it involves the creation of a template.
• Preserve CSS – If checked, this will keep all comments and hacks. If you want to compress your file as much as possible it is best to leave this unchecked.
• Sort Selectors – This checkbox controls whether the optimizer should alphabetically sort your selectors. I am really surprised they offer this as an option. Changing the order of your selector WILL AFFECT THE BEHAVIOR OF YOUR CODE!!! Personally, I would not use this option unless I had a really small and simple CSS file.
• Sort Properties – If checked, this will alphabetically sort the properties underneath each selector.
• Regroup Selectors – If you have multiple selectors such as a, a.hover and a.visited it will merge these items under “a”. Unfortunately, this can have undesired effects. It will obliterate the differences and thus may change your styling. It is best to leave this at “Do not change anything”.
• Optimize Shorthands – A variety of values for properties can be written in a shorthand format. Choices include “Don’t Optimize”, “Safe Optimizations” and “All Optimizations”.
• Compress Colors – If checked colors such as #336600 will be rewritten as #360.
• Compress Font Weight – If checked, a font weight of “normal” will be rewritten as “400″, etc.
• Lowercase Selectors – makes all selectors lowercase. Recommended. This is needed to comply with XHTML standards.
• Case for properties – select the case for all properties and their values. Lower case is recommended.
• Remove unnecessary backslashes – this may affect any hacks. Careful with this.
• Remove last ; – removes the semi-colon at the end of each property
• Discard invalid properties – This is useful only in a development stage. Discarding invalid properties may remove selectors that affect the styling of your pages.
• add timestamp – adds a timestamp to file
• output as file – When optimization is complete, will provide a button to download the new version as a file. Otherwise, you will have to copy and paste the new code.

Once all options have been selected and the CSS file processed, Code Beautifier will output a series of messages of all items that have been changed. Below is an example from my test CSS file:

37 Optimised number: Changed “0px” to “0″
61 Optimised color: Changed “#000000″ to “#000″
62 Optimised color: Changed “#ffffff” to “#fff”
63Optimised color: Changed “#003366″ to “#036″
121Removed unnecessary backslash
Optimised number: Changed “1.0em” to “1em”
Optimised shorthand notation (padding): Changed “2px 5px 2px 5px” to “2px 5px”

Notice it provides the line number where the change was made.

CB will also provide the starting size, ending size and compression ration. My file started at 13.762 KB, ended at 8.522 KB, with a compression ratio of 37.9%.

Overall, Code Beautifier is a good tool though it may be a little dangerous for the beginner. Some of the options can have dire consequences if you are not aware of what the option may do to your file.

Code Beautifier is based on the open source project CSSTidy.

Easy CSS editing with TopStyle Lite

Ever try to track down a problem in your CSS file and find yourself frustrated in tracking down the exact class or id? When a CSS gets to be a certain length it can be a bear to maintain. CSS files are typically organized logically, never alphabetically so things are easier to find.

I have found using the Find function within my text editor is an inefficient way to find my way around my CSS files.

With TopStyle Lite, I have found an easy way to edit and maintain my CSS files.

The benefit of TS Lite is the ease of editing. If you are looking for a tool to help with CSS layouts, etc. then you will want to consider more professional versions. TS Lite helps me see my CSS files in a very organized way. There are two key panes in TS Lite. The Style Sheet pane and the Style Inspector Pane. The Style Sheet pane displays the CSS file you currently have open.

Sometimes a CSS file looks like a blur when viewed in a regular b&w text editor. Items within TS Lite are color coded for easy identification and readability. Color coding also helps in trouble shooting. It is easy to find missing dark blue parentheses, etc.

The Style Inspector pane is divided into two tabs: selectors and properties.

The selectors tab displays all the elements, classes and ids in the style sheet. As a reminder, elements are all items that are “standard” parts of html such as ‘body’, ‘table’, ‘h1′, etc. Classes are items defined by a period (‘.’) and are typically meant to be reusable. ID’s are items defined by the pound sign (‘#’) and refer to very specific elements typically used only once per page.

These three categories are displayed in a tree format. Below are screenshots of the three categories:

The organizational tree is extremely helpful. The item is placed in alphabetically ordered within the appropriate category. Need to find your #header id? Very easy to find. No more looking through your whole file trying to remember if you placed it at the top, in the middle or at the bottom.

Simply clicking on the element from the selector tab puts your cursor at the very place it occurs within your file. This is displayed in the Style Sheet pane.

For example, clicking on ‘body’ under elements will place your cursor right before the ‘body’ entry in the CSS pane.

Editing from that point is easy. Manually type the new code and click save.

If you are editing from the CSS Pane you have another option for adding properties. Instead of manually adding them, a property tab is available. The property tab looks like the image below.

The property tab lets you add properties view point and click. Its a nice feature to have only if you are unsure of the syntax. Once you get familiar with the syntax it is easier to type the code out manually. However, it can definitely be a benefit to beginners.

TS Lite also has a preview pane which will preview your CSS file. It previews colors and formatting. Keep in mind that it will not correctly disp

Is the PRO version of TopStyle or any purchased CSS editor worth it?

For the beginner I would say “no”. Save your pennies for other things. If you find you are doing A LOT of CSS work then I would download the trial version of TopStyle PRO and see if it meets your needs. If you only do occasional CSS work, then your text editor and TSLite are all you need.

Fixed Width Layouts are best for beginners

I recently messed around with converting this website over to a liquid layout. For the last couple of months it has been in a liquid form. While I generally liked the look and feel, there were a few problems:

1) The website was borked when viewed with an 800×600 screen resolution. This was not a major concern since only 5% of the viewers of this website use 800×600. However, it still bothered me that I would either have to redo the entire design or create a special CSS file just for that resolution (which I know some sites do).

2) General weird bonkiness. I can’t explain all of the weird stuff that would occur. It seemed an issue of control. Various pages, under certain viewing circumstances displayed weird behavior.

While the percentage of viewers was small, it still bothered me that a portion of my viewers were seeing a messed up website. And while the general weirdness was mostly minor, I dreaded the thought of tracking down each individual issue. I am not a web developer by trade. I would rather write content than fix a web design problem. So with a tweak to the CSS here and there, I switched back to a fixed width layout. I realize my CSS now contains some extraneous code. My main concern however is that it displays correctly no matter the screen resolution. yeah!

Part of the impetus to reverting back to a fixed width layout was Alex King’s series on his blog redesign. He redesigned in a fixed width layout made for the 1024×768 screen resolution. This seemed to me like a fair compromise.

It seems to me that a fixed width layout provides added levels of control over the placement of design elements. Fixed width layouts essential create a “box”. Elements are kept within the parameters of the box. The box hardly breaks (only when there is a misplaced div). It seems that a fixed width layout is the way to go for beginners since it eliminates “some” of the unruliness of cascading style sheets.

A fixed width layout designed for a 1024×768 resolution does impact 800×600 viewers. Users do have to scroll to see the whole site. However this is somewhat mitigated depending on the design. My design uses two columns to the far right. The leftmost of those columns contains my main navigational menus. The rightmost contains anciallary data and links. While the width is fixed for a 1024×768 screen, 800×600 users still see my main content and my main navigation column. They only have to scroll to see the ancillary material. Again, seems like a fair compromise.

I do think that a designer needs to consider the website’s audience. 5% of my viewers use 800×600, 45% use 1024×768 and 45% use 1280×1024. If your website sees 25% or more of its viewers using 800×600, than you should probably still base your design around that resolution. But like I said, the 1024×768 fixed width layout does offer a compromise. Just ensure your 800×600 readers dont have to scroll to see your main content.

As this is the first post in 2007, I hope that everyone had a safe New Year. I am looking forward to a great year

Cascading Style Sheet Fixed Width Layout Tool

Designing layouts in CSS can be a pain, especially for beginners. There is so much to think about and consider, especially when trying to maintain standards, accessibility and browser rendering. Then add all the various ways one can TRY and accomplish various layouts. It can be OVERWHELMING. While the code behind CSS is quite simple for anyone to understand, layouts in CSS challenge the best of developers. Here is a tool I have found to be indispensible in helping me with layouts. Cleva Treva’s CSS Source Ordered Variable Border 1-3 Columned Page Maker is a tool that will produce a 1 to 3 column fixed width layout.

It is fairly simple to use. The Generator screen has a variety of configurations the user can set:

I will not go into them in detail. Most of them are self explanatory. It is easy enough to play around with the tool to figure out what each setting accomplishes. Not all settings are fully activated, which is my only complaint. They really should set up a donate button to help him have the funds to finish it off.

The tool can create your standard three column layout; a column on each side with a content column in the center,

two column layouts with either a right or left sidebar,

or one can even create the sidebar so it intrudes into the header and footer.

The tool will also create the code for the necessary hacks to make sure the layout works in all the major browsers. Now, I do not think, as of this writing, it has been updated to ensure IE7 compatibility.

Once a layout is generated, the code can be copied and pasted from the textarea on the display page into your favorite html editor. Do not save the generated layout page itself as it contains extraneous code.

Rememeber, this tool creates a fixed width layout. The main content column can be up to 760px and each column can be up to 200px. The maximum width would be 1160px.

The layout is also ordered so that the content appears first in the code above the sidebars.

I do wish the tool would be able to create a three column layout with the two sidebar columns adjacent either postioned to the left or right.

Overall, it is a very useful tool. Beginners will find it extremely helpful.

[tags]css, cascading style sheets, html, layout[/tags]

Using Cascading Style Sheets

CSS files can be implemented in one of three ways: Inline, Internal and External.

Inline

Inline styles are used within the <body> tags of a web page. They can be added to any tag within the body. Example:

<p style=”color:blue”>This is a sentence.</p>

This method mixes content elements with presentation elements. It is not recommended for this defeats the purpose of cascading style sheets. In some DOCTYPEs inline styles will register as invalid. The effective use of classes and ids within an external style sheet is a remedy for inline styles.

Internal

Internal style sheets are used within the head section of a document. Internal style sheets are defined by <style> tags:

<head>
<style type=”text/css”>
body {font: arial;}
</style>
</head>

When the web page is read, the browser will apply any styles within this tag.

This method is not typically recommended, but you won’t break any DOCTYPE standards with its use. If possible put all styles in an external style sheet.

Note: if you use a CMS that uses plugins, be aware that some plugins may add their own styles to your web documents. I don’t like this practice and feel you should be aware of it.

External

External style sheets are the recommended and preferred method for using cascading style sheets. External CSS files are referenced within the <head> section of a web page by using ht <link> tag:

<head>
<link rel=”stylesheet” type=”text/css” href=”css/style.css”
</head>

Browsers reading the webpage will access the file and format the page accordingly.

Visit the archives for more information on CSS archives or visit our CSS Tutorials page.

Creating Cascading Style Sheets

How does one actually create a cascading style sheet?

A CSS file is nothing more than a special kind fo text file.

1. Open Notepad
2. Type
   

   body{
   margin : 0;
   padding : 0;
   font: small Verdana, Geneva, Arial, Helvetica, sans-serif;
   background-color : #ffffff;
   color : #000000;
   }

3. Click File…Save As
4. Change “Save as Type” box to “all files”
5. Type “test.css” in the “File name” box
6. Choose a location to save the file
7. Click Save
8. You have now created your first CSS file!

The actual name of the file is unimportant. Though most typically call it “style” or “screen” or “print”. The thing that made this simple text file a CSS file is the extension. By giving it an extension of “.css”, html editors, web pages and text editors will recognize this file as a cascading style sheet.

For more examples on CSS files, visit our recommended CSS tutorials page.

CSS and HTML Tutorials for Kids

If you have a child that is interested in web development, there are very few websites geared towards children.

As I was thinking about this, I figured the earliest a child would be capable of doing the basics would be 5th grade with 6th grade being the point where a child could begin to pull all the necessary skills together. (I could be wrong on this, anyone have any kids who are doing web development? When did they start?)

With that age in mind, I figure they could handle most of the tutorial websites I recommend on my CSS Tutorials and HTML Tutorials.

However below are a few links to sites geared towards kids. The lack of quality stuff for kids makes me think that this is a potential market .

WebMonkey for Kids

Lissa Explains

Cyber Camps – Computer Summer Programs for Kids. This site will point you to computer summer camps in your state.

[tags]css, html, kids, children, webdesign[/tags]

CSS Optimization: Compressed file helps speed site load time

Cascading Style Sheet optimization can be a confusing topic.

On the one hand it can mean creating CSS files with the least amount of code. On the other, it can mean compressing a style sheet so it loads faster and hence make your website load faster. In reality, the two do go hand in hand though the former is far trickier than the latter.

CSS Tweak offers tool that attempts to do both.

CSS Tweak is very easy to use. Upload a style sheet and click Tweak! However, you should be familiar with the seven options available before you hit that Tweak button.

• Tweak Fonts – merge font related properties into one “font” property
• Tweak Backgrounds – merge background related properties into one “background” property
• Tweak Borders – merge border related properties into one “border” property
• Tweak Lists – merge link styling properties into one “link-style” property
• Remove Comments – strips out all comments
• Remove zero units – will clean up zero unit values
• Formatting – strips white space. This compresses your cascading style sheet.

My general recommendation is to leave the code optimization selections alone until you understand CSS better. It could make adverse changes to your CSS code. Unless you understand CSS well, you may not be able to figure out what changes the tweaker made that are now causing problems. Beginners should only check the “Remove Comments” and “Remove White Space” radio boxes. For the beginner, the options will then look like this:

Clicking Tweak will then create a new style sheet file that can be downloaded:

I always rename my main editable style sheet to “non_compressed_style”. I use this style sheet to make changes. I then compress it and send it up to my website as the main “style.css” file. My compressed style sheet is what my website then accesses. The compressed style sheet is next to impossible to edit. It will look this:

Maintaining two style sheets may seem like a lot of work. Don’t compress it until you are done with the design. That way you won’t have to go back and forth between compressed and noncompressed. Compressing the style sheet is worth it. It can significantly save on download times.

Why you should validate your Cascading Style Sheets

Validating CSS files ensures conformance to W3C recommendations.

So what?

Heres the deal with code even simple CSS code: cleaner means leaner and more efficient. Validation ensures the css file can be understood by the modern browsers. Being understood by the modern browser means the presentation of your website can be effectively communicated to you audience.

Validation does not mean you’ve chosen the best presentation or the coolest presentation. It doesn’t even mean that your code will present the presentation you intended! It simply means there are no obvious SYNTAX errors in your code. Validation is about the syntax. Nothing else.

However, simple syntax errors can have a serious effect on your website.

The CSS Validator checks for things like:

• Every selector bracket that is opened is subsequently closed
• Every property has a colon
• Every property ends in a semi-colon
• Spell checks standard property names and values

I had a problem once where I couldn’t figure out why a border was missing. It wasn’t until I ran it through the validator that I saw I had misspelled border as bordor. My eyes simply didn’t catch it.

In short, there are four main reasons to validate your CSS file.

Good practice
Heck, it is BEST practice
Catch Errors
Professional

[tags]css, w3c, validation, validator, webdesign, [/tags]

Site Redesign: Ten keys to keep from going insane

I was in the middle of writing the series on CSS when the bug to redesign this website hit me. This will be the 5th redesign since I began the site. I really shouldn’t count the first three since I was just learning. The redesign process has taught me some valuable lessons each and every time. Below are ten keys to maintain your own sanity when the itch to redesign strikes you:

1. Make sure you want to redesign your site. Though a part of you wants to, does ALL of you want to? The worst thing that can happen is get halfway through and quit. Time wasted.
2. Weigh the time away from content development. If your a small fry website, you are the designer, marketer, writer all rolled into one. Realize that the time it takes to redesign the site will take away from your other efforts. Is it worth the time away from creating content?
3. Shoot for web standards but don’t live and die by them. I prefer designing in XHTML 1.0 Strict and CSS. With this design I went with a liquid layout versus a fixed width layout. I had to compromise with the liquid layout. It doesnt totally work at the 800×600 resolution. I’m afraid my 800×600 visitors won’t be pleased. However, they only made up 7% of my visitors the last month. This number has dropped from about 25% 18 months ago. I imagine this number will get near 0% by the end of 2007. If i lived by the standards I would have tried harder to make it work or create a separate a style sheet. I guess I am willing to let that point go and not waste time with it.
4. Be Patient. There is nothing worse than rushing through css code and messing things up. If you feel yourself rushing just stop. You are bound to make a mistake. Step away and come back to it later.
5. Reuse basic elements from the previous design. Don’t reinvent the wheel. While the colors may change (or not) keep the code for those elements which work.
6. Keep it simple. If you’re a designer by trade, have at it. But beginners should avoid getting too fancy.
7. Shoot for readability. One of the goals of my redesign was to make it more readable. I hope the font and the spacing makes it easier to read. I hate websites that give me a headache.
8. Shoot for usability. After your site has been around a while, you should have a good idea of things that work and things that don’t. Make your site easier to use. If you go the fancy route and make it too complicated, you will lose visitors.
9. Study other sites. Before you begin, study other sites. My own redesign combines elements I learned from looking at other sites. Don’t copy entire designs, but gather ideas and don’t be afraid to mix and match.
10. Get feedback. So dear reader, what do you think? Is this site easier to read? Is it easier to use? Let me know. I’ld appreciate it.

Cascading Style Sheets Example

There are three parts to a CSS statement

1. selector
2. property
3. value

Each statement is written like the following:

selector {property: value}

There are three kinds of selectors:

1. elements
2. classes
3. ids

Elements refer to basic HTML tags: a, img, p, body, div, etc.

Classes are defined selectors. A class is defined by a . (period) and a name:

• .right
• .left
• p.readmore

Classes are used to further define already existing elements.

ID are defined selectors as well. Typically they are used to define DIVs. An ID should be used when the element is going to appear or be used only once.

• .right
• .left
• p.readmore

The screenshot below shows a small example from a cascading style sheet. Each part is labled accordingly.

If you want to examine a full length css document, I would suggest the following:

• Go to Open Source Web Design
• Click Search Designs
• Select XHTML 1.0 Srtict under validation
• Select Yes under CSS
• Click Search
• A list of designs will show on the screen. You can view each design and download it.
• Download a few designs. It doesn’t matter what it looks like if all you’re after is understanding what a style sheet looks like.
• The downloaded designs will contain a .css file.
• Open the file in a text editor and learn away!
• Other designs can be found at Open Web Design following similar steps as above.

[tags]css, cascading+style+sheets, webdesign, development[/tags]

What are cascading style sheets

Imagine a landscape gardener.

At her disposal are plants, seeds, bushes, trees, timbers, bricks, patio blocks, etc.

All these materials are her CONTENT.

Her job is to take those materials and landscape the yard/garden. In other words, to create presentation. Without her presentation skills, the materials remain in one large unroganized heap.

Style sheets are like the landscaper. Style sheets take content (text, images, and links of a website) and arranges them on a web page.

In the coding world, this seperates the code for presentation from the structural and content code.

If you “view source” on any web page from your browser, you can look at the HTML code behind it. The actual HTML tags provide the basic structure. The text, images, and links within those HTML tags are the content. Typically, the CSS file sits externally from this code. Its job is to take the structure provided by the HTML and position it so it makes sense.

To use another analogy:

-HTML is the bones
-Text, Images and links are the organs
-CSS is the muscles, ligaments, cartilage, skin that brings the bones and organs together. Without CSS, the HTML and Content are just a pile of bones and guts.

For more CSS resources visit our CSS Tutorials page or visit our CSS blog archives.

[tags]css, cascading+style+sheets, web, design, development[/tags]

CSS Notebook

One the trickiest topics for beginners to manuever is developing cascading style sheets. While it is easy to color a link or change a font type, the biggest challenge is creating CSS layouts. The posts coming up the next few weeks will point you to resources to help you accomplish that task. Some of these resources I have already pointed out on my CSS Tutorials page. Stay tuned and again, thanks for reading!

Visibone HTML CSS and Color Reference Guides

It is difficult to find an easy to use reference for HTML and CSS that is also easy to slip into a laptop bag. No one wants to carry around a 30 pound HTML reference book. The solution: Visibone Card Collection or Browser Book.

Each set contains the following:

• basic color palette card – covers the colors in the original browser safe palette
• web fonts – covers basic fonts supported by the major browsers
• characters – a list of all the html codes for special characters
• XHTML Tags – list and brief explanation of attributes for each xhtml tag
• CSS selectors – cascasding style sheet reference sheet
• Javascript – reference guide to basic functions within the javascript language
• DOM- document object model reference for javascript
• Regular Expressions – basic guide to regular expression (with this reference I may actually take the time to learn it!)

What is the fundamental difference between the two sets?

The Card collection is smaller at only 10 pages and the print is denser. The Browser Book is 16 pages and has a larger font. In terms of content the only idfference is the inclusion in the card collection of a annotated HTML / CSS example page.

I would highly recommended purchasing laminated versions as this will make it last longer and help it survive life in a messenger bag or briefcase.

I have know about Visibone for years. It wasn’t until recently that I made a purchase. (I purchased the card collection.) I had always been unsure whether I would use it. Well, the first day I carried it with me I referenced it at least three times that afternoon. For beginners, it can serve as a learning tool. Sorta like big flash cards. It may even be a good idea to purchase one before heading into a web design class. It would make an excellent reference tool as you learned.

A short note on customer service:

Bob Stein, the owner, will personally respond to any emails regarding any problems you may encounter. I had a problem with my order and he was very responsive. He corrected the issue quickly and provided some of the best email customer service I’ve seen so far in the life of running this website.

Click for more on HTML Colors or HTML Tutorials.

[tags]css, html, visibone, reference, guide, color[/tags]

CSS Tutorial Review

Killersites has a sister site called CSS Tutorial. The site is geared towards giving beginners the opportunity to learn about CSS.

CSS Tutorial offers an introduction to CSS in 6 basic lessons.

1. Intro – what does CSS exactly do?
2. Basic Web Page Template
3. HTML and CSS
4. DIV Tags
5. CSS and Images
6. Inserting CSS into web pages

For more on CSS see my previous posts on CSS.

CSS Template Library

If you are just starting out developing websites in CSS, surf on over to Greys Wolf’s CSS Template Library.

He has created a series of CSS templates demonstrating a variety of columns (2 or 3) and screen positions (left, center, right).
If you are seeking to understand how CSS works this is a good place to start. Clicking on each template displays how it will look. View Source to see the actual CSS code.

I cannot vouch whether these templates are coded in such a way as they will not break. However, it is a useful resource to 1) learn about CSS and 2) get a basic template to experiment with your own layout.

New CSS Layout at PIE

Position Is Everything is a CSS tutorial site that I highly recommended. They work hard to provide solid CSS layouts that work in all modern browsers. They just posted an article called the “Jello Mold PIEfecta“. It is the design for a CSS layout that works with minimal buggage. Check it out and happy CSSing!