VT’s Tech Blog

Anthony Short’s got a great article which shares tips on how to get your CSS cross-browser compliant everytime.

Cross-browser compatibility is one of the most time consuming tasks for any web designer. We’ve seen many different articles over the net describing common problems and fixes. I’ve collated all the information I could find to create some coding conventions for ensuring that your site will work first time in every browser. There are some things you should consider for Safari and Firefox also, and IE isn’t always the culprit for your CSS woes.

He summarizes the article by saying:

1. Always use strict doctype and standards-compliant HTML/CSS
2. Always use a reset at the start of your css
3. Use -moz-opacity:0.99 on text elements to clean up rendering in Firefox, and text-shadow: #000 0 0 0 in Safari
4. Never resize images in the CSS or HTML
5. Check font rendering in every browser. Don’t use Lucida
6. Size text as a % in the body, and as em’s throughout
7. All layout divs that are floated should include display:inline and overflow:hidden
8. Containers should have overflow:auto and trigger hasLayout via a width or height
9. Don’t use any fancy CSS3 selectors
10. Don’t use transparent PNG’s unless you have loaded the alpha

Read the whole article: How to get Cross Browser Compatibility Every Time

Google Doctype is an open encyclopedia and reference library. Written by web developers, for web developers. It includes articles on web security, JavaScript DOM manipulation, CSS tips and tricks, and more. The reference section includes a growing library of test cases for checking cross-browser and cross-platform compatibility.

This site’s currently got some good HOWTOs on Web security, DOM manipulation, CSS and styles and more. A worthwhile place to check if you’re looking at some quick reference and help.

Link: Google Doctype

A very cool utility for CSS coders – CssVista allows you to preview your CSS styles on both IE and Firefox side by side.

CSSVista is a free Windows application for web developers which lets you edit your CSS code live in both Internet Explorer and Firefox simultaneously. If you like this, you may be interested in our browser compatibility service, SiteVista.

Link: CSSVista: Live CSS editing with Internet Explorer and Firefox simultaneously

Are you looking for a list of what you can do with CSS with links to tutorials which show you how to? You must go through the following article from Smashing Magazine.

Over the last few years web-developers have written many articles about CSS and developed many useful techniques, which can save you a lot of time – of course, if you are able to find them in time. Below you’ll find a list of techniques we , as web-architects, really couldn’t live without. They are essential and they indeed make our life easier. Let’s take a look at 53 CSS-based techniques you should always have ready to hand if you develop web-sites.

Link: 53 CSS-Techniques You Couldn’t Live Without | Smashing Magazine

A cool image gallery implemented purely in CSS. The images pop out when you hover over them. There is no Javascript used in this at all.
Link: Hoverbox Image Gallery

If you’d like to know how this is done, you can go through a mini-tutorial over here:

http://sonspring.com/journal/hoverbox-image-gallery 

Here’s another example of the same CSS method being used to create a menu system:

Link: Hoverbox Menu

Various implementations of Drag & Drop sortable lists using JS and CSS.

“In Web applications I’ve seen numerous — and personally implemented a few — ways to rearrange items in a list. All of those were indirect interactions typically involving something like up/down arrows next to each item. Then I came across Simon Cozens’ example of rearranging a list via drag & drop. I was so inspired I had to try it out myself.”

Link: Drag & Drop Sortable Lists with JavaScript and CSS

[tags]Javascript, CSS[/tags]

Here’s a good tutorial on now to create an interactive rating system using CSS. You can combine this with Ajax to create a rating system for your site.

Links to the Tutorial:
Creating a Star Rater using CSS
CSS Star Rating Part Deux

Another cool site which allows you to look up syntax in PHP, MySQL, Javascript and CSS.
Link: Quick Lookup

[tags]reference, lookup, syntax, PHP, MySQL, Javascript, CSS[/tags]

Here’s a good article on advanced layouts using CSS. In this article they aim to create a layout which looks like the following:

“Rogelio Lizaolo improves on Kwon Ekstrom’s CSS version of WebRef’s tabled home page. Months in the making, the final design successfully duplicates WebRef’s layout without the use of tables. Numerous bugs were discovered in Netscape and Explorer in how they handle CSS, and we found some elegant workarounds to these and other problems. What follows is a step by step CSS layout tutorial that shows how we got to the final design.”
Link: Advanced CSS Layouts: Step by Step – WebReference.com

Here’s an article by Trenton Moss with 10 excellent tips on CSS. The article covers topics such as CSS shorthand rule, CSS for printing, Image replacement techniques, CSS positioning and much more.

Link: Ten CSS tricks you may not know