Welcome to WebmasterWorld Guest from 107.20.59.213

Forum Moderators: open

Message Too Old, No Replies

positioning in Opera and IE

Can the slight differences be corrected?

     

Birdman

7:41 pm on Sep 4, 2002 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



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

7:54 pm on Sep 4, 2002 (gmt 0)

10+ Year Member



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

8:20 pm on Sep 4, 2002 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



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

8:52 pm on Sep 4, 2002 (gmt 0)

WebmasterWorld Senior Member pageoneresults is a WebmasterWorld Top Contributor of All Time 10+ Year Member



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

8:59 pm on Sep 4, 2002 (gmt 0)

WebmasterWorld Senior Member nick_w is a WebmasterWorld Top Contributor of All Time 10+ Year Member



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

Nick

Birdman

6:00 am on Sep 5, 2002 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



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

6:44 am on Sep 5, 2002 (gmt 0)

10+ Year Member



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

2:25 am on Sep 6, 2002 (gmt 0)

10+ Year Member



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

Featured Threads

Hot Threads This Week

Hot Threads This Month