Multiple User Names with One Gmail Address

I just recently learned, while testing the app I am working on, that is the app is using your email address for a user name, you can create multiple usernames for testing using just one gmail address.

Apparently, is doesn't matter where, (or how many), (.)'s there are in a gmail address before the @.

So if your gmail address is lastname.firstname@gmail.com, you can use the following iterations and they will all come back to your gmail account:

• last.name.firstname@gmail.com
• last.name.first.name@gmail.com
• la.stna.me.fir.stna.me@gmail.com
• l.a.stname.fi.rst.na.me@gmail.com
• la.stn.ame.fi.rs.tn.am.e@gmail.com
• and so on...

It is a pretty handy feature.

Introducing "The Hadron Zoo of hacks for IE"

I was looking for a way to target IE7 and not IE8. I found my answer here:

The Hadron Zoo of hacks for IE

"Please note that this is not a page to find hacks for IE 8 but rather how to target IE 7 without also targeting IE 8. All hacks are valid CSS. Please use wisely."

from css-class.com

How to keep footers at the bottom of the page...

From http://matthewjamestaylor.com

"When an HTML page contains a small amount of content, the footer can sometimes sit halfway up the page leaving a blank space underneath. This can look bad, particularly on a large screen. Web designers are often asked to push footers down to the bottom of the viewport, but it's not immediately obvious how this can be done..."

MJT has a very simple CSS method for anchoring the footer to the bottom of the page. Learn about it on his blog:

Matthew James Taylor > Design Blog > Get down! How to keep footers at the bottom of the page

UPDATE: CSS Sticky Footer

Apparently the above solution didn't work as desired.

A colleague did some further investigating and found this:

CSS Sticky Footer

A (Partially) Liquid Layout

There are a lot of liquid layout templates out there, but none of them ever seem meet the requirements that I often come up against.

For example, I need a liquid layout that:

• has 3 columns
• the left and right column are fixed widths
• the center column is liquid
• the layout stops shrinking at a minimum width
• it stops stretching at a maximum width (at which point it centers itself in the browser window.)

After mucking about with this I am happy to report success! The key was to get away from using percentages and absolute positioning.

Percentages work well when everything is liquid. But when it is specified that one or two column need to have a fixed width, then using percentage widths breakes down.

I struggled with this. "There has to be a way!!!"

I mucked around with nestin absolutly positioned elements inside a relativly positioned element. Nope.

Then remembering the method on how to "center" a <DIV> using margin: 0px auto;, it dawned on me. Instead of trying to define the width, define the margins instead. Worked like a charm. The key thing to remember is to set the left and right margins to be equal to the widths of the left and right columns.

The layouts are have a minimum width designed for 1024 screen resolutions. Any smaller that that and all liquidity stops and scrollbars appear. I picked 1600px as tha maximum to stretch to, because at some point you may no longer want your stuff to stretch.

3 Column Layout

• Fixed - Liquid - Fixed 1024 minimum, 1600 max, right and left columns fixed width, center column liquid

2 Column Layout

• Fixed - Liquid 1024 minimum, 1600 max, right and left column/region liquid

I've tested these screens on all browsers (IE7, IE8, FF 3.5, Opera 10.0, Chrome 2.0, and Safari 4.0 (for windows). I however no longer have access to IE6, so I couldn't test it on that browser.

The bonus with this method is that it is ridiculously simple.

FireFox 3 Background Image Not Rendering!

So why can't I see my background image in FireFox?

I am coding away prototyping some new components for a redesign and I am coding a list of links (for the footer) that has a nice, blue triangle preceding each link. Typically how I handle this is I add padding to the left of the <a> tag and set a non-repeating background image to that tag.

So the HTML mark-up is pretty simple:

<div class="FooterDiv">
 ...
 <div class="footerColumnDiv">
  <h3>Support</h3>
  <ul>
   <li><a href="#">Security Center</a></li>
   <li><a href="#">Help/FAQs</a></li>
  </ul>
 </div>
 ...
</div>

And here is the associated CSS:

.FooterDiv ul,
.FooterDiv li {
 margin: 0px;
 padding: 0px;
 list-style-type: none;
}

.FooterDiv li a{
 font: bold 12px Arial;
 color: #069;
 text-decoration: none;
 padding-left: 15px;
 background: transparent url(otherImages/blueArrow.gif) scroll no-repeat  2px left;
}

