div and image alignment issue with FF and IE

[thisguychris]

I am creating a div overlay page for a myspace account.
I have successfully created the graphics and now am coding them accordingly.

An issue I'm running into is that a floating image (Friends and Comments image) is appearing in the correct spot in my FF browser, but when i check for consistency in IE, the image is slightly off to the right.
The same for the main body image, it appears correctly in FF but slightly higher in IE.

Is this a compatibility issue between browsers or is there something im just not aware of?

here is the code im using for the floating image

<div class="background">
<img src="
http://example.com/image.jpg
" style="width:422px; height:50px; position:absolute; top:660px; left:205px; </img>
</div>

[edited by: tedster at 3:16 am (utc) on July 19, 2009]
[edit reason] no personal urls, please [/edit]

[tedster]

Hello Chris, and welcome to the forums.

Unfortunately, myspace source code can be a real mess - and yes, there certainly are significant differences between browsers - especially when (as is the case with myspace) there is no doctype.

Since you are struggling with image position, there may be a problem with either the default padding or margin across browsers.

Also, a lot may depend on what you hope to align those images with. For instance, if there is any text involved, different browsers may be rendring the fonts with just enough difference to throw things off.

At any rate, do check out this thread: [webmasterworld.com...] - It offers help on how to discuss your questions and stay within our forum guidelines. That thread is pinned to the top of the HTML forum's index page for easy reference.

[thisguychris]

one question i have is what is the difference between pressing F5 or just refreshing the page? Because when i do both it produces different results. I'll hit the refresh button once or twice, andthen on the 3rd time the image will be slightly off, and then go back to the right spot on the 4th try.
also theres no text involved in what im trying to align, it it entirely image based.

[tedster]

That sounds like you might be getting a partial page load some times.

I just took a better look at the source code you pasted into your opening post - there are some errors. The opening img tag has no closing angle bracket, and the style attribute has no close quote. I'd also suggest not placing line breaks within a tag.

<div class="background">
<img src="http://example.com/image.jpg" style="width:422px; height:50px; position:absolute; top:660px; left:205px;" />
</div>

The div.background CSS rules may also be playing into the final position of the rendered image - with each browser using a different default padding and margin. If those values are not specifically set already, try doing that.

[thisguychris]

well i seemed to have fixed it somehow, not quite sure what i did.

but heres an example in a another page i did.

< url removed >

in this case the floating hyperlinks appear to be in the correct spots in IE but not in FF. and the girl whos layout this is uses Safari on a Mac and they arent working for her as well.
Would you suggest image slices for links instead of floating clear hyperlinks?

[edited by: tedster at 5:51 am (utc) on July 20, 2009]

[thisguychris]

my page now appears to be working just fine across FF and IE

[edited by: tedster at 5:52 am (utc) on July 20, 2009]
[edit reason] url removed [/edit]