I ran into a strange problem. I use DIV as a container, and put an image into this DIV. I want this image to be aligned vertically to bottom. The following code works.

#banner { 
  width: 700px; 
  height: 90px; 
  top: 60px; 
  left: 178px; 
  overflow: hidden; 
  text-align: center; 
  display: table-cell; 
  vertical-align: bottom; 
  position: relative;
}

<div id="banner">
  <img src="http://www.google.de/intl/de_de/images/logo.gif"/>
</div>

But if I change the css code "position: relative" to "position: absolute", the image cannot be aligned to bottom any more. Is this a bug of Firefox3? How can I solve this problem?

My current solution is:

<div id="banner">
  <table width="100%" height="100%"><tr><td valign="bottom" align="center">
  <img src="http://www.google.de/intl/de_de/images/logo.gif"/>
  </td></tr></table>
</div>

But I do not like this solution.

css alignment position
Edit
Report