Difference in css position IE/FF, how to solv my problem?

I've made some divs and it works as intended in firefox.

But not in internet explorer 8.

Anyone have a tip?

structure is like this:

<div id="imgntxt">

    <div id="imgntxtImg">

        <div id="imgntxtNav1"></div>
        </div>

    <div id="imgntxtText">text</div>

</div>

imgContainer gets a image as background by some javascript magic.

css:

#imgntxt
{   
    padding: 2px;

    width: 200px;
}

#imgntxtImg
{
    position: relative;
}

#imgntxtText
{
}

#imgntxtNav1, #imgntxtNav2
{开发者_如何学运维
    position: absolute;

    right: 2px;

    bottom: 0;

    background: transparent url("next.png") no-repeat top left;

    height: 16px;
    width: 16px;
}

#imgntxtNav2
{
    right: 19px;

    background: transparent url("prev.png") no-repeat top left;
}

I can 100% sure since the amount of code your add its not complete, but I think that what its playing you up its the position:absolute in #imgntxtNav1, #imgntxtNav2. If I am wrong please give more detail.

Did you try locate the images on top instead of bottom?

#imgntxtNav1, #imgntxtNav2
{
  position: absolute;
  right: 2px;
  top: 0;
  ...
}

Also, why don't you place the images for the navigation in the html directly?
That sounds not only easier but also more correct.