Welcome to WebmasterWorld Guest from 54.227.72.69

Forum Moderators: open

Message Too Old, No Replies

positioning in Opera and IE

Can the slight differences be corrected?

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

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Apr 22, 2002
posts:2546
votes: 0


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 :)

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

Junior Member

10+ Year Member

joined:July 9, 2002
posts:134
votes: 0


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!

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

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Apr 22, 2002
posts:2546
votes: 0


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

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

Senior Member from US 

WebmasterWorld Senior Member pageoneresults is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Apr 27, 2001
posts:12169
votes: 56


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;}

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

Senior Member

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

joined:Feb 4, 2002
posts:5044
votes: 0


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

Nick

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

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Apr 22, 2002
posts:2546
votes: 0


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

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

Junior Member

10+ Year Member

joined:June 20, 2002
posts:115
votes: 0


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...]

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

Junior Member

10+ Year Member

joined:July 9, 2002
posts:134
votes: 0


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