VT's Tech Blog » CSS

How to get Cross Browser Compatibility Every Time

vinu — Mon, 14 Jul 2008 06:08:43 +0000

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:

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

vinu — Fri, 16 May 2008 03:06:35 +0000

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

CSSVista

vinu — Tue, 26 Jun 2007 11:46:32 +0000

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

53 CSS-Techniques You Couldn’t Live Without

vinu — Wed, 07 Feb 2007 04:00:51 +0000

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

Hoverbox Image Gallery

vinu — Thu, 25 May 2006 08:56:22 +0000

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

Drag & Drop Sortable Lists

vinu — Sun, 26 Feb 2006 05:08:36 +0000

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]

CSS Star Rating

vinu — Sun, 26 Feb 2006 05:04:59 +0000

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

Quick Lookup

vinu — Sun, 26 Feb 2006 04:57:20 +0000

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]

Advanced CSS Layouts

vinu — Wed, 11 Jan 2006 03:03:51 +0000

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

Ten CSS tricks you may not know

vinu — Fri, 30 Dec 2005 04:20:54 +0000

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

Unobtrusive Degradable Ajax Style Sheet Switcher

vinu — Mon, 26 Dec 2005 14:57:37 +0000

Here’s a cool way to swap Stylesheets on the fly using UDASSS(Unobtrusive Degradable Ajax Style Sheet Switcher). Works great even if Javascript is disabled on the browser.

The Unobtrusive Degradable Ajax Style Sheet Switcher combines the power of Server Side processing and DOM scripting to swap style sheets on the fly with the power of Ajax. If JavaScript is disabled – UDASSS degrades gracefully to improve your website accessibility. Needless to say, it is very sexy indeed.
Link: UDASSS Official Documentation

Variables in your CSS via PHP

vinu — Sat, 17 Dec 2005 06:56:38 +0000

Randomize CSS styles using PHP. A good one to look at if you want to want to automatically change your site’s look and feel on the fly.
| Variables in your CSS via PHP
There are a number of ways to use PHP with other web languages and technologies. I myself use PHP in some of my JS scripts and sometimes even in CSS files.

Here’s another PHP script to automatically adjust the contrast of foreground colors so they can viewed on top of your background colors:
CSS Colors: Take Control Using PHP

stu nicholls | CSS PLaY | experiments with cascading style sheets

vinu — Fri, 16 Dec 2005 03:39:29 +0000

There are times while you’re surfing and you land on a page which make you say “WOW ! How did he do this????”. Well I found one like that today while surfing for CSS. Here’s one person who demonstrates that you can do almost anything with Cascading Style Sheets.

The amount of Demos he’s got on stuff you can do through CSS is Huge….. you’ve got to check this one out!
Link: stu nicholls | CSS PLaY | experiments with cascading style sheets