Alain's CSS-WEB Tips and Resources

14 CSS Tools to Save you Time

2008-04-08T11:00:00.001-07:00

14 CSS Tools to Save you Time | WebTecker the latest Web Tech, Resources and News.

Optimizer/Formatter

CSSTidy - CSS Tidy is an open source CSS parser and optimiser.
CleanCSS - CleanCSS is a powerful CSS optimizer and formatter. Based on CSSTidy
CSS Optimizer - CSS Optimizer reduces the file size of cascading style sheets.
CSS Analyzer - CSS Analyzer allows you to check the validity of your CSS against the W3C’s validation service

Font

Em Calculator - EM Calculator calculats pixel font sizes to ems.
CSS Font and Text Style Wizard - This wizard is good to experiment with font and text styles and generate sample CSS style source code.

Forms

CSS Form Code Maker - Generates ‘Colorful Box Layout’ For Forms
JotForm - JotForm is a web based WYSIWYG form builder

Navigation/Buttons

CSS Buttons - Css Button and Text field Generator.
CSS Menu Generator
- CSS Menu Generator will generate both the CSS and the HTML code
required to produce a text-based yet appealing set of navigation
buttons.

Generator

CSS Creator
- Css Creator is a layout generator that will create a fluid or fixed
width floated column layout, with up to 3 columns and with header and
footer.
QrONE CSS Designer - QrONE is an online CSS generator and editor.
Web 2.0 Generator - Web 2.0 Generator creates a full website layout with HTML and CSS.
CSS Mate - CSS Mate is an online CSS editor.

The finest art of web design

2008-04-07T12:37:00.001-07:00

CSS News: tutorials, resources, articles

CSS MENU GENERATOR

2008-03-24T09:58:00.001-07:00

CSS Menu Generator

Create a Lightbox effect only with CSS - no javascript needed

2008-03-23T13:24:00.001-07:00

Create a Lightbox effect only with CSS - no javascript needed : Emanuele Feronato - italian geek and PROgrammer

DOM Popup Demo

2008-03-23T13:23:00.001-07:00

Popup Demo

Thickbox

2008-03-23T13:22:00.001-07:00

ThickBox 3.1

Curvy Corners

2008-03-21T11:13:00.001-07:00

curvyCorners - [Downloads].

IN site window

2008-03-12T11:13:00.001-07:00

Prototype Window Class : Introduction

Overview

This javascript class allows you to add window in a HTML page.

This class is based on Prototype. The code is inspired by the powerful script.aculo.us library. You can even use all script.aculo.us effects to show and hide windows if you include effects.js file , but it's not mandatory.

It has been tested on Safari, Camino, Firefox and IE6, Opera looks fine.

jQuery.LocalScroll

2008-03-12T09:03:00.001-07:00

jQuery.LocalScroll

Smooth Javascript Image Zooming For Your Web Pages

2008-03-12T09:01:00.001-07:00

cabel.name: FancyZoom 1.1

Smooth Javascript Image Zooming For Your Web Pages

MooMonth Calendar

2008-03-12T08:54:00.001-07:00

MooMonth - Download

Free Templates

2008-03-10T11:13:00.001-07:00

Download Free Templates and try your skills before purchasing our templates

Minimize Your Javascript and CSS Files for Faster Page

2008-03-03T14:57:00.001-08:00

How To Minimize Your Javascript and CSS Files for Faster Page Loads by Max Kiesler

Portable Apps

2008-02-29T13:36:00.001-08:00

35 Portable Applications That Every Tech Needs | EmergingTechs.com

GlassBox

2008-02-29T09:51:00.001-08:00

Create Clear and Colorful Web Applications

GlassBox is a compact Javascript User Interface (UI) library, which use Prototype and Script.aculo.us for some effects.
With GlassBox you can build transparent border, colorful layouts and "Flash-like" effects. The GlassBox library is ..

easy to use
customizable and skinnable
comes with a coherent API and documentation
tested with IE 6, Firefox 2, Opera 9 and Safari 3
an open source project under MIT license

GlassBox

Ajax Tab Interface

2008-02-22T11:04:00.001-08:00

37+ Great Ajax, CSS Tab-Based Interfaces

CSS Techniques

2008-02-22T10:49:00.001-08:00

