New CSS Image Replacement Technique

Even though CSS is as old as the hills, people are still finding interesting ways to improve things.

I just came across this article in a SitePoint email that replaces the whole -9999 trick.

Check out the article on the new css image replacement technique

If you have any tips, tricks or resources you would like to share please email them to Susan Fischer at susan@clinchportal.com

Basic Cross Browser Layout Starting Points

When you think about it html has been around for a few decades and so has css so you would think someone would have come up with basic templates that support the common web page layouts and give you cross browser supported css.  Some may complain about browser versions being different.  Some may say you cannot possibly create them as browser versions keep changing.

Matthew Taylor is not one to make those excuses, he just does.  I was searching around and found this article that gives you some basic multi-column liquid layouts.  They will not do it all for you but they will start you off well.  Check out Matthew's article on the ultimate multi column liquid layouts you won't be disappointed.

If you have any tips, tricks or resources you would like to share please send them to Susan Fischer at susan@clinchportal.com and we will post them here.

HTML5 - Who is using it? Why prepare now?

Everybody is waiting for HTML 5 adoption. There are a lot of good features available in the draft but what browsers are supporting them. Is it worth developing for it now or wait for more support? These are some of the questions this article tries to address.

http://www.infoworld.com/d/applications/how-use-html5-your-website-today-220?source=IFWNLE_nlt_stradev_2010-07-13

For those interested in the feature set and who is supporting them. I came across this really good demo site. It lists each feature, a demo and who supports it. Please check it out at

http://html5demos.com/

How are you using HTML5? Are you using it now? When will you adopt it? Please post your comments here or email them to Susan Fischer at susan@clinchportal.com

Coding Clean and Semantic Templates

Here is a good starting point on writing clean css code:

http://www.webdesignerwall.com/tutorials/coding-clean-and-semantic-templates/

If you have any more articles or tips you would like me to add here please email Susan Fischer at susan@clinchportal.com and we will add them.

Horizontally center website structure

There appears to be many ways to horizontally center a page:

1) The "David Walsh" method. This places all the css in the wrapper div.

Here is the link to the full article: http://davidwalsh.name/horizontally-center-website-structure-css

2) The "simple bits" method. This method centers the body tag and uses the div to left align the content. Here is the link to the full article: http://simplebits.com/notebook/2004/09/08/centering/

I am more of a developer type so I am not sure which way is better but I always use method 2.

I look forward to your comments on which method is better and why.

On a side note, if you look at the David Walsh article, someone made a good comment on making height 100% on the html tag so you always get the scroll bar. Rory Tatum showed me this years ago. Its a good tip for those starting out with css.

html

{

height: 100%;

margin-bottom: 0.01em;

}

I highly recommend checking out some of the other blog articles on both blogs mentioned above. There are some great tips and tricks found there.

If you come across any articles, tips, tricks, or resources please email Susan Fischer at Susan@clinchportal.com and we will post them here.

Themes vs StyleSheetThemes

I was studying for my .net test and I came across StyleSheetThemes again. I always wondered what the difference was and when to use which. It was then I came across a good article on just that subject. Thanks Alan Le for your post on your blog on the issue:

http://blogs.vertigosoftware.com/alanl/archive/2006/09/11/Theme_vs_StyleSheetTheme.aspx

If you come across any tips, tricks, resources, or gotchas related to CSS that you feel would be of interest of the group. Please post them as comments to related articles or email them to Susan Fischer at susan@clinchportal.com and we will post them here.

The power of lime

I found this article on diagnostic styling and it really helped but a friend of mine took it one step further. Instead of red the best color for diagnostics is lime green. You are most likely not going to use it in your styles so it will really stand out on your page.

So follow the steps in this article but remember to replace the color specified with lime green.

http://24ways.org/2007/diagnostic-styling

If you have any css tips, tricks, resources email them to Susan Fischer at susan@clinchportal.com and we will post them.