Margin problem with different browsers.

[crazy4cs]

This user has been denied support.

Alright,

It's been getting over my head now, I tried many things but it's not getting to work.

The thing is, I'm aligning an image to top right corner and it displays correct according to my display (1600 x 900 resolution).

Here is the code for it:

<span style="float: right; background: #333333; border-right: 1px solid #454545; border-left: 1px solid #454545; border-bottom: 1px solid #454545; margin-top: -10.1%; margin-right: -1.9%; padding: 0.4%;"><a href="#" onclick="MyBB.popupWindow('http://www.ubers.org/pokes.php', 'pokes', 500, 350);"><img src="images/Ub3r/poke.png" alt="nopokes" title="You have no new pokes" /></a></span>

But for lower and higher resolutions, it's not aligned properly. And even more great, IE doesn't even display the image but just that square box made up of CSS properties in above code; but the source shows that image is present, in IE.

I've actually tried doing a lot of searching, tried somethings, but couldn't got to work. If you've any experience working with margins, it would be appreciated.

[Eric]

Well, you shouldn't be using a percent on margin-right anyways (I guess there might be certain instances, like progress bars maybe?), as it will differ depending on the user's screen. For example, if you position something 10% from the right, on a 1600 x 900 the margin would be margin-right: 160px. However if they were on a 1024 width monitor, they would see margin-right: 102.4px. In other words, it could be in a completely different place, even in the same container (Obviously you know that, as you know what percent is, just pointing it out in case xP).


That said, I think this is an issue of using span > div. Spans are inline elements which means margin/padding top and bottom won't work, while divs are block elements. Switch to div and see if that fixes your issue.

[crazy4cs]

This user has been denied support.

Had to try a lot of things and other way out. I tried using em as unit instead of % or px. Though very low resolutions like 800 x 600 has bottom aligned a bit, but mostly all resolutions from 1024 x 768 works fine.