Notes to self

“ ———————————————————————————
Tracking Conversion CSS “letter-spacing”
——————————————————————————— 1 =1/1000 em
100 =100/1000 em =0.10 em
200 =200/1000 em =0.20 em ———————————————————————————

— Converting Tracking and Leading from Photoshop to CSS

No scrollbar in Firefox

I came across this weird bug in Firefox. The scrollbar was missing, but I hadn’t even started any CSS yet. I figured the only special thing I’d done was setting a meta tag to get rid of those cartoon looking buttons in IE6/XP.

<meta http-equiv="MSThemeCompatible" content="no" />

Accidently it also strips Firefox of it’s scrollbar.

Set <a> to display as a block element while inline

Want an anchor element to display as a block element while inline?

Parent <ul> as block with height.
Set parent <li> with line-height, not height.
Set <a> to display: inline-table;
Set <a> to display: inline-block;

» Unexpected line break with sIFR

It breaks because it reads the exact width of the HTML text, which is less than the width required for the Flash text. You can adjust this by specifying letter-spacing, so the HTML text is as wide as the Flash text.

» Using jQuery before and after

The aha-moment: before(content) and after(content) are to take complete nodes only.

» IE: Disappearing position:absolute boxes near floats and clears

This one is a bitch to track down, so try to remember it. Sometimes in IE6, sometimes in IE7.

» How to use a button bg image in IE without the text coming on top.

font-size: 0px;
line-height: 0px;
text-indent: -9999px;
display: block;

Needs display: block; for text-indent to work in IE 6 and 7. Use float if inline needed. Or [button][span]Hide my text[/span][/button]

sIFR letter-spacing

No: letter-spacing: -1px;
Yes: letter-spacing: -1;

In js. Can’t use units for some reason.

» 23" Apple Cinema HD display with unibody Macbook Pro

Needs two adapters to get from Mini DisplayPort to ADC. Have to be Apple brand. Gonna be pricy. Also see on flickr.

jQuery can't get height(); because of floats

$(‘#myDiv’).height(); gives 0 because the contents of #myDiv are floated, so #myDiv has collapsed and actually do have 0px height.