Powerful CSS-Techniques For Effective Coding | CSS | Smashing Magazine

PHPizabi is one of the most powerful social networking platforms on the planet

2008-02-19T09:01:00.003-08:00

PHPizabi - Create Worlds

Human Networking has a cutting edge, too!

PHPizabi is one of the most powerful social networking platforms on the planet. With literally thousands of websites powered by PHPizabi including everything from simple friends sites to the most complex networking super sites out there. Easy to install, use, and raising the bar on what it is to provide a reliable, fast, social networking package to raise your business to the next level.

PHPizabi is one of the most powerful social networking platforms on the planet

2008-02-19T09:01:00.001-08:00

PHPizabi - Create Worlds

Human Networking has a cutting edge, too!

PHPizabi is one of the most powerful social networking platforms on the planet. With literally thousands of websites powered by PHPizabi including everything from simple friends sites to the most complex networking super sites out there. Easy to install, use, and raising the bar on what it is to provide a reliable, fast, social networking package to raise your business to the next level.

Suite of web-based applications

2008-02-19T08:38:00.001-08:00

Aviary - Creation on the fly / tools

About Aviary

Aviary is a suite of web-based applications (RIAs) for people who create. From image editing to typography to music to 3D to video, we have a tool for artists of all genres.

Sign up to beta test our tools, read more about the tools on our product blog or get to know us on our idea blog.

MooSlide...the lightbox repalcement...or is it?

2008-02-19T08:22:00.001-08:00

mooSlide - ajax based slider - lightbox replacement

mooSlideBox 3

The mooSlideBox v3 is a small and slim ajax based extension or replacement of the common "lightbox" that can be found on nearly every page.
This lightbox clone works in IE 6/7, Opera and Firefox.

Download it here

Get your own copy of mooSlide.js - grab it here

Website Screenshot Generator Tool

2008-02-07T11:58:00.001-08:00

Super Screenshot!

Nice Round images

2008-02-07T08:18:00.001-08:00

RoundPic - rounded corners for avatars and images [web 2.0 style]

jQuery Cycle Plugin

2008-02-05T09:14:00.001-08:00

Overview

The jQuery Cycle Plugin is a lightweight slideshow plugin. Its implementation is based on the
InnerFade Plugin by Torsten Baldes,
the Slideshow
Plugin by Matt Oakes, and the jqShuffle
Plugin by Benjamin Sterling.
It supports pause-on-hover, auto-stop, auto-fit, before/after callbacks, click triggers and many transition effects.
It also supports, but does not require, the
Metadata
Plugin and the Easing Plugin.

JQuery Cycle Plugin

LightBox JS Web Gallery Generator

2008-02-05T08:47:00.001-08:00

Just show this program where your images are, press a button and in a few moments an HTML Web Gallery based on Lightbox JS will open in your browser. Considering that Lightbox Web Gallery Generator
has a tiny size and runs without installation, you can download it, run
it and have your first gallery ready in a matter of seconds.

This software is very simple but it also has some great
features for advanced users: the web galleries created by this program:

integrate with an existing web site See integration samples
include original hi-res images
give a complete control over CSS
w3c standards (html and CSS) compliant

Here's a program's screen shot (See Sample Web Gallery)

LightBox JS Web Gallery Generator

Navigation tabs with CSS and DOMscripting

2008-01-31T08:32:00.001-08:00

DOMtab is a JavaScript that turns a list of links connected to content
sections into a tab interface. The script removes any "back to top" links
in the section and automatically hides all but the first one when the
page is loaded. You can use as many tabbed menus on the page as you want
to.

New: If the URL of the page links directly to one of the tabs it get automatically
highlighted.

You can define with an extra class if you want previous and next links
or not.

DOMtab uses Unobtrusive JavaScript and does not have any global functions or variables. This page uses DOMtab.

To do: internal links highlighting tabs (too busy for that now)

DOMTab - Navigation tabs with CSS and DOMscripting

Online WYSIWYG for Flash

2008-01-30T10:22:00.001-08:00

Sprout Builder » How It Works

With Sprout, you can create sophisticated and dynamic interactive content with sprout in three steps, as follows:
build.png

