positioning in Opera and IE

Can the slight differences be corrected?

[Birdman]

I'm working on a layout that has a line under the banner that I want to curve and go straight down the page and act as a divider for nav and content.

I put the line with the 90 arc in the banner image and then created a small image with the same color as the underline. Next, I absolutely positioned a div{with background: url()} to match up to the curve.

It looks good in IE, but Opera positions it about 5px too high and 10px to the left. Is there any way around this?

Also, the div doesn't even show in NN4. I checked, and the background image is supposed to be supported in NN.

Thanks in advance :)

[chameleon]

Birdman - I'm not sure I exactly understand your question, but maybe this will help:

IE, Opera and Netscape have different Margin widths. It could be that's what's messing you up. Try setting the margins to zero, then position everything relative to that. Then it should line up correctly on all platforms.

Good luck!

[Birdman]

chameleon, thank you! I had thought that was the prob. I already had body margin set to zero. After reading your post I went back and messed with it some more.

.banner
{
position: absolute;
border: none;
width: 600px;
height: 80px;
margin-left: 100px;
margin-top: 0px;
}

I removed the "margin-" and voila. I can never remember whether to use [/b]margin-left[/b], padding-left, or just left. It is looking good now. Thanks again.

<added>Now the banner is aligned tight to the left in NN4 :0

[pageoneresults]

If I'm not mistaken, there is another fix for this issue and that is to set both padding and margin to 0px.

{margin:0px;padding:0px;}

[Nick_W]

That's right. The body element also has padding in Opera which always throws me ;)

Nick

[Birdman]

I'm glad I took the CSS-XHTML step. It's been challenging, but the benefits far outweigh the alternatives. After my first site(tables, of course), I realized(after hangin' out here, of course) that pure CSS layout was the way to go.

I could still use some clarification on the difference of {margin-left and left}. Is that shorthand?

<added>Thanks, pageone

[starway]

margin-left and left are two completely different things.

"The left property sets the physical distance of how far the left content edge of an element is to the right from the left content edge of the containing block."

Check this out:
[devguru.com...]

[chameleon]

You're welcome, Birdman. Glad to see your problem was solved!