Wordpress Themes - WP Forum at BFA - Relative positioned footer image being rendered inconsistently

Wordpress Themes - WP Forum at BFA (http://forum.bytesforall.com/index.php)

- Atahualpa 3 Wordpress theme (http://forum.bytesforall.com/forumdisplay.php?f=2)

- - Relative positioned footer image being rendered inconsistently (http://forum.bytesforall.com/showthread.php?t=21181)

Relative positioned footer image being rendered inconsistently

Please Click here to see the page in question.

At the bottom of the page you will hopefully see some pink bunting (those triangle flags on a string.) I want the bunting to appear as though it is hanging from the top of the footer (the top of the green box) extending below the green box.

It looks correct on one of my computer screens, but on the others, it is appearing at three different places, as if it were absolute positioned. It is relative positioned, so how do I ensure that it renders in the same spot on every screen?

I wonder if this is because the HTML is placed in the wrong place? It is currently at "HTML Inserts: Body Bottom", because when put in "Footer: Content", the green box is stretched vertically to envelope it.

If this is not the issue, is it something with the CSS?

HTML:

Code:

<div id="footer-flag"><img src="http://www.p-is-for-party.com/blog/wp-includes/images/footer-flag.png"></div>

CSS:

Code:

#footer-flag {

position: relative;

width: 0px;

left: 650px;

top: -105px;

text-align: right;

}

Put your div in the ato->Style & edit FOOTER->Footer: Content then play with the positioning

I've done so; if you look now you'll see that the footer, in green, has now stretched to accommodate the image. What I want is for the image to appear as if it's on top of the green box, which should be just 30px high....see the problem?

So why not make the image with a 30px green background?

The image of the bunting has NO background -- it is transparent. I do not want it to have a background at all. What I need is to have a 30px-high horizontal green band in the footer, and then to visually layer the bunting on top so that it looks as though it is hanging from the top edge of the green band. Does that make sense?

By putting the code for the bunting in the footer, the green band which is supposed to be only 30px high stretches to around 200px high. I need to know where in Atahualpa to insert the html for the bunting.

There isn't an easy way to add a background color of one height and an image of another height. You are going to have to experiment with CSS or simply add a green bar to the image - the least time consuming option I can think of.

You could try something like the following and fiddle with top, bottom, left, right to postion.

HTML Code:

#footer-flag img {

    position: absolute;

    top: 0;

}