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.

IE6 Multi-Class Bug

Why won't my cleverly written code work?

On a recent project I wrote some JavaScript to change the class assigned to a region so I could randomly set the background image by using different CSS classes.

In my style sheet, I had very explicitly set the styles using an #ID.ClassName combination. Well it didn't work in IE6 and it took a bit of investigating to find out why the following wasn't working for only IE6:

#UpperHome.ProspectImg1 {
     background-image: url(http://yada.yada/.../imageOne.gif)
     }
#UpperHome.ProspectImg2 {
     background-image: url(http://yada.yada/.../imageTwo.gif)
     }
#UpperHome.ProspectImg3 {
     background-image: url(http://yada.yada/.../imageThree.gif)
     }
#UpperHome.ProspectImg4 {
     background-image: url(http://yada.yada/.../imageFour.gif)
     }
#UpperHome.ProspectImg5 {
     background-image: url(http://yada.yada/.../imageFive.gif))
     }

I had a simple JavaScript that would randomly assign one of the five classes to the <DIV id="UpperHome" >. It worked fine in FireFox, Ie7, and Safari. The only place it wasn't working was in IE6. IE6 would only render the default background image I had set elsewhere.

Luckily, I found that somebody else was having a very similar problem, (I wish I could remember the search tern I used in Google to find it):

• Sonspring.com: IE6 Multi Class Bug

It turns out that if you have a series of #ID.Class pairings in a style sheet, and at least one of those pairing does not exist in the page that is calling the styles, then none of the #ID.Class pairings are interpreted by the IE6 browser.

I think. It's been a while.

Anyway, removing the #IDs from the style sheets and simply using "just classes" resolved my issue.

The following working in IE6 (and all others) just fine:

.ProspectImg1 {
     background-image: url(http://yada.yada/.../imageOne.gif)
     }
.ProspectImg2 {
     background-image: url(http://yada.yada/.../imageTwo.gif)
     }
.ProspectImg3 {
     background-image: url(http://yada.yada/.../imageThree.gif)
     }
.ProspectImg4 {
     background-image: url(http://yada.yada/.../imageFour.gif)
     }
.ProspectImg5 {
     background-image: url(http://yada.yada/.../imageFive.gif)
     }

Reset Stylesheets

Ground Zero

A friend of mine pointed me to an article that talks about using Reset Stylesheets. It is a style sheet that sets a common base line for all browsers to build on. essentially, it gets rid of all the baggage and default style rules that are thrust upon the developer by the browser.

"Even the browsers with the most rigorous support for web standards have slightly different starting points for many HTML elements. It's true -- measure your page elements in Firefox, Safari and Opera with a ruler and you'll see each renders them in their own subtly different ways."

For more information, I suggest you read the full article:

• Webmonkey: Using Reset Stylesheets