CSS – Clear extra space in display: inline-block items

I run into this a lot and see people who have had the same problem. When you make a set of navigation links out of an li you set them to display: inline-block and now there are extra spaces between your items.

The spaces are actual text spaces as interpreted by the browser.

To fix:
Set your container (ul) to font-size:0 and if you have text in your li, set its font-size explicitly to what you want.

This will fix any extra spaces in your inline-block lists.

My TextFormat won’t stick to my TextField

Run this SWF and click the button, the text stays pink.
Then run this and click on the text, then click the button.
The text defaults size and color. Why??????textFormatBug

var titleTF:TextFormat = new TextFormat();
titleTF.color = 0xFF00FF;
titleTF.size = 22;
//titleTF.font = avantBold.fontName;
var titleText:TextField = createTF(10, 10, 200, 26, true, titleTF, “This is a test”);
addChild(titleText);

function createTF(_x:Number, _y:Number, _width:Number, _height:Number, _autoSize:Boolean, _defaultTF:TextFormat, _text:String):TextField {
var tf:TextField = new TextField();
tf.x = _x;
tf.y = _y;
tf.width = _width;
tf.height = _height;
tf.autoSize = (_autoSize) ? TextFieldAutoSize.LEFT : TextFieldAutoSize.NONE;
tf.wordWrap = true;
tf.multiline = true;
tf.defaultTextFormat = _defaultTF;
tf.htmlText = _text;
//tf.setTextFormat(_defaultTF);
return tf;
}

clicker.addEventListener(MouseEvent.CLICK, swapText);

function swapText(e:*):void{
titleText.htmlText = “This is now a changed test” + String(Math.random());;
}