a . g r o o v e

today is my last day at work, i started at navarik when they first moved into this current building as a co-op back in 2005 or something, then i did part time here and there til i finally got myself a full time paper to sign, my first day in 05 my job was setting up my own comp and build an ikea desk for don’s office (i dont think i’d ever forget ha)

my main work here has always been doing html/css, i take mockups and make templates, then i fix ui bugs for our application, like 80-90% of the time that’s all i did, for THREE+ YEARS

one of the last thing i’m doing is writing bunch of comments and documentations to help people using our mega thousand lines of css files, which i thought this might be something good to share, they’re not super complicated or anything, and you can probably google most of them too

align a block element right
- set margin-left: auto to align right (setting both margin left and right auto will let you align center – margin: 0 auto)
- make sure you set clear: right after or use the clearfix class to avoid potential weird layout bugs
- one way to put 2 block elements in the same row, but one align left and one align right is to set float: right on the right block, but in the html put the right block code first, if you put left div first (even though it probably makes more sense to do so) right div will be align right but placed under left div, not in the same row

positioning
- negative margin top will shift up, negative margin bottom will actually shift the element below up (so it overlaps)
- set position relative or absolute also lets you set z-index, sometimes position: relative works well with negative margin

no line break
- white-space: nowrap works only on inline element (i’m pretty sure) – <span>, <label> and not <div> or <td>
- try not to use <nobr> i think it’s deprecated html

table+borders
- (old way) set table to have top and left border, set all cells to have right and bottom border
- (better way) set table and all cells to have border, then set border-collapse: collapse

image background
- you have to set display: block most of the time to use background image (so you can set width and height on the block), but sometimes if you have a small text/link with icon, you can set it on the a/span, and just give it additional left/right padding, or adjust the line height, cause the awesome inline-block only works in IE

below is a list of crazy things that usually happens in IE only

100% and padding
sometimes when 100% width is set on a div or table, it will expand to the full width of its container, this doesn’t include the padding set on the container so the div/table width may exceed the parent container
FIX – if you must have space around the parent block, one way to work around it is to set no width on the inner block element (div, p) and just set margin instead, may not work for table

shifty textarea
when a text area is set to 100% width, it will expand to the full width of its container, but if the container has padding set, the text area will appear fine, but once you type something inside, it will expand and the width may exceed the parent container
FIX – use the <fieldset> tag, this is used in claims, google for example

overflow scroll container with elements inside
when overflow auto or scroll is set, in FF the scroll will appear outside of container, in IE it appears inside of container – this sometimes causes a problem where horizontal scroll appears because the vertical scroll is covering up the content inside the container
FIX – right now the current solution is to set the inner child div/table/element to be 98% width or something

bleed through select box
when you use div as a dropdown menu, when it overlaps a select box, the select box will bleed through the div block and there is no way around it, the select boxes exist in some magical top layer that no element can get through
FIX – the trick is to insert an iframe underneath the dropdown (YUI does the same fix), insert an iframe tag and style it so it is exact same size as the div block dropdown and position in the same spot as the dropdown, and then set the z-index value for the dropdown 1 higher than the iframe

radio button alignment
radio button and its label never have good vertical alignment, the alignment are not the same in IE and FF so you can’t really just set the vertical-align property