Div problem position pic for both IE and Safari

[Dirtyboy]

Hi,

I'm using layers (via div style) to position a pic. The problem is that the pic will like perfectly fine in IE, but in Safari, the pic is shifted 5 pixels to the right. I can't figure out if there's a way so that I can get the pic positioned perfectly in both browsers. Does anyone have a suggestion?

Here's an excerpt of what I have...

<style type="text/css">

div.main{
position: absolute;
top: 20px;
left: 50%;
margin-left: -400px;
width: 800px;
height: 350px;
z-index: 100;}
</style>

<div id="main" class="main"><img src="http://www.example.com/image.jpg">

[edited by: DrDoc at 2:31 pm (utc) on Aug. 20, 2004]
[edit reason] Examplified URL. See TOS [WebmasterWorld.com] [/edit]

[SuzyUK]

Hi Dirtyboy - Welcome to WebmasterWorld

Guesswork here..
is the div class="main" nested inside something else which has padding or border?

if so could you post the nested divs with their relevant CSS.. I don't know safari but I'm tending to think it might be the good ol' IE Box model.

Suzy

[Dirtyboy]

It's not nested in anything else.

[createErrorMsg]

Is it IE for Mac or Win?

the pic is shifted 5 pixels to the right

Since your <div> is positioned using a left value of 50%, I wonder if the browsers are calculating that 50% distance differently.

Perhaps IE is applying a margin somewhere that is making it's halfway point offset a bit from Safaris. (I know NOTHING about Safari, but I do know IE occasionally adds different default margins from other browsers.)

Maybe you could try setting the image margin and padding to 0?

Or maybe one browser is displaying a vertical scrollbar and the other is not?

[Dirtyboy]

I tried changing the values to 0. I still have the shift. I have no idea why this takes place.

Is there a way to create two separate codes, one for IE, one via mozilla (since Safari works off of that) and not have them conflict?

Or is there something else I'm not catching?

[Span]

Did you eliminate html and body margins and paddings?

html,body {
margin:0;
padding:0;
}

[Dirtyboy]

I have my top margin set at 225px (which needs to be that way). I tried setting it to 0 and the padding also to 0 just to test it ou...but I get the same result.

body {
margin 0px;
padding: 0px;
background-color: 000000;}

[pixelkat]

images are inline css elements. makes them harder to control. try adding "display: block" to the image element in the stylesheet.

in addition, vertical-align only works on block elements which should help you better define the image space.

kat

[createErrorMsg]

vertical-align only works on block elements

Actually, it's the opposite. CSS vertical-align applies to inline elements, defining where, in the vertical inline space, the element's content appears. It does NOT align element content in the vertical space of block elements as the deprecated v-align HTML attribute once did.

From the W3C:

This property affects the vertical positioning inside a line box of the boxes generated by an inline-level element.

[Dirtyboy]

Hmmm...okay. So what should I try next?-