Aligning TABLE inside TDs

I inherited a web app that has a structure like this:
table
  tr
     td
     td
     td
        table

The last table in that list was supposed to be right align, but no modifications to it’s TD parent will change that.  You can’t use align=”right” or text-align:right.

You need to use align=”right” on the TABLE that you want to be right aligned, not on its TD parent.

I know this is a bad idea as CSS is much better for aligning elements instead of nesting tables, but in this case I’m not going to rewrite the whole app layout for 1 thing.

Visual Studio type fly out windows in HTML

I’ve been working on a project where I wanted to have a flyout window on the left just like how Visual Studio does their menus.

Maybe “slide out” is more accurate.

I used jQuery, which I am trying to use more in my projects, for the effects.

Anyway, I ended up making it a bit harder than it needed to be by having the tab itself slide out, as well as allow for multiple tabs.

At this point I’m happy enough to move on with a successful proof of concept, but I think if I were doing this from scratch again I wouldn’t bother having the tab slide out as well.  I’d just show the sliding out window.

But, this should be a good starting point.

visualstudioflyoutmenus.htm (17.7 KB)

Update: And of course it completely fails in FF.

I made some changes, removed some things, tweaked others… looks ok in FF now.

visualstudioflyoutmenus2.htm (17.7 KB)

Javascript bookmark to aid with page layout

A coworker sent me this link.  You just bookmark it, and then click the bookmark when you want to examine the layout of your page elements.

javascript:prefFile='';void(z=document.body.appendChild(document.createElement('script')));void(z.language='javascript');void(z.type='text/javascript');void(z.src='http://slayeroffice.com/tools/modi/v2.0/modi_v2.0.js');void(z.id='modi');

And it will add a little floating window in the upper left corner to show you everything you mouse over: