I'm having difficulities positioning text over an image. Specifically, I am trying to position the text within each <div> to the topleft of each image within that <div>.

The following works as I want it to in IE6, but the text is not properly positioned in Mozilla 1.4.

A test page can be found here:

http://members.rogers.com/db-ls/test/textoverimage.html


CSS:
HTML Code:
  <style type="text/css'>
  #navtabs  { width: 190px; }
   .navtab { position: relative; height: 19px; width: 190px;  margin-bottom: 1px; }
   .navtab img { cursor: pointer; }
   .navtab p {  position: absolute; float: left; left: 0px; top: 0px; z-index: 10; cursor: pointer; }
  </style>

HTML:

HTML Code:
  <div id="navtabs">
 <div class="navtab"><img src="images/navtab_1.gif" id="navtab_1" alt="" width="190" height="19"><p>link 1</p></div>
 <div class="navtab"><img src="images/navtab_2.gif" id="navtab_2" alt="" width="190" height="19"><p>link 2</p></div>
 <div class="navtab"><img src="images/navtab_3.gif" id="navtab_3" alt="" width="190" height="19"><p>link 3</p></div>
  </div>