Odd Firefox scrolling problem

I just ran into a rather odd error that I've never encountered before.... I have two separate absolutely-positioned elements that are scrolling as if they were position:fixed. I'm not quite sure why this is happening... Could anyone help?
Thanks!

srhsmustangband.com

Edit: And this only occurs in Firefox
Edit 2: Apparently this issue isn't just firefox

it appears the img id you have set for the trumpet is "trumpet" and position is stated as fixed


#trumpet {
position:fixed;
margin-top:400px;
margin-left:700px;

}


change fixed to absolute

it appears the img id you have set for the trumpet is "trumpet" and position is stated as fixed


#trumpet {
position:fixed;
margin-top:400px;
margin-left:700px;

}


change fixed to absolute
That's in the overall.css file. On the index.css file, it says position:absolute. I even tried changing the id (because trumpet is fixed in the overall.css file) but that didn't fix it.

Edit: And apparently this issue isn't in just Firerox...

you shouldnt have classes or id's named the same and instead of using margin-top and margin-left (since you are already using a position), use top and left!

you shouldnt have classes or id's named the same and instead of using margin-top and margin-left (since you are already using a position), use top and left!

They're on different pages. Overall.css is included on every page and index.css is only for the index page.

Anyways, I tried using top and left, but it didn't fix the problem. I can't use those because I want the elements to stay where they are no matter the size of the user's display. Using top and left would put them relative to the screen. I guess I could use percentages, but either way, the problem remains.

use following code. It will resolve your issue:


#main_content {
text-align: left;
position:relative;



}

use following code. It will resolve your issue:


#main_content {
text-align: left;
position:relative;



}



Wow, that worked! Thanks!