Setup Hell:

Install cygwin to "c:\cygwin" - make sure to check boxes to install Perl, "Archive" (ZIP), and Devel/gcc:g++ (3.4.4.3 presumably) (is Perl necessary?)
Copy the alchemy directory to: c:\cygwin\home\Lee
Copy the flex sdk bin dir from c:\program files\etc to "c:\flex" (to avoid paths with spaces in it!)
Run the alchemy config script once:

   run cygwin
   cd alchemy
   ./config

Edit the textfile "C:\cygwin\home\Lee\alchemy\alchemy-setup" and uncomment and edit line 22 to: add "export ADL=c:\flex\adl.exe"

Edit .bashrc (in C:\cygwin\home\Lee)

   echo "LEE PROFILE"
   export FLEX_HOME=~/flex
   export ALCHEMY_HOME=~/alchemy
 
   # "This should be added before your PATH is modified" !!
   source /home/Lee/alchemy/alchemy-setup 
 
   PATH=$ALCHEMY_HOME/achacks:/home/Lee/flex:$PATH
   export PATH
 
   alc-on

Do this (just once, I think):

   cd $ALCHEMY_HOME/bin
   ln -s llvm-stub llvm-stub.exe

Compiling a SW:

CD to the directory with the source
Always do "alc-on" before compiling, cuz it doesn't work without it even though i added it to the startup (dunno)

    gcc stringecho.c -O3 -Wall -swc -o stringecho.swc 
    -- should give you a swc.

Import the swc into your flex builder 4 project and make sure compiler targets SDK v4

Shortcuts

alc-home - takes you to the Alchemy install folder.
alc-on - puts Alchemy gcc toolchain replacements at the front of your path.
alc-off - restores original path.
alc-util - shows you various Alchemy-related environment vars

USEFUL TO KNOW

which gcc - tells you which gcc it will use (should be the one in the achacks dir)
ln - links shit
rm - deletes links as well as files

Ugh: Make sure to do "alc-on" and "alchemy-setup" even though you put it in the startup script (?)

...

Objects:
AS3_Val
AS3_ArrayValue

Methods:
AS3_Release
AS3_LibInit

Related posts:

1. Flex Components Pack
2. Create professional Flex components
3. How to clone (duplicate) an object in ActionScript 3

Thanks to a friend, I discovered the describeType function in AS3. But this alone will only take care of the copying part. To create an object of the same type as another one we use getDefinitionByName.

Although Flash reflection is pretty basic, with a little work it will do the trick.

Get the application files.

Here's the code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46

< ?xml version="1.0" encoding="utf-8"?>
<mx :Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" xmlns:local="*" creationComplete="init()">
</mx><mx :Script>
 < ![CDATA[
 
     import mx.controls.Alert;
 
     private var source:DataObject = new DataObject();
     private var cloneObject:DataObject;
 
 
     private function init():void {
 
         source.name = 'John Doe';
         source.howMany = 4.5;
         source.when = new Date(0);
         source.complexProp = new DataObject();
         source.complexProp.name = 'Name in sub-object';
 
         cloneObject = UtilFunctions.clone(source) as DataObject;
 
         Alert.show("Clone:\nname = " + cloneObject.name + "\nhowMany = " + cloneObject.howMany + "\nwhen = " + cloneObject.when + "\ncomplexProp.name = " + cloneObject.complexProp.name);
     }
 
     /**
 
      * describeType will produce this (for a DataObject instance):
      *
      * <type name="DataObject" base="Object" isDynamic="false" isFinal="false" isStatic="false">
 
           <extendsclass type="Object"/>
           <accessor name="isHandicap" access="writeonly" type="Boolean" declaredBy="DataObject"/>
 
           <variable name="howMany" type="Number"/>
           <accessor name="complexProp" access="readwrite" type="DataObject" declaredBy="DataObject"/>
 
           <variable name="name" type="String"/>
           <variable name="when" type="Date"/>
 
 
      *
      * */
 
 ]]>
 
</mx>

And the UtilFunctions.as file:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73

