473,560 Members | 2,965 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

Margin and Padding Properties

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?
Jul 20 '05 #1
18 2941
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
Jul 20 '05 #2
"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/>
Jul 20 '05 #3
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.
Jul 20 '05 #4
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.
Jul 20 '05 #5
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
Jul 20 '05 #6
"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/>
Jul 20 '05 #7
"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/>
Jul 20 '05 #8
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/
Jul 20 '05 #9
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
Jul 20 '05 #10

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

4
30789
by: Ted Mencini | last post by:
I would like to place a table <TABLE>...</TABLE> in such a way on a web page that the margin left of it is exactly 80 pixels. Furthermore the width of the table should be 90% of the rest of the browser window (=the right part except the 80 pixels). How do I specify these properties in a HTML code? Ted
3
2161
by: stan | last post by:
I have code that produces 5 boxes across the screen width. So far I have only tested it in IE 6 and NS 8. It works in IE, but in NS I am not able to fit in the 5th box. I am using two different style sheets, one for IE and on e for NS. The box widths are set to 20%. I would appreciate suggestions on how to get the 5 boxes to fit the...
10
12887
by: Alan Silver | last post by:
Hello, In my (seemingly) endless quest to understand CSS, I have yet another problem. Please look at http://www.kidsinaction.org.uk/ph/x.html in Opera, where you will see it how I expected. If you look at it in IE (6 or 7), you find it also looks fine, except for the top margin missing from the links across the top of the page. That's not...
3
2086
by: Luciano A. Ferrer | last post by:
this is really strange... I cant find what is wrong... so, #botonera have a left margin of 18px, but IE make it 36px! If I put a margin of 30px, IE make it 60px! I am crazy? <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml">
11
6854
by: sllrphoto | last post by:
A veteran of early html, I've modified my blog template and made it look rather clean (albeit rather plain) when viewed with IE. Ironically, I'm a big Firefox fan, but when viewed in FF, my blog leaves a lot to be desired. The blog (which is at http://lazycomic.blospot.com/ ) is a basic two column style, with the right column being the...
19
6460
by: Edward | last post by:
Why is it when I have a DOCTYPE line in my HTML then "margin" and "padding" are ignored? This happens in both inline and stylesheet styles. It happens for both XHTML and HTML doctypes. It happens in IE6, IE7 and Firefox (didn't try any others). And when you save the page, the margin/paddings are actually REMOVED from the saved HTML file...
3
4123
by: J055 | last post by:
Hi I want to add some css rules to the this.Header.StyleSheet property. I need to add margin and some other css properties but the Style class doesn't support them. What is the best way or some other options to do this? // Create a Style object for the body of the page. Style style = new Style(); style.Width = val; style.Margin-Left =...
1
2241
by: superDk | last post by:
Hello, IE6 is adding a large margin between my two containers (container1 & container2) everything works fine in IE7 and Firefox. I've been searching on-line for a fix but I've had no luck. It would make my day if someone could help me with this. website- http://www.00dogtraining.com/ Thanks for any help, Dave css code:
1
3103
by: innivive | last post by:
I am having a problem with having margins display correctly in IE7, Firefox and Safari. I am not sure if it is the "double margin error" or something else. Any help would be appreciated. The file tabs at the top content area should be flush left and the light blue frame should line up under the logo graphic. Looks great in Safari and Firefox...
0
7632
marktang
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However, people are often confused as to whether an ONU can Work As a Router. In this blog post, we’ll explore What is ONU, What Is Router, ONU & Router’s main...
0
8066
jinu1996
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven tapestry of website design and digital marketing. It's not merely about having a website; it's about crafting an immersive digital experience that...
1
7596
by: Hystou | last post by:
Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows Update option using the Control Panel or Settings app; it automatically checks for updates and installs any it finds, whether you like it or not. For...
0
7920
tracyyun
by: tracyyun | last post by:
Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each protocol has its own unique characteristics and advantages, but as a user who is planning to build a smart home system, I am a bit confused by the...
0
6191
agi2029
by: agi2029 | last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing, and deployment—without human intervention. Imagine an AI that can take a project description, break it down, write the code, debug it, and then...
1
5458
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new presenter, Adolph Dupré who will be discussing some powerful techniques for using class modules. He will explain when you may want to use classes...
0
5175
by: conductexam | last post by:
I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and then checking html paragraph one by one. At the time of converting from word file to html my equations which are in the word document file was convert...
0
3585
by: adsilva | last post by:
A Windows Forms form does not have the event Unload, like VB6. What one acts like?
1
1169
muto222
by: muto222 | last post by:
How can i add a mobile payment intergratation into php mysql website.

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.