Margin and Padding Properties

[Toronto Web Designer]

I'm having trouble with the padding and margin properties. IE tends to be
happier with the padding and Netscape with the margin property.

So I tried this:

<link href="netscape-styles.css" rel="stylesheet " type="text/css">

<style type="text/css">
@import url(ie-styles.css);
</style>

But it doesn't work. It actually makes both browsers display things the
same but it's still wrong. Any thoughts?

[Roderik]

Toronto Web Designer wrote:

I'm having trouble with the padding and margin properties. IE tends to be
happier with the padding and Netscape with the margin property.

So I tried this:

<link href="netscape-styles.css" rel="stylesheet " type="text/css">

<style type="text/css">
@import url(ie-styles.css);
</style>

But it doesn't work. It actually makes both browsers display things the
same but it's still wrong. Any thoughts?

@import works in both browsers. Only NN4 (but that is an old one, won't
import this). You'd better post your page with the question concerning
the padding/margin in case of using such a work around.

--
http://www.archytas.nl/
webdesign, internet applicaties, internetgestuur de elektronica

[Steve Pugh]

"Toronto Web Designer" <to************ ****@yahoo.ca.i nvalid> wrote:

I'm having trouble with the padding and margin properties. IE tends to be
happier with the padding and Netscape with the margin property.
Which versions of IE and Netscape? What are your exact problems?
So I tried this:

<link href="netscape-styles.css" rel="stylesheet " type="text/css">

<style type="text/css">
@import url(ie-styles.css);
</style>

But it doesn't work.
You mean the browsers don't use _both_ stylesheets?
That's the only definition of 'works' that can be given to the above
code snippet.

Some older browsers (Netscape 4.x for example) don't understand
@import so using the above syntax hides the second style sheet from
those browsers. But all modern browsers will apply both stylesheets.
So if you want to over ride the first one you need to include explicit
styles in the second that over ride styles in the first.
It actually makes both browsers display things the
same but it's still wrong. Any thoughts?

Explain what the actual problem is and post a URL.

Steve

--
"My theories appal you, my heresies outrage you,
I never answer letters and you don't like my tie." - The Doctor

Steve Pugh <st***@pugh.net > <http://steve.pugh.net/>

[Toronto Web Designer]

Alo,

"Roderik" <ma**@roderik.n et> wrote in message
news:40******** **************@ dreader2.news.t iscali.nl...
(snip)

You'd better post your page with the question concerning the

padding/margin in case of using such a work around.

Sample 2 is the intended presentation format but doesn't look good in
Netscape.
http://www.geocities.com/torontowebdesigner/sample2.htm without @import

This page is not as intended in both Netscape of IE
http://www.geocities.com/torontowebdesigner/ with @import

The main problem is indents: the ol element and the third end note is
indented to the right.

The CSS validates. The HTML doesn't. If it has to do with the HTML then I
want to know about it but if it doesn't, I already know that the HTML isn't
valid on these pages.

[Toronto Web Designer]

Hi Steve,

"Steve Pugh" <st***@pugh.net > wrote in message
news:u3******** *************** *********@4ax.c om...

"Toronto Web Designer" <to************ ****@yahoo.ca.i nvalid> wrote:

I'm having trouble with the padding and margin properties. IE tends to be
happier with the padding and Netscape with the margin property.

Which versions of IE and Netscape? What are your exact problems?

IE 6 and Netscape 7. The URL and problems are listed under Roderik's
query... within the thread.

[Roderik]

Toronto Web Designer wrote:

Alo,

"Roderik" <ma**@roderik.n et> wrote in message
news:40******** **************@ dreader2.news.t iscali.nl...
(snip)

You'd better post your page with the question concerning the

padding/margin in case of using such a work around.

Sample 2 is the intended presentation format but doesn't look good in
Netscape.
http://www.geocities.com/torontowebdesigner/sample2.htm without @import

This page is not as intended in both Netscape of IE
http://www.geocities.com/torontowebdesigner/ with @import

The main problem is indents: the ol element and the third end note is
indented to the right.

The CSS validates. The HTML doesn't. If it has to do with the HTML then I
want to know about it but if it doesn't, I already know that the HTML isn't
valid on these pages.

Well, the geocities generated html is crap, but when I put it without
geocities stuff on my host it gives the same result. At least the second
listitem on the bottom is really weird. Maybe you should try to apply
the padding of the ol to the listitems. The @import statement is only
invisible for nn4 so most netscape users will get the same styles served
as ie users.

--
http://www.archytas.nl/
webdesign, internet applicaties, internetgestuur de elektronica

[Steve Pugh]

"Toronto Web Designer" <to************ ****@yahoo.ca.i nvalid> wrote:

"Steve Pugh" <st***@pugh.net > wrote:

"Toronto Web Designer" <to************ ****@yahoo.ca.i nvalid> wrote:

>I'm having trouble with the padding and margin properties. IE tends to be
>happier with the padding and Netscape with the margin property.

Which versions of IE and Netscape? What are your exact problems?

IE 6 and Netscape 7. The URL and problems are listed under Roderik's
query... within the thread.

Are you and Roderik the same person? I'm very confused, which one of
you is having the problem? As far as I could see your post was
starting a new thread - no In-Reply-To header on your post.

Steve

--
"My theories appal you, my heresies outrage you,
I never answer letters and you don't like my tie." - The Doctor

Steve Pugh <st***@pugh.net > <http://steve.pugh.net/>

[Steve Pugh]

"Toronto Web Designer" <to************ ****@yahoo.ca.i nvalid> wrote:

"Steve Pugh" <st***@pugh.net > wrote:

"Toronto Web Designer" <to************ ****@yahoo.ca.i nvalid> wrote:

>I'm having trouble with the padding and margin properties. IE tends to be
>happier with the padding and Netscape with the margin property.

Which versions of IE and Netscape? What are your exact problems?

IE 6 and Netscape 7. The URL and problems are listed under Roderik's
query... within the thread.

I hope my other message got cencelled quickly enough - my brain's not
quite working yet.

Your problem is with lists - different browsers set the margins and
padding on lists in different ways. So you need to set all four
properties explicitly. In youe case you want the numbers to align with
the edge of the paragraphs.
ol {margin-left: 10%; padding-left: 0;}
li {margin-left: 1.3em; padding-left: 0;}
That should get the same alignment (within a few pixels) in all modern
browsrs.

No need to muck about trying to feed different stylesheets to
different browsers.

Steve

--
"My theories appal you, my heresies outrage you,
I never answer letters and you don't like my tie." - The Doctor

Steve Pugh <st***@pugh.net > <http://steve.pugh.net/>

[Brian]

Toronto Web Designer wrote:

padding/margin in case of using such a work around.

Sample 2 is the intended presentation format but doesn't look good
in Netscape. http://www.geocities.com/torontowebdesigner/sample2.htm without
@import

The CSS validates. The HTML doesn't. If it has to do with the
HTML then I want to know about it
There's no way to know if the HTML is causing the problem or not until
you fix it. That is always the first step. CSS is optional. HTML is
the core of your page.
I already know that the HTML isn't valid on these pages.

If you knew that, you should have fixed it before asking here.
Validate, then come back if you're still having problems.

--
Brian (remove ".invalid" to email me)
http://www.tsmchughs.com/

[Roderik]

Brian wrote:

Toronto Web Designer wrote:

padding/margin in case of using such a work around.

Sample 2 is the intended presentation format but doesn't look good
in Netscape.

http://www.geocities.com/torontowebdesigner/sample2.htm without
@import

The CSS validates. The HTML doesn't. If it has to do with the
HTML then I want to know about it

There's no way to know if the HTML is causing the problem or not until
you fix it. That is always the first step. CSS is optional. HTML is
the core of your page.

I already know that the HTML isn't valid on these pages.

If you knew that, you should have fixed it before asking here.
Validate, then come back if you're still having problems.

I fixed the HTML for him. He can't do it himself at geocities because
geocities servers add invalid html to your pages when serving them.
You can find it here: http://www.top100nederland.net/test/geocities.htm
But strange things happen to the listitems on his page when styling them
(for example see the bottom of the page in Mozilla).

--
http://www.archytas.nl/
webdesign, internet applicaties, internetgestuur de elektronica