particulars

While pondering the changes the MTA has been making to subway service I came across the following webpage and thought to myself “this deserves a long awaited blog entry”:

Does the above look familiar? Back in the day, when I was pulling myself away from tables and discovering this whole “floating” situation, I scratched my head about this one for a few hours. Being that it was way before Firebug could shed light on the boxes being created by my code, I added a 1 pixel wide black border around everything and then printed and inspected every last line of fresh new XHTML to see if I had somehow forgotten to close a tag. What could be wrong? It all looks like it should work… why does the outer container spring up to the top of the page like those window shades in cartoons?

When elements are floated, they seems to enter this whole other world of browser physics where you have to learn how to wrangle them back down to co-exist with reasonable browser physics. Well, it seems that, when floating divs (or anything), the containing box’s style must include {overflow:auto;} or some kind of overflow designation in order to remind the browser that the outer box should fully contain the floated content nested inside.

Well, look at that! Above, I used Firebug to preview the live site with the CSS overflow fix wrapping the outer #contentbox around the floated columns nested inside.

If you haven’t played around with the Firefox add-on Firebug, you are seriously feeling around in the dark. It allows you to inspect your code by pointing a clicking. You can discover where that one place is getting that one color by clicking on it and discovering the line number of the offending CSS. I don’t know what I would do without it.

This is a transcript from a Facebook conversation regarding CSS columns that expand to full/equal vertical height:

Anon Friend March 1 at 3:48pm
FUCK THEM OMGOMGOMG I”M GONNA USE A TABLE

Thank you, I needed that.

Mimi Flynn March 1 at 3:55pm
NO!!! DON’T DO IT!!!

Read the rest of this entry »

It used to be that one would have to finagle with their Mac OS X to get a test server running. I’ve spent many an hour on my old titanium Powerbook typing away at the terminal essentially feeling about in the dark, until PHP would parse in my browser from a local directory.

Now, we have options! Need a local testing environment to work on your latest WordPress theme? Trying to discover the magical combination of CCK, Views and Panels to make Drupal do what you want but you’re in flight and too cheap to pay $13 for 3 hrs of wireless?

Windows:
WAMPserver

Mac:
MAMP

Windows, Mac, *nix:
XAMPP
Acquia Drupal Stack – automatically installs Acquia Drupal as well as Apache, MySQL, and PHP. Easily creates new Drupal sites with control panel interface.

Update 2/14/12: youTube is now using iframes to embed video. I have been alerted to this article for the fix.

Add the following attributes to all embedded videos or maps that appear in front of a static element (such as a toolbar or footer bar) to push them back where they belong:

style="z-index: 0" wmode="transparent"

Its very rare that you would need to do this, but more statically positioned toolbars and such have been popping up all over the place, so, it seems it will become more and more common as this trend spreads.

After reading an entry on Nettuts regarding 10 tutorials for beginning web designers I got to thinking “What would I suggest beginning web designers and developers read to give them a more rounded perspective on their new career?”. So, I compiled this list. I attempted to included articles that focus on areas outside of the tools of the trade (coding, Photoshop) and more on the actual practice of web design and development (process, business, usability, etc.).

Read the rest of this entry »