package
{
 import flash.utils.describeType;
 import flash.utils.getDefinitionByName;
 import flash.utils.getQualifiedClassName;
 
 public class UtilFunctions
 {
 
 
     public static function newSibling(sourceObj:Object):* {
         if(sourceObj) {
 
             var objSibling:*;
             try {
                 var classOfSourceObj:Class = getDefinitionByName(getQualifiedClassName(sourceObj)) as Class;
                 objSibling = new classOfSourceObj();
             }
 
             catch(e:Object) {}
 
             return objSibling;
         }
         return null;
     }
 
     public static function clone(source:Object):Object {
 
         var clone:Object;
         if(source) {
             clone = newSibling(source);
 
             if(clone) {
                 copyData(source, clone);
             }
         }
 
         return clone;
     }
 
     public static function copyData(source:Object, destination:Object):void {
 
         //copies data from commonly named properties and getter/setter pairs
         if((source) && (destination)) {
 
             try {
                 var sourceInfo:XML = describeType(source);
                 var prop:XML;
 
                 for each(prop in sourceInfo.variable) {
 
                     if(destination.hasOwnProperty(prop.@name)) {
                         destination[prop.@name] = source[prop.@name];
                     }
 
                 }
 
                 for each(prop in sourceInfo.accessor) {
                     if(prop.@access == "readwrite") {
                         if(destination.hasOwnProperty(prop.@name)) {
                             destination[prop.@name] = source[prop.@name];
                         }
 
                     }
                 }
             }
             catch (err:Object) {
                 ;
             }
         }
     }
 }
}

by Evolvernie

Related posts:

1. Serialize JavaScript object to JSON
2. Neural networks in ActionScript 3
3. How to identify at runtime if the swf is in debug or release mode/build

By default, every component you create that is not part of default Flex components you will have placed in the [Custom] directory of Flex Components view in your Flex/Flash Builder, and no matter what properties you add to them, they will never be visible in the Flex Properties standard view.

But what if you want to customize that and create a component that have them all like flex components do? Well, it's not that hard so let's do that.

Create the Component

First, you have to create a new Flex Library Project. Do this by going to File->New and choose Flex Library Project. Give it a name, a location, choose whatever Flex SDK you wish to build this for and then click finish.

Now you have a blank library project in which you can create whatever components you want.
Is important to use packages correctly and namespaces and not just drop the component in the [src] folder (you'll see later why). First create a package (eg. com.adm.component) in which you can add your custom component.

package com.adm.component
{
      import mx.containers.Canvas;
 
      public class mycomponent extends Canvas
      {
      }
}

Okay, now let's create some methods to have something going. We'll make this component be a big button with a method to enable the button and one to change it's caption. We'll use setters and getter's for those properties because some other actions might be required when changing them. So:

package com.adm.component
{
     import mx.containers.Canvas;
     import mx.controls.Button;
 
      public class mycomponent extends Canvas
      {
            private var _title : String = 'Title';
            private var _active : Boolean = true;
 
            private var btn : Button = new Button();
 
            public function CustomComponent()
            {
                      super();
                      this.btn.width = 100;
                      this.btn.height = 100;
                      this.btn.label = this.label;
                      this.addChild(this.btn);
            }
 
            public function set title(val : String) : void
            {
                      this._title = val;
                      this.btn.label = val;
            }
 
            public function get title() : String
            {
                     return this._title;
            }
 
            public function set active(val : Boolean) : void
            {
                     this._active = val;
                     this.btn.enabled= val;
            }
 
            public function get active() : Boolean
            {
                    return this._active;
            }
      }
}

So, if you now build your project, a .swc file will be generated in your [bin] folder, which you can add in other projects and use. But now, the component will be placed in the [Custom] directory in the Components View and not the one you want. We'll do that a bit later now let's just....

Give it an icon

This is really simple. All you have to do is get a nice looking .png icon (16x16 pixels preferably) and place it next to your component. Then, use the IconFile metadata tag to link it to your component.

....
[IconFile("icon.png")]
public class mycomponent extends Canvas
{
       private var _title : String = 'Title';
       .......

Inspectable properties

If you have extra information about the property that will help code hints or the Property Inspector (such as enumeration values or that a String is actually a file path) then also add [Inspectable] metadata with that extra info. For our methods we have:

       ...
       [Inspectable(category="General", type="String", defaultValue="")]
       public function set title(val : String) : void
       .....
       .....
       [Inspectable(category="General", type="Boolean", defaultValue="true", enumeration="true,false")]
       public function set active(val : Boolean) : void

This will also help a lot when we'll add this properties in the Flex Properties panel. For more informations about the [Inspectable] metadata tag visit http://livedocs.adobe.com/flex/2/docs/wwhelp/wwhimpl/common/html/wwhelp.htm?context=LiveDocs_Parts&file=00001658.html

Create custom component folder

So, if you want to build a professional component, you can't leave Flex add your component in the default [Custom] directory in the Components tree. So, in order to create your own folder, we must use few tricks.

First of all, you need two .xml files to describe the structure you want flex to use and overide it's default behavior.
The first file is the manifest.xml which describes the components in the package and their namespaces. In our case we'll have:

< ?xml version="1.0"?>
<componentpackage>
    <component id="mycomponent" class="org.adm.component.mycomponent"/>
</componentpackage>

Second, we need another xml to describe the way the designer will interpret all this.

< ?xml version="1.0" ?>
<design>
	<namespaces>
		<namespace prefix="adm" uri="http://www.adm.org" />
	</namespaces>
	<categories>
		<category id="Test" label="Test Panel" defaultExpand="true" />
	</categories>
	<components>
		<component name="mycomponent" namespace="adm" category="Test" displayName="Rename Me" />
	</components>
</design>

In the design.xml, you can specify the namespaces you used for the components, in this case adm will point to components in the org.adm folder.

Categories tag describes the folders you want added in the Components panel. Each category must have an id which you'll use to tell components where they should reside, a label for the category to stand as the directory name in the Components panel. defaultExpand is an optional parameter which if set to true, the folder will be showed expanded by default.

In the components tag, you specify which component goes in what category and under what title. The name parameter must match the id of a component listed in the manifest.xml. All the other parameters are pretty self explanatory.

Next, you have to include this two files in .swc package. To do that, follow the steps:

* Right Click at your project and select Properties
* In the left choose Flex Library Build Path
* Select the assets tab and mark to include manifest.xml and design.xml files
* Now select the Flex Library Compiler and include your namespace URL (in this case http://www.adm.org)
* Include the manifest file .xml you've created
* Click apply and ok to finish

After this, you should end up with something like this

Add properties to the Flex Properties view

As I said before, no matter what properties you add to your component, they will never be visible in the Flex Properties standard view, only in the category view and that only if you use the [Inspectable] metadata tag. But few more lines in the design.xml file should take care of that.

	<component name="mycomponent" namespace="adm" category="Test" displayName="Rename Me">
		<mxmlproperties>
			<textfield id="title" name="Component Title:" />
			<combo id="active" name="Active:" />
		</mxmlproperties>
		<defaultattribute name="active" value="true" />
	</component>

The id of the mxmlProperties tag should be the function/variable names from your component you want to edit. You can also define default values for those properties using the defaultAttribute tag below. Here we've only used the textfield and the combo type but there are few more you can use.

<textfiled id="propertyOrStyle" name="Label:" [multiline="false"] />
<combo id="propertyOrStyle" name="Label:" />
<colorpicker id="propertyOrStyle" name="Label:" />
<filepicker id="propertyOrStyle" name="Label:" [wrapInEmbed="false"] />
<slider id="propertyOrStyle" name="Label:" min="0" max="10" increment="1" />

For combo boxes, if you use it for a Boolean property, it will automatically be populated with [true,false] values but if want something else, the [Inspectable] metadata tag has the enumeration property where you can define the properties from this combo.

Another thing you must do in order to apply the values as soon as you change them from the properties view, is to set the functions/variables as [Bindable].

    ....
    [Inspectable(category="General", type="String", defaultValue="")]
    [Bindable]
    public function set title(val : String) : void
	....
	....
    [Inspectable(category="General", type="Boolean", defaultValue="true", enumeration="true,false")]
    [Bindable]
    public function set active(val : Boolean) : void
	....
	....

One more thing

Now, compiling this will give you a 300 something KB .swc file which is a bit large to distribute. The user will use this component inside a flex component so embedding all the libraries and SDK inside your .swc is useless. So the next step is to go to Properties->Flex Library Build Path->Library path tab, expand the build path library try and edit everything inside the SDK tree on Link Type and choose External

Now the swc component only have 4KB. Big cut down, eh ?

Done

If this is to much trouble for you or you've missed something, I've attached the sources for this tutorial here. You can import this skeleton rename the package, namespace and the component and start building on this. I hope it all made sense and....happy coding.

Related posts:

1. Flex Components Pack
2. How to identify at runtime if the swf is in debug or release mode/build
3. Create Flex/AS3 applications for Mobile Devices

Solution

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57

 
    <mx :Script>
        < ![CDATA[
 
                // Maximum  width
                private var mxw:Number = 500;              
                // Maximum height
               private var mxh:Number = 250;
 
               public function onImageComplete(e:Event):void
               {
                var wthMaxRatio:Number = mxw / mxh;
 
                // no resize needed
                if (e.target.contentWidth <= mxw && e.target.contentHeight <= mxh)
                {
                    e.target.x = (mxw - e.target.contentWidth) / 2;
                    e.target.y = (mxh - e.target.contentHeight) / 2;
                }
                else
                {
                    var wthImgRatio:Number = e.target.contentWidth / e.target.contentHeight;
 
                    if (wthImgRatio > wthMaxRatio)
                    {
                        // will max out the width
                        e.target.width = mxw;
                        var imgHeight:Number = Math.round( (mxw / e.target.contentWidth) * e.target.contentHeight );
                        var newY:Number = Math.round( (mxh - imgHeight) / 2 );
                        e.target.x = 0;
                        e.target.y = newY;
                    }
                    else
                    {
                        // will max out the height
                        e.target.height = mxh;
                        var imgWidth:Number = Math.round( (mxh / e.target.contentHeight) * e.target.contentWidth );
                        var newX:Number = Math.round( (mxw - imgWidth) / 2 );
                        e.target.x = newX;
                        e.target.y = 0;
                    }
                }
              }
         ]]>
    </mx>
 
 
      <mx :Canvas width="500" height="250"
            verticalScrollPolicy="off" horizontalScrollPolicy="off" 
            backgroundColor="#000000">
 
            <mx :Image id="theimage"
                maintainAspectRatio="true"
		scaleContent="true"
                complete="onImageComplete(event)" />
 
        </mx>

Related posts:

1. Right click and custom context menu in Flash/Flex
2. Create professional Flex components
3. How to clone (duplicate) an object in ActionScript 3

1
2
3
4

def r(a):i=a.find('0');~i or exit(a);[m
in[(i-j)%9*(i/9^j/9)*(i/27^j/27|i%9/3^j%9/3)or a[j]for
j in range(81)]or r(a[:i]+m+a[i+1:])for m in'%d'%5**18]
from sys import *;r(argv[1])

If you want to test that, save it in a file and use the command line to execute the code. Execute the code as following: python solver.py puzzle - where puzzle is an 81 character string representing the puzzle read left-to-right, top-to-bottom, and 0 is a blank space

python solver.py 530070000600195000098000060800060003400803001700020006060000280000419005000080079

The problem with the above code is that is really slow. Here's another one that runs about 100x faster and is less cryptic.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

import sys
 
def same_row(i,j): return (i/9 == j/9)
def same_col(i,j): return (i-j) % 9 == 0
def same_block(i,j): return (i/27 == j/27 and i%9/3 == j%9/3)
 
def r(a):
  i = a.find('0')
  if i == -1:
    sys.exit(a)
 
  excluded_numbers = set()
  for j in range(81):
    if same_row(i,j) or same_col(i,j) or same_block(i,j):
      excluded_numbers.add(a[j])
 
  for m in '123456789':
    if m not in excluded_numbers:
      # At this point, m is not excluded by any row, column, or block, so let's place it and recurse
      r(a[:i]+m+a[i+1:])
 
if __name__ == '__main__':
  if len(sys.argv) == 2 and len(sys.argv[1]) == 81:
    r(sys.argv[1])
  else:
    print 'Usage: python sudoku.py puzzle'

Related posts:

1. How to run python code in Windows batch (bat) files
2. Quick Python Script Explanation

Subversion (svn) is a version control system initiated in 2000 by CollabNet. It is used to maintain current and historical versions of files such as source code, web pages documentations etc. Google code also provides free Subversion hosting but if you want your own private server continue reading to learn how to set up your own svn server

First: get the Subversion setup and run it to install Subversion.

Installing svnserve as a service
 
The simplest way to set up a server on Windows is to use svnserv which can be installed as a Windows service.
Run these commands in order to get the service up and running:
 

1
2

   mkdir c:\svn
   svnadmin create c:\svn\repos

Start the service:

1
2

   sc create svn binpath= "\"C:\program files\Subversion\bin\svnserve.exe\" --service -r C:\svn" displayname= "Subversion Server" depend= Tcpip start= auto
   net start svn

Note: There really are spaces after the = signs.
Check that it worked by checking out the repository:

1

   svn checkout svn://localhost/repos

Adding security

Edit C:\svn\repos\conf\svnserve.conf, uncomment these lines and change anon-access to none:

1
2
3
4

   anon-access = none
   auth-access = write
   password-db = passwd
   realm = My Subversion Repository

Now edit C:\svn\repos\conf\passwd and add a user name and password to the users section:

1
2

   [users]
   myusername = mypassword

Delete your first checkout and try to check out the repository again, this time you will have to supply a user name and a password.

Using WebDAV via Apache 2.2

Get and install XAMPP, install Apache and MySQL as a service. Unblock ports as needed when the installation is finishing up.

As we are installing Apache 2.2 so we need builds of the Subversion Apache modules which are compatible with Apache 2.2 which are available here.

XAMPP has a prebuilt mod_dav_svn and mod_authz_svn - they don't work, replace them with the Apache 2.2 built ones which you have just downloaded, the zip file contains a complete build of Subversion but we only need the two Apache module files. The files to replace are mod_dav_svn and mod_authz_svn in c:\xampp\apache\modules.

Edit C:\xampp\apache\conf\httpd.conf and add:

1

   Include conf/extra/httpd-subversion.conf

Put this in that file:

1
2
3
4
5
6

   LoadModule authz_svn_module modules/mod_authz_svn.so
   LoadModule dav_svn_module modules/mod_dav_svn.so
   <location /svn/repos>
     DAV svn
     SVNPath c:/svn/repos
   </location>

Stop and start the Apache service, either using the command line or the XAMPP Control Panel Application. Fire up a web browser and go to http://localhost/svn/repos.

Adding Security

In httpd-subversion.conf, add this to the Location directive:

1
2
3
4

   AuthType Basic
   AuthName "Subversion Repository"
   AuthUserFile c:/svn/passwords
   Require valid-user

Now create a password file and add a user, note: xamp htpasswd doesn't like drive letters.

1
2
3

   C:\svn>c:\xampp\apache\bin\htpasswd -cb \svn\passwords myusername mypassword
   Automatically using MD5 format.
   Adding password for user myusername

Then restart Apache again. You will now need to use the user name and password to access your repository.

If you're not familliar with the svn command line or you find it to hard to use, just download TortoiseSVN. You'll love it.

Related posts:

1. Install Windows XP on your Asus Eee PC using a USB flash drive
2. Alfresco CIFS shared drive authentication problem

I'm only going to be concerned with the major browsers - Firefox 2+, Safari 3+ and Internet Explorer 6+. IE6 is slowly declining.  If you know the IE6 bugs you can generally know if your site will break before you even check it in a browser. This isn't an article for the super-experienced web designer, but hopefully will give some insight to some people who don't understand the mysteries of IE6 and cross browser compatibility.

Summary

Here is a quick summary for those of you who don't want to read the whole article:

• 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

Element Inconsistencies

Every browser renders particular elements differently - different amounts of padding, margins, borders etc. This means your site can look different in every browser if you use default styles.

Solution

The first thing you should do, which most people most likely know about, is to reset your styles. A reset is some css you place at the start of your styles that removes the padding, margin, border and other inconsistencies from elements, and rebuilds them in a standard way.

Download Eric Meyer's reset.css and place the code at the start of your styles. Bam! Clean, cross browser styles.

Image Rendering

IE6 and IE7 both render resized images extremely badly. When you change the size of an image with CSS or in the HTML, it appears blocky and edgy.
Solution

Don't do it. Always size your images to your desired size before you use them on your site

Font Rendering

I told you not all issues were with IE. Safari 3+ has an issue with the way it renders light type on a dark background. Some would argue whether this is good or bad, but there's a way to make it appear lighter. Here's an example of standard white on black text rendering in Safari 3.1:

Solution
Easy fix. You need to add this to your code.

p {
   text-shadow: #000 0 0 0;
}

Where #000 is your background colour. You will probably have to be more specific with the elements you select. I wouldn't suggest using this fix on the body tag. Other elements you might need to fix are the li, dt, dd, blockquote etc. Use this on any text element you want to appear 'thinner'

To make this fix in Firefox, you use the opacity fix:

p {
    -moz-opacity: 0.99;
}

You need to be careful with this fix, as it will break any Flash element that it touches in Firefox. There appears to be no workaround for it.

The type will now be rendered like this:

Font Selection

There are common web fonts that we use - Arial, Georgia, Verdana etc. But there are some fonts that are common to both PC and Mac and can be used - Century Gothic, Arial Narrow etc. However, different browsers and OS's render type different, and you need to be aware of these differences, as your site could look dam ugly if you use the wrong font.

Solution

The font you choose is ultimately up to you. As long as it's a safe font you will be fine. However you should be aware of these rendering issues. One font you should probably not use is Lucida Grande/Sans. It renders awful in IE. Take a look at its rendering in Safari(Mac):

Looks nice doesn't it? Too bad it looks like this in Internet Explorer(PC):

Some people have stated that Lucida Sans will look fine in IE with ClearType, and others have said that it still looks bad. A smart alternative is to just not use Lucida Sans as your 'fallback font', and instead use Arial or another san-serif font.

Font Sizing

The ability to resize text differs amongst browsers and OS's. IE won't resize text thats set in pixels. If we set all text in em's, IE will exaggerate the text sizes when resized.

Solution

The best reference for font sizing is the article How to Size Type in CSS by Richard Rutter. The results - You need to specify the size as a percentage in the body element, and then size it in em's through the rest of the sheet. For line height, you need to define it in em's, rather than pixels, for consistent rendering.
One thing to remember is that the default font size is 16px. So to resize our type to 12px we use:

body {
   font-size: 75%;
   line-height: 1.5em;
}

Now you can size your type in em's like so:

h1{
   font-size: 3em;
}

Another suggested technique is to resize it down to 10px, which makes it easier to size upwards in em's. For example.

body {
     font-size: 62.5%;
     line-height: 1.5em;
}
 
h1 {
      font-size: 1.8em; /* 18px */
}
 
p {
      font-size: 1.2em; /* 12px */
}

here is an issue with this however, if people use small font option in Internet Explorer, it could be so small that it's unreadable. It's only a small chance. But worth noting.

Double Margins on Floats

We create CSS layouts by floating div's up against each other, like some form of horizontal tetris. When it reaches the end of a row, it drops down to the next. The common method for creating a grid is this:

#content {
     float:right;
     width: 300px;
     margin-right: 10px;
}
 
#sidebar {
     float:right;
     width: 100px;
}

This is what it should look like in a browser:

This is what IE does to it:

The margin width is doubled. Any margin that is on the same side as the float will be doubled. Don't ask why. It's just IE. This means the element on the left will have that margin stretched out to 20px, which will probably break the layout.

Solution

To fix it, all you need to do is put display:inline on your layout divs.

#content {
     float:right;
     width: 300px;
     margin-right: 10px;
     display:inline;
}
 
