Different Image position in different browsers

[Sam_M]

I'm new to the web designing. I posted following HTML code:

<div class="weebly_header"><img style="position:absolute; top:8%; left:12%; width:363px; height22px" src="/files/theme/Logo.jpg" alt="Logo"></div/>

The logo of my site is an image. The image alignment is ok in my computer (IE:7), but changes a bit in google chrome and firefox 3.5. When I do browser compatibility test, then in different versions of IE and Safari, the impage positioning is quite different.

Can someone help?

Thanks!

[swa66]

Absolute positioned element use as reference the closest parent that has gained position. Gaining poisition is done by elements that have "position: relative" or are absolutely positioned themselves.
In the absence of such a parent: the viewport is used.

So it all depends what is used as reference.

Also some elements have by default padding and margins in browsers and it's not the same across different browsers: try resetting it with:

* {
 padding:0;
 margin:0;
}

In general mixing % values and px values can easily lead to unwanted effects if you don't have enough control of it all (like e.g. the size of the viewport).

BTW: validate your CSS; e.g. "height22px" is a syntax error, should be "height:22px"