The above works as intended in other browsers (IE7, Safari 3) but it doesn't work on FireFox 3 (on either the MAC or Windows). Hmmmm.

FireFox 3 doesn't like mixed marriages

It turns out that FireFox 3 doesn't like it when you mix property value types when setting the background-position in CSS. so you can't have 2px left when setting the position of a background image.

Either of the following did work for FireFox 3:

.FooterDiv li a{
 font: bold 12px Arial;
 color: #069;
 text-decoration: none;
 padding-left: 15px;
 background: transparent url(otherImages/blueArrow.gif) scroll no-repeat   left center;
}

-or-

.FooterDiv li a{
 font: bold 12px Arial;
 color: #069;
 text-decoration: none;
 padding-left: 15px;
 background: transparent url(otherImages/blueArrow.gif) scroll no-repeat  0px 2px;
}

Maybe if I coded it right to begin with...

I though I did according to the CSS 4.01 Spec.

When I originally set the 2px left; for the position, FireFox 3 did not like the fact that I tried to put the horizontal position setting where it wants the vertical position setting, and visa-versa. It should have been (according to FireFox 3) written as: left 2px;

So the following also works:

.FooterDiv li a{
 font: bold 12px Arial;
 color: #069;
 text-decoration: none;
 padding-left: 15px;
 background: transparent url(otherImages/blueArrow.gif) scroll no-repeat  left 2px;
}

All the other browsers I tested this in seemed fine with this.

Editing the Hosts Files in MAC OS X 10.5.# Part II

Gas Mask 0.4: Finally! a Host File Switching Tool for the Mac

Gas Mask 0.4 is a simple hosts file manager for Mac OS X Leopard. It enables to edit hosts files and switch between them.

Yeay!

Invalid HTML Does Break Things (<DIV>'s and Lists)...

Everything Looked Fine...

I was working on a project where we were creating a new Wizard for one of our web application. About 2/3's of the way through the screens looked good and everything was working well across all browsers. Then one day I get a Defect Ticket stating that the layout is completely blown out in IE6. The note in the ticket pointed out that X didn't line up with Y (amongst other things).

I looked into it. I fired up the old IE Developer Toolbar and I also looked at the site in FireFox (and FireBug). Even though it was an IE6 issue, I like to also use FireBug/FireFox in parallel in order to get a good lay of the land.

"Hmmm, IE Dev Toolbar is showing my DIV's aren't nested as they should be..."

It took a while to notice this, but, in IE6, the DIV's that contained X and Y were not nested in the Container DIV that they should be. However in FireFox (and IE7), they were. If this was due to an unclosed DIV tag, then all browsers should be screwed up. I did some probing and I found code that resembled the following:

<DL>
     <DIV id="this">
          <DT></DT>
          <DD></DD>
          <DT></DT>
          <DD></DD>
     </DIV>
     <DIV id="that">
          <DT></DT>
          <DD></DD>
          <DT></DT>
          <DD></DD>
     </DIV>
</DL>

Some Clever Developer...

Some clever developer wanted to conditionally SHOW or HIDE different <DT> and <DD> sets, so he wrapped them in <DIV> tags. The problem with that is, according to the HTML 4.1 specification:

Syntax <DL>...</DL>

Contents One or more DT or DD elements...

AHA! This means that a <DIV> cannot be a direct child of <DL>.

When FireFox and IE7 encountered the above code, it dealt with the bad HTML. When IE6 encountered the code, it "read" the improperly nested opening <DIV> but ignored the improperly nested closing </DIV>. The <DIV> was there, but IE6 wasn't acknowledging it because it wasn't properly nested. (It should have ignored the opening <DIV> but it is IE6 after all.)

Fixing the HTML Markup

So how do I fix this without having the developer (in Malaysia) have to rewrite their back-end code. I can clearly see what his intention is, so I modify the HTML Markup as such:

<DIV id="this">
     <DL>
          <DT></DT>
          <DD></DD>
          <DT></DT>
          <DD></DD>
     </DL>
</DIV>
<DIV id="that">
     <DL>
          <DT></DT>
          <DD></DD>
          <DT></DT>
          <DD></DD>
     </DL>
</DIV>

I break up the one <DL> into smaller bits and nest those inside the <DIV>'s. A little CSS tweaking and everything is working, and looking, as intended.