#sidebar {
     float:right;
     width: 100px;
     display:inline;
}

Now that margin bug is all fixed. Even though it only effects margins on the same side as the float, it can still be useful to include this fix. You never know when you might use a margin on the float side. It won't effect any other browser, so you can use it safely.

Expanding Box

The expanding box problem is a big issue with many css layouts. When you have a standard layout, with floats sitting next to each other, with set widths, but an image or long string of text is longer than this width, the layout will break in IE6. Take a look at this example:

#content {
     float:left;
     width: 300px;
     margin-right: 10px;
     display:inline;
}
 
#sidebar {
     float:left;
     width: 100px;
     display:inline;
}

This will render like in this most browsers:

However, in IE6, it will break like so:

Solution

The solution is to use the overflow property. If you place overflow:hidden; into the layout divs, the layout won't break in IE6.

#content {
     float:left;
     width: 300px;
     margin-right: 10px;
     display:inline;
     overflow:hidden;
}
 
#sidebar {
     float:left;
     width: 100px;
     display:inline;
     overflow:hidden;
}

This could, however, cause some issues with layouts depending on how complex they are. It also won't cause the text to wrap, and it will just remain hidden. It's unlikely you'll have a string long enough to break a layout, but it could happen. Another option is to use word-wrap: break-word; in an IE specific stylesheet. This won't effect images though, so you'll have to make a choice about with method is appropriate for your situation.

