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.

Missing Cursor in Input Field in Modal Layer (FireFox)

Ajax Modal Pains in Firefox! (spelling intentional)

I came across this problem at my previous employer, American Well. It was the first place I worked at where they were making heavy use of Ajax. They were big fans of the DoJo Toolkit, particularly the dijit widgets that DoJo offers. Throughout the application there are a large number of interstitial forms that were presented in Ajax Modal Panes. You know, those modal layers that aren't popups that pop new windows, but rather a new layer. Well anyway, whenever we had one of those modal layers with a form element in it (typically <input>), the cursor would not appear inside the field.

It was a small company, and whenever something was a pixel off, or didn't look quite as it should, they would come to me. Well, thanks to some Google searching I found out that there was nothing wrong with our code.

It turns out it is a well documented bug in FireFox:

• Bug 167801 - Cursor (caret) sometimes fails to appear in input text fields (shown/painted in wrong widget)

Great! I'm not crazy. I found the solution that worked for me at the bottom of page one of this message board:

• Ext JS Forums: Infamous Firefox cursor bug - Info and possible workarounds

I tried the simplest fix which was to wrap the <input> elements in a <div> and apply the following styles to that <div>:

{
  overflow:auto
  }

I may have also set { position: fixed; }. I can't remember.