CSS Tips and Tricks

HTML5 - Who is using it? Why prepare now?

2010-07-13T07:59:00.000-07:00

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

2010-05-21T10:37:00.000-07:00

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

2010-05-21T09:00:00.000-07:00

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

2008-12-16T10:50:00.000-08:00

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

2008-10-09T06:19:00.000-07:00

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.

30+ Firefox Add-ons for Web Developers & Designers

2008-05-29T08:44:00.000-07:00

Someone sent me a link to this and it has some really good firefox addins for css and other web developer tasks I thought I would pass it on.

http://mashable.com/2007/08/27/30-firefox-add-ons-for-web-developers-designers/

Perpetual Beginner

2008-05-02T10:11:00.001-07:00

For those just learning some of the newer technologies such as subsonic, linq, mvc, etc this is going to be fast becoming the place to go. It is definitely a blog to keep an eye on. The perpetual beginner, Jesse Naiman, will soon be a name you will remember.

Here is the link to his blog: http://alt-net-guild.blogspot.com/

Change Highlight Color Of Select Box

2007-03-26T08:49:00.000-07:00

This should do the trick:

option:hover{ background:#C6C4BD; }

If you have any CSS Tips, Tricks etc that you would like me to post to this blog let me know
at chrisw_88@hotmail.com