Clearing Floats

What we mean when we talk about clearing floats, is when a container or wrapper div doesn't correctly wrap around the containing divs. Take a look at this example:

See how the container is correctly containing the div's? This is what should happen. However, sometimes it does not clear correctly, like so:

The container isn't correctly wrapping around it. You probably won't notice this until you try and put a background on your container.

Solution

There are a few different solutions for clearing. The best solution however, is a simple overflow:auto or overflow:hidden in your container

#container {
     width: 966px;
     margin: 0 auto;
     overflow:auto;
}

You need to keep in mind that overflow:auto might cause some issues in Firefox. If you do have any issues, use overflow:hidden instead. If this is still causing issues, take a look at some other forms of clearing floats. Apart from just adding this, you'll need to make sure hasLayout is triggered in IE6. You can do this by specifying a width or height. If you don't have a width in your container, you can use height:1% to trigger it, or zoom:1; if you can't afford to give it a height.

CSS Selectors

Although we would like to use all the brand spanking new CSS3 selectors, IE6 doesn't support all of the major ones. There are also still some CSS2 child and sibling selectors you simply shouldn't use if you want to support IE6:

• E > F
• E + F
• E ~ F
• :root
• :last-child
• nly-child
• :nth-child()
• :nth-last-child()
• :first-of-type
• :last-of-type
• nly-of-type
• :nth-of-type()
• :nth-last-of-type()
• :empty
• :not()
• :target
• :enable
• :disabled
• :checked
• Any of the E[attribute] Selectors
• :first-child
• :lang()
• :before
• ::before
• :after
• ::after

