Why's my image stuck in place.

[WebNinja]

So I'm using divs to layout a page and position some images. I'm realy getting the hang of CSS. But I've got a problem. One of my images is unresponsive to adjustment of it location on the page.

HTML: Select all

<div id="working-pic"><img class="working-pic" src="...working-pic.gif"></div>
<div id="broken-pic"><img class="broken-pic" src="...broken-pic.jpg"></div>

Code: Select all

#working-pic
{
    position: relative;
    left: 0em;
    top: -5em;
    width: 50em;
    height: 2em;
    color: #000000;
    font-size: 1em;
}
img.working-pic
{
    width: 50em;
    height: 2em;
}

#broken-pic
{
    position: relative;
    left: 10em;
    top: 50em;
    width: 30em;
    height: 50em;
}
img.broken-pic
{
    width: 30em;
    height: 50em;
}

What do you think?

[drd]

Have you tried position: absolute instead of relative?
note the container will need to be position:relative otherwise the screen will be used as the reference for your top and left values.

[Ryan Fait]

Try using margin instead of positioning.

Code: Select all

#working-pic
{
    margin: -5em 0 0 0;
    width: 50em;
    height: 2em;
    color: #000;
    font-size: 1em;
}

[WebNinja]

After some re-coding, I figured out what was wrong. My div ID began with a number. Firefox dosen't like that. I might not have figured it out had I not made this post and changed the filenames.

Thanks guys!