Building a sprout is easy. Choose from dozens of pre-built templates or start from scratch. Drag-and-drop shapes, text, images, video, and more. Then add components such as slideshows, jukeboxes, and countdown clocks, as well as interactive services such as chat (Meebo), phone (Ribbit), fundraising (ChipIn), and more. Once you’ve got your content in place, use advanced editing and navigation tools to perfect your sprout.

publish.png

Publishing your sprout is easy, too! Just click “publish” and then cut and paste your sprout code into any Web page, or use the “quick post” feature to automatically place your sprout into blogs and social networking sites. For more advanced options, publish your sprout via any of our distribution partners, including Clearspring, Gigya, and Spring Widgets.

Manage

Once your sprout is published, your audience can copy and spread it to their Web pages and communities. You can then track usage stats such as how many copies were made, how many times your sprout was viewed, and more. You can also edit your Sprout, and ALL copies of your sprout will be instantly updated! Add or change content as needed to keep your audience engaged and informed.

Ultimate Web Developer's Field Guide

2008-01-30T07:14:00.001-08:00

Web Developer's Field Guide - Your Ultimate Resource

This site is a collection of web resources for web developers.

Free Education Courses

2008-01-29T10:27:00.001-08:00

Library of Online Education Articles and Advice | OEDb

Compress your CSS with these great free tools

2008-01-29T10:26:00.001-08:00

23 Resources for Clean and Compressed CSS

There are a number of free online tools that can help you to create and maintain effective CSS coding. These tools include validators, optimizers, compressors and more. Try out a few of these tools and see how they can help you to keep more efficient style sheets.

jQuery Favorites Part 2

2008-01-28T10:09:00.001-08:00

jQuery TextAreaResizer

This project allows the user to extend the textarea element/area within the web page whenever they feel.

jquery.combobox

jquery.combobox is an unobtrusive way of creating a HTML type combobox from a existing HTML Select element(s).

A combobox is technically a 'Select' HTML element. A combobox is also be known as a drop down list.

jRails

jRails is a drop-in jQuery replacement for Prototype/script.aculo.us
on Rails. Using jRails, you can get all of the same default Rails
helpers for javascript functionality using the lighter jQuery library.

jQuery.ScrollTo

This is animated scrolling with jQuery inspired me to make a small, customizable plugin for scrolling elements, or the window itself.

jquery.pngFix.js

This plugin will fix the missing PNG-Transparency in Windows Internet Explorer 5.5 & 6.

Interface elements for jQuery

Interface is a collection of rich interface components which utilizes the lightweight JavaScript library jQuery.
With this components you can build rich client web applications and
interfaces with the same simplicity as writing JavaScript with jQuery.

This plugin creates an accordion menu. It works with nested lists,
definition lists, or just nested divs. Options are available to specify
the structure, if necessary, the active element (to display at first)
and to customize animations. The navigation-option automatically
activates a part of the accordion based on the current location (URL)
of the page.

jQpanels

Plugin for easy implementation of sliding panels. Completely
customizable let you slide one or more element and load the panel
content via ajax. Recently introducted also an accordion behaviour.

jQuery Simple Tooltip

Jquery dock

Mac like effect

ThickBox 3.1

ThickBox is a webpage UI dialog widget written in JavaScript on top of the jQuery library. Its function is to show a single image, multiple images, inline content, iframed content, or content served through AJAX in a hybrid modal.

Jquery Wizard Plugin

A jquery plugin that will emulate a windows wizard

jQuery Favorites Part 1

2008-01-28T09:14:00.001-08:00

jQZoom

allows you to realize a small magnifier window close to the image or images on your web page easily. This jQuery plugin to embed detailed big images in my B2B.So now in few steps you can have your jQZoom in your website,eCommerce or whatever you want.

Shadowbox.js

Shadowbox is a cross-browser, cross-platform, cleanly-coded and fully-documented media viewer application written entirely in JavaScript. Using Shadowbox, website authors can display pictures and movies in all major browsers without navigating away from the linking page. The default distribution of Shadowbox includes the full source code and a sample gallery (this file) that demonstrates how it is to be used.

Facebox

Facebox is a jQuery-based, Facebook-style lightbox which can display images, divs, or entire remote pages.

It's simple to use and easy on the eyes. Download the tarball, view the examples, then start enjoying the curves.

jQuery Multimedia Portfolio

Non obstrusive and accessible portfolio supporting multiple media : photos, video (flv), audio (mp3).