f course, a lot of these selectors aren't supported by even Firefox 3. For a full list of supported selectors, check out evotech.net's post on browser css selector support

Solution

Stick to your standard selectors. Nothing fancy. Only use E + F, E > F, E ~ F when it won't make a huge difference in IE. If you really need to use these selectors, you should look at using IE8.js which gives IE6 better selector support. However this will slow down your site. But we don't really care about IE6 users do we?

PNG Transparency

IE6 doesn't support alpha transparency in PNG's. This is possibly the most annoying bug/issue with IE.

Solution

There are a few solutions for this problem. You can either use AlphaImageLoader in an IE specific stylesheet, link to a behaviour file in an IE specific stylesheet or use JS to fix the issue. Not matter which way you choose, there is no way to have transparent repeating background images.
To use AlphaImageLoader, it's a little bit tricky. Add these properties to any png image you want to have transparency. (You need to put this code in an IE specific stylesheet if you want your CSS to validate)

.trans {
     background-image: none;
     filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/images/transparent.png', sizingMethod='image/scale/crop');
}

Let's say you've given all your png image tags a class "trans", you select them with your css and use the filter property. You need to create a 1x1 transparent png file and link to it in the src attribute.

An even better way to do this is via a behaviour. It's similar to the AlphaImageLoader, except that you link to a behaviour script that triggers the transparency.

The third method is to use IE8.js which I mentioned earlier. It's even safer than the previous method, and you are very unlikely to run into any problems. Link to the script in your HTML, and it will make any png ending in -trans alpha-capable. eg. myimage-trans.png.

With all this methods, you need to be aware that you might still run into problems with transparent pngs. Make sure you test it in IE6 extensively

Related posts:

1. Cross browser inline-block