the laboratory
blog-A-rific!
video

Hilarious Steve Ballmer video with the infamous Developers, Developers song.


check out this dancing citroen. It's amazing what can be done with CGI nowadays.
If they can make a commercial like this, a live-action transformers movie might be good.


Tom Cruise has turned to the darkside and attacked Oprah with force ligthning.
wait, does that make him a good guy or bad guy?

the lab: cross-browser css navbar

A common problem with using div tags for navigation is getting them to align horizontally. Using inline, floating div tags, we can accomplish this. When we follow W3C standards and the XHTML/Transitional Doctype everything looks perfect in Firefox. If you look at it in IE it's all screwed up.

Example 1

in Firefox: everything looks good, right
in IE: well, lets just say, it ain't right. take a look. IE expands the divs to their width of their container despite the display property being set to inline.
view this page in Firefox and IE for comparison.

Example 2

To fix the IE div width problem we'll visit the hollyhack from Position Is Everything.
by using some code that only works in IE and assigning a width of 1% IE is forced to limit the width of the nav boxes to the length of the content within.
in Firefox: everything's still A-OK!
in IE: boxes are correct, but now IE is wrapping the words inside of the navbar divs.
view this page in Firefox and IE for comparison.

Example 3

To fix the word wrapping issue, we simply add a white-space: nowrap; to the navbarItem class.
in Firefox: still perfect
in IE: not there yet!
IE seems to have a problem with the navbar links if you have default link styles defined for the page.
view this page in Firefox and IE for comparison.

Example 4

To fix the link problem, we move the styles from navbarItem to navbarContainer.
view this page in Firefox and IE for comparison.

Final Product

with the hacks and the ie workarounds, we have a working navbar.
view this page in Firefox and IE for comparison.

Doctypes

it seems that IE also has a problem with the border-box model unless you specify the doctype to be XHTML.
in Quirks mode, or anything other than XHTML, IE doesnt expand the hover on the navbars, leaving a 3px gap under the text.
view this page in Firefox and IE for comparison. to fix that, use the XHTML doctype, or if that isnt possible, use the hollyhack once more.
add this: * html .ieNavbarHeightFix a { height: 20px; }
then put it in the class attribute of the navbarItems
view this page in Firefox and IE for comparison.

linkage
moblogs