This plugin for jQuery will automatically detect the extension of each media and apply the adapted player.

jQuery autoscale

Scale an element to browser window size - specifically created to autoscale images on browser resize.

jQuery color picker plug-in

Farbtastic is a jQuery plug-in
that can add one or more color picker widgets into a page through
JavaScript. Each widget is then linked to an existing element (e.g. a
text field) and will update the element's value when a color is
selected.

ColorBlend! Color fading plugin

Based on the fade anything plugin, I wanted something a little more robust.

This plugin accepts a javascript array of parameter objects.

Examples

Datagrids don't have to be difficult to use anymore - say hi to Ingrid.
Ingrid is an unobtrusive jQuery component that adds datagrid behaviors
(column resizing, paging, sorting, row and column styling, and more) to
your tables. It's easy to get started - read on below, or check out the
Example Pages.

The new Shadowbox.js is just so cool

2008-01-25T10:52:00.001-08:00

Shadowbox is a cross-browser, cross-platform,
cleanly-coded and fully-documented media viewer application written
entirely in JavaScript. Using Shadowbox, website authors can display
pictures and movies in all major browsers
without navigating away from the linking page. The default distribution
of Shadowbox includes the full source code and a sample gallery (this
file) that demonstrates how it is to be used.

Motivation

I know what you're thinking—this has been done before. What makes Shadowbox so different?

Click and fing out
LINK

Free desktop demia player

2008-01-23T11:03:00.001-08:00

Songbirdnest.com | Songbird Media Player

Play music. Play the Web.
Powered by Mozilla

Songbird is a desktop media player mashed-up with the Web. Songbird is committed to playing the music you want, from the sites you want, on the devices you want, challenging the conventions of discovery, purchase, consumption and organization of music on the Internet.

Songbird is a player and a platform. Like Firefox, Songbird is an open source, Open Web project built on the Mozilla platform. Songbird provides a public playground for Web media mash-ups by providing developers with both desktop and Web APIs, developer resources and fostering Open Web media standards, to wit, an Open Media Web.

Free office suite

2008-01-23T11:02:00.001-08:00

OpenOffice.org: Home

OpenOffice.org is a multiplatform and multilingual office suite and an open-source project. Compatible with all other major office suites, the product is free to download, use, and distribute.

Quick easy online image editor.

2008-01-23T10:54:00.001-08:00

Picture2Life is a powerful, but simple and easy-to-use online image
editor which also allows you to create collages and animated gif's (or animations).
It works great with your pictures that you already have online!

Welcome to Picture2Life - Edit, Collage, Animate and Share Pictures Online

Online image editing like photoshop.

2008-01-23T10:50:00.001-08:00

Desktop image-editing power in a web browser, going where you go.

Splashup, formerly Fauxto, is a powerful editing tool and photo
manager. With all the features professionals use and novices want, it's
easy to use, works in real-time and allows you to edit many images at
once. Splashup runs in all browsers, integrates seamlessly with top
photosharing sites, and even has its own file format so you can save
your work in progress.

Photo sharing services all work the same in Splashup, including
Splashup itself. Edit your images easily, from anywhere.

And more... Features that amount to more than novelty. Layers, layer
effects, filters and brushes all right here.

Splashup

MooMonth

2008-01-21T10:18:00.001-08:00

MooMonth - Download

MooMonth is a full calendar application written in javascript. Heavily configurable and customizable. It features smooth transitions between different views. Still in alpha stages, it will be several weeks before ready to be tested in production.

Sexy sliding JavaScript side bar menu using mootools

2008-01-21T10:15:00.001-08:00

A nice looking side bar menu.

Sexy sliding JavaScript side bar menu using mootools at Andrew Sellick

HIghslide Web 2.0 for pop up windows

2008-01-21T10:09:00.001-08:00

Highslide JS - JavaScript thumbnail viewer

Highslide JS is an open source JavaScript software, offering a Web 2.0 approach to popup windows. It streamlines the use of thumbnail images and HTML popups on web pages. The library offers these features and advantages:

* No plugins like Flash or Java required.
* Popup blockers are no problem. The content expands within the active browser window.
* Single click. After opening the image or HTML popup, the user can scroll further down or leave the page without closing it.
* Compatibility and safe fallback. If the user has disabled JavaScript or is using an old browser, the browser redirects directly to the image itself or to a fallback HTML page.

Free Web 2.0 Invoice Application

2008-01-21T10:00:00.001-08:00

The Invoice Machine is a free web 2.0 application that let’s you create free and beautiful
PDF invoices in a snap. Click on “Start The Invoice Machine” to begin
creating your custom invoice. Do not need to worry about the security
and privacy issue, because they claimed that they do not store any
information of your created invoices.

Simply fill in the forms, your nice-looking invoice will be ready in
a minute. Download the PDF invoices and send it over to your client so
you get your money in a professional way.

The Invoice Machine | Create Invoices Easily And Free

A Photo 3D Gallery using javascript and css

2008-01-21T09:56:00.001-08:00

Gerard Ferrandez has created a 3D photo gallery.
The interactive gallery is written in Javascript which is very user
friendly. The photos will move according to your mouse movement. You
can click on any pictures to zoom in and out. Now we have one more
choice for embedding a photo gallery in your projects.

autumn II - Interactive DHTML art-demos

Free 3-D Box Maker

2008-01-21T09:47:00.001-08:00

3D-box maker

3d package is a 3d-box graphic generator. 3d package lets you instantly create 3d-box images online, free! Just upload pictures for cover and sides and then get 3d-box in you favorite image format (JPG, GIF, PNG supported)

Create your own logos from free blank logo templates designs

2008-01-21T09:42:00.001-08:00

Quick easy way to create your company logo.

LogoTemplater.com - We create free blank logos templates designs and free vector art images. Creating logo templates in Adobe Illustrator EPS files for free.

Generate Your Favicon

2008-01-21T09:35:00.001-08:00

This is a great site to create your custom favicon for your website.

Genfavicon. Free Online Favicon Generator. Icon Generator.

Proffesional Open Source Shopping Cart

2008-01-21T09:03:00.001-08:00

PrestaShop™

is professional-grade e-Commerce shopping cart software that you can download, install, and use for free!

PrestaShop e-Commerce Solution - Free Open-Source shopping cart software for Web 2.0

Lightview yet another lightbox clone

2008-01-21T09:02:00.001-08:00

Lightview was built to change the way you overlay images on a website.

Lightview

197 CSS websites

2008-01-21T08:59:00.001-08:00

A huge list of CSS resources

197 manually selected sites about Style Sheets

CSS Grid Calculator-quickly visualize page layout and draw grids in a variety of ways

2008-01-21T08:52:00.001-08:00

Use the CSS Grid Calculator to quickly visualize page layout and draw grids in a variety of ways. It provides accurate visual feedback on how text blocks and page divisions will appear within a browser window, and returns style declarations for divisions and text to copy and paste into style sheets. The Flash player plugin version 7 is required.
Grids are drawn to page edges and margins when they are set, or to the dimensions of the default page, 1280 pixels wide by 1024 pixels high. The unit of measurement for text is the pixel.
Four panels contain controls for columns, text, rows and divisions. Page dimensions and margins are set under the columns tab. Columns are set by number or by width, when the text line-height option is enabled. Gutter width is in pixels.
Text fields are added under the Text tab. A text field remains active and may be modified until a new text field is added. The default font is Arial. Type in the correct font name to use another font on your system. Placeholder text or your own copy may be inserted into text fields. Negative leading values are not supported. The check box at the panel bottom to enables the line-height option for column width and row height using the active text field.

css_grid_calc

Lightbox that supports images, flash, video, mp3s, html.

2008-01-21T08:26:00.001-08:00

Now with multi file support.

phatfusion : multibox

Gradient Text Effectg Using CSS

2008-01-21T08:06:00.001-08:00

Tired of Web 2.0, Here is a simple CSS trick to show you how to create gradient text effect with a PNG image (pure CSS, no Javascript or Flash).

CSS Gradient Text Effect

Steps to Reduce Firefox RAM Usage

2008-01-17T08:22:00.001-08:00

How to reduce the memory usage on Firefox?

This article gives you simple steps to optimize your PC memory usage

Most
of the time, Firefox doesn't use abnormal amount of system memory,
however it does sometimes due to other sources, like number of
plug-ins, themes and extensions. It is also highly recommended that you
have the latest version of Firefox as the memory usage is minimized. If
you want to download the latest copy of Firefox, click here.

Follow these steps to check what is causing the abnormal memory usage:

Zolved - How to reduce the memory usage on Firefox?

COLOURlovers is a Great Tools for Designers and Artists

2008-01-17T08:12:00.001-08:00

COLOURlovers™ is a resource that monitors and
influences color trends. COLOURlovers gives the people who use color -
whether for ad campaigns, product design, or even in architectural
specification - a place to check out a world of color, compare color
palettes, submit news and comments, and read color related articles and
interviews.

The COLOURlovers™ community is regularly updated with
information and examples of the way colors are used in the real world
-- along with news articles on color trends and interviews with top
creative professionals. Here everyone who is interested in the
practical applications of color can find an index of color trends as
they are happening. Together, they create a color trend index for the
entire world provided by users of color worldwide. It's a tool
designers and artists of all kinds use to work with colors in new ways
and quickly find out what's hot and what's not. This site allows anyone
to find their inspiration for color by searching, sorting and filtering
through keywords to a color scheme that interests them... or create and
share your own!

COLOURlovers :: Color Trends + Palettes

Dave Woods Explains IE6 Bugs and Fixes

2008-01-17T08:06:00.001-08:00

Code using web standards

The first step is to ensure you have valid code. Create your website
using semantic markup which validates and works in the modern browsers.
Make sure you have a full, valid doctype
and you should be able to create any design which works in Opera,
Safari, Firefox and even IE7 with minimum problems and without using
any hacks.

Once you’ve ensured that the foundations are in place, you can
tackle any issue that IE6 has. Personally, I fix any issues as I
encounter them as it’s easier to see which bug I’m dealing with and is
easier to put a fix in as soon as it’s uncovered so I would suggest the
same approach, especially for any beginner.

Below, is a list of the bugs that I find crop up most often and are
the ones I not only find in my work but also are the causes of most
problems for users posting on message boards and forums.

Double Margin Bug

The double margin bug in IE6 occurs when a floated element has a margin on the same side as the float.

For example, both of these examples will cause the margin to be doubled in IE6.

#navigation { float: left; width: 200px; margin-left: 10px; } #content { float: right; width: 500px; margin-right: 10px; }

This will render as specified in IE7, Firefox, Opera and Safari but
a bug in IE6 will cause the margin’s to render at double the size
specified.

It can be particular problematic when dealing with pixel perfect
layouts. For example, in the code above the two columns would sit
nicely side by side in a 720px container for the modern browsers.
However, in IE6 because the margin’s would be doubled, the content
column would actually drop now that not enough space is available.

Double Margin Bug Fix

The fix for this is remarkably simple and doesn’t really make much sense, other than the fact that it works.

By applying display: inline; to the end of each style, it remarkably
fixes the problem and causes no other side effects in any other browser.

#navigation { float: left; width: 200px; margin-left: 10px; display: inline; } #content { float: right; width: 500px; margin-right: 10px; display: inline; }

I tend to find that this little bug causes the majority of layout issues but it’s amazingly simple to fix.

HasLayout

A definition of hasLayout can be found at satzansatz.de and explains it better than I ever could.

Layout is an IE/Win proprietary concept that determines
how elements draw and bound their content, interact with and relate to
other elements, and react on and transmit application/user events.

This quality can be irreversibly triggered by some CSS properties. Some HTML elements have “layout” by default.

Microsoft developers decided that elements should be able to acquire
a “property” (in an object-oriented programming sense) they referred to
as hasLayout, which is set to true when this rendering concept takes
effect.

This can cause some strange effects with some elements and the
particular problem that I usually encounter is when dealing with float
clearing but it can also cause problems with boxes treating properties
incorrectly as well as various margin issues.

I’ll focus on the main issue that I experience with hasLayout but
it’s worth considering that a problem you’re experiencing may be due to
this also.

HasLayout Example

I’d use the following CSS for a very simple container that holds navigation and content columns.

#container { background-color: #CCC; overflow: hidden; } #navigation { float: left; width: 200px; margin-left: 10px; display: inline; } #content { float: right; width: 500px; margin-right: 10px; display: inline; }

Using overflow: hidden; on the container clears the float’s in the
modern browsers and also applies “Layout” to IE7. However, overflow
doesn’t apply “Layout” for IE6 so we need to use another value.

Using a position, float, width, height or zoom will apply layout but
some can create undesired effects in modern browsers so what’s the
easiest and best fix?

HasLayout Fix

I tend to find that the best method is to apply a width or height.
Quite often, you won’t actually want to apply a width or height so the
best way of applying this is to use the star hack to apply a small
height to IE6 and below only.

This has the advantage that IE6 treats any height as a min-height and will therefore resize itself accordingly anyway.

Therefore, if you add a 1% height, this will correct the HasLayout issue.

#container { background-color: #CCC; overflow: hidden; } * html #container { height: 1%; } #navigation { float: left; width: 200px; margin-left: 10px; display: inline; } #content { float: right; width: 500px; margin-right: 10px; display: inline; }

Using this method will fix most HasLayout issues so is something
worth considering if you’re unsure as to why IE6 is displaying the way
it is.

Small Height Bug

I’m not sure what the real name is for this bug but I used to
encounter it quite frequently within my designs and it occurs when a
small height is specified but IE6 seems to completely ignore the height.

For example, the following will render correctly in all the modern
browsers but for some reason, IE6 treats the height differently and
refuses to collapse down to the 2px height specified.

#corner { width: 10px; height: 2px; background-color: #C00; }

Small Height Bug Fix

The problem seems to be caused by IE6’s unwillingness to collapse to
a smaller height than the base font-size. It therefore will always by
default render at a size that allows text to fit into the height
available and it’s this that is stopping the height from collapsing.

So to fix this, all we need to do is set a font-size: 0; within the rule.

#corner { width: 10px; height: 2px; background-color: #C00; font-size: 0; }

I’ve recently also discovered another solution which should have
exactly the same effect. Because the box is stretching to allow for
content overflow, we can also specify overflow: hidden; which will
cause the box to honor the 2px height and also collapse.

#corner { width: 10px; height: 2px; background-color: #C00; overflow: hidden; }

Both of these solutions will fix the issue even as far back as IE5.01 and won’t cause any problems in the modern browsers.

Summary

By no means is this an extensive list of IE6’s browser bugs but in
my experience, these are the most common that account for 99% of all
browser rendering issues so if you can get a good understanding of
these issues and remember their fixes, hopefully your development time
should start to drop for the troublesome browser.

Please feel free to comment though if you have any experiences of
other bugs or have a browser bug that you’re unsure how to identify.

Dave Woods - HTML, CSS, Web Design » IE6 - CSS Bugs and Fixes Explained

Proper Meta Tag Method and Generator

2008-01-16T13:00:00.000-08:00

These are the proper meta tags methods for good search engine communication.
I found this great generator here.

Character Set

A character set meta tag is required so that your page validates. It also allows the browser to detect the character encoding used in a document. If this fails your visitions will see nothing thats readable.

This LINK will take you to the tutorialon the w3 website. For english websites it is common that we use the iso-8859-1 character set.

Website Language Tag

I strongly suggest the leanguage tag spelling and grammar tools that are developing in the open source community. To learn more, the W3C's page.

Webpage or Document Title Tag

The title is displayed at the top of the internet browser window and on search engine results. This tag is a very important part of your online marketing plan for search engine placement. It's also your first impression with a visitor. You want to entice them to click and not drive them away with useless info.

Keep it short and descriptive. Use common sense as if you where looking for something online yourself. I would say less that 60 characters is fine. Less is more but not enough is worse.

Meta Description

This section describes your website in more detail on the search engine's results. Try to keep it under 250 characters and only provide key information for thispage.

Meta Keywords Tag

The meta tag is no longer used by the search engines due to spamming but I doesn't hurt to add them. Stay under 25 words. Dont repeat and make sure you stay true to the page.

Building Websites- DOCTYPES THAT WORK

2008-01-16T12:47:00.000-08:00

Here is a few DOCTYPE's that work just fine with today's standards.

HTML 4.01 Strict, Transitional, Frameset

"http://www.w3.org/TR/html4/strict.dtd">
 
 
"http://www.w3.org/TR/html4/loose.dtd">
 
 
"http://www.w3.org/TR/html4/frameset.dtd">

XHTML 1.0 Strict, Transitional, Frameset

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 
 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

XHTML 1.1 DTD

"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">