By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
440,487 Members | 1,067 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 440,487 IT Pros & Developers. It's quick & easy.

when I use DOCTYPE, margin and padding are ignored

P: n/a
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 (!).

Why is this?

Here you can see the problem:
http://www.tanguay.info/cssissues/xh...ithDoctype.htm

And here there is no DOCTYPE line and so the page is fine:
http://www.tanguay.info/cssissues/xh...outDoctype.htm

Here is my HTML (Valid XHTML 1.0 Strict):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://
www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Example of DOCTYPE / inline margin issue</title>
<link href="xhtmlMarginIssue.css" type="text/css" rel="stylesheet"/>
</head>
<body>

<p>Because I have a DOCTYPE on this page, the <b>margin</band
<b>padding</bstyles are ignored. Why?<br/>
<a href="xhtmlMarginIssueWithoutDoctype.htm">If I take the DOCTYPE
line out then it works.</a></p>

<div style="margin: 20 20 20 20;background-color:#ddd;font-size:
24pt;color:red;padding: 100 100 100 100">inside inline-css div </div>
<p>First sentence outside the divs. </p>

<div class="message">inside stylesheet-css div</div>
<p>Second sentence outside the divs.</p>

</body>
</html>

Mar 20 '07 #1
Share this Question
Share on Google+
19 Replies


P: n/a
Scripsit Edward:
Why is it when I have a DOCTYPE line in my HTML then "margin" and
"padding" are ignored?
Because browsers generally behave better (in a more standards-conforming
way) when a suitable DOCTYPE declaration appears at the start of the
document. Google for "quirks mode" or go directly to
http://www.quirksmode.org/css/contents.html for explanations.
<div style="margin: 20 20 20 20;background-color:#ddd;font-size:
24pt;color:red;padding: 100 100 100 100">inside inline-css div </div>
A conforming browser _must_ ignore the margin and padding rules, since the
specified values are syntactically malformed (no unit symbol after number).
Of course, this is just the top of the iceberg. Normally you shouldn't use
pixel values but em values for margin and padding.

--
Jukka K. Korpela ("Yucca")
http://www.cs.tut.fi/~jkorpela/

Mar 20 '07 #2

P: n/a
On 20 Mar, 11:51, "Edward" <edw...@tanguay.infowrote:
Why is it when I have a DOCTYPE line in my HTML then "margin" and
"padding" are ignored?
Wrong question. Ask instead, "Why is it that when I _don't_ use a
doctype declaration, the browser tries to guess at what grossly
invalid CSS ought to mean and uses that."
<div style="margin: 20 20 20 20;
You probably meant
<div style="margin: 20px 20px 20px 20px;

Always validate your HTML and CSS before posting questions.
It will often give you an answer immediately.

Mar 20 '07 #3

P: n/a
Always validate your HTML and CSS before posting questions.
It will often give you an answer immediately.
The above code validates fine at http://validator.w3.org which I
assumed was the end-all authority on HTML validation.

Does anyone know of a more accurate HTML validating service?
Mar 20 '07 #4

P: n/a
You probably meant
<div style="margin: 20px 20px 20px 20px;
Yes, the "px" identifiers fix it, thanks.
I'd picked up a bad habit along the way of not including them.

Edward Tanguay
All my projects: http://www.tanguay.info
Mar 20 '07 #5

P: n/a
On 20 Mar, 15:20, "Edward" <edw...@tanguay.infowrote:
Always validate your HTML and CSS before posting questions.
It will often give you an answer immediately.

The above code validates fine athttp://validator.w3.orgwhich I
assumed was the end-all authority on HTML validation.
It's valid HTML, but it's not valid CSS. You need to check both, and
usually have to do it separately.

I stongly recommend using Firefox and the latest HTML validator
extension.
http://users.skynet.be/mgueury/mozilla/
This includes a real HTML validator and also Tidy. Because it's
pervasive and automatic, it also gets used (unlike making the effort
to use the W3C).

Mar 20 '07 #6

P: n/a
I stongly recommend using Firefox and the latest HTML validator
extension.http://users.skynet.be/mgueury/mozilla/
This includes a real HTML validator and also Tidy. Because it's
pervasive and automatic, it also gets used (unlike making the effort
to use the W3C).
I installed that, seems to work fine, thanks.

I checked my above code at http://jigsaw.w3.org/css-validator and the
pixel errors shows up immediately, very nice.

I also found and installed this Firefox CSS validator addon (https://
addons.mozilla.org/firefox/2289) but realized that it simply goes
online to the above service and hences doesn't work for local files,
which would be nice when developing, like you say, so it is automatic
and actually gets used.

Do you know of any CSS validator addons for Firefox that check LOCAL
files?

Edward Tanguay
All my projects: http://www.tanguay.info
Mar 20 '07 #7

P: n/a
Edward schrieb:
Do you know of any CSS validator addons for Firefox that check LOCAL
files?
With the Web Developer Extension you can check local CSS (via uploading
the CSS to the W3C's CSS checker). Or do you mean checking while you're
not online?

--
Johannes Koch
Spem in alium nunquam habui praeter in te, Deus Israel.
(Thomas Tallis, 40-part motet)
Mar 20 '07 #8

P: n/a
With the Web Developer Extension you can check local CSS (via uploading
the CSS to the W3C's CSS checker). Or do you mean checking while you're
not online?
Checking local code while online is ok, I just want to be able to
check quickly as I develop.
I have the Web Developer Extension but under the CSS dropdown I only
find:

Disable Styles
Disable CSS by Media Type
View CSS
View Style Information
Add User Style Sheet
Edit CSS
User Border Box Model

Is there a selection somewhere to automatically upload the code to the
online CSS checker?

Edward Tanguay
All my projects: http://www.tanguay.info

Mar 20 '07 #9

P: n/a
Edward schrieb:
I have the Web Developer Extension but under the CSS dropdown I only
find:
[...]
Is there a selection somewhere to automatically upload the code to the
online CSS checker?
See in the Tools menu: Validate Local CSS

--
Johannes Koch
Spem in alium nunquam habui praeter in te, Deus Israel.
(Thomas Tallis, 40-part motet)
Mar 20 '07 #10

P: n/a
Lately I've seen quite a few references to using em instead of px for
margin and padding. Maybe you could explain this because it seems
counter intuitive. Let's say you design a page with a 20 em left and
right margin and the font is 1 em. Now a user comes along and and
needs the largest font size possible. They have their browser to show
text as 'Largest'.

Now, not only is the text largest, but the margins have also expanded.
Because em are used the margin and padding dimension are also larger.
The result is that the text is crunched into a smaller space.

Of course the opposite is true. The user uses 'Smallest' with the
result of shrinking margin and padding dimensions. Wouldn't you want
just the opposite.

It seems to me that whoever came up with this "use em instead of px
for margins and paddings" didn't think it through.

On Mar 20, 5:02 am, "Jukka K. Korpela" <jkorp...@cs.tut.fiwrote:
Scripsit Edward:
Why is it when I have a DOCTYPE line in my HTML then "margin" and
"padding" are ignored?

Because browsers generally behave better (in a more standards-conforming
way) when a suitable DOCTYPE declaration appears at the start of the
document. Google for "quirks mode" or go directly tohttp://www.quirksmode.org/css/contents.htmlfor explanations.
<div style="margin: 20 20 20 20;background-color:#ddd;font-size:
24pt;color:red;padding: 100 100 100 100">inside inline-css div </div>

A conforming browser _must_ ignore the margin and padding rules, since the
specified values are syntactically malformed (no unit symbol after number).
Of course, this is just the top of the iceberg. Normally you shouldn't use
pixel values but em values for margin and padding.

--
Jukka K. Korpela ("Yucca")http://www.cs.tut.fi/~jkorpela/

Mar 20 '07 #11

P: n/a
Scripsit li***********@gmail.com:
Lately I've seen quite a few references to using em instead of px for
margin and padding. Maybe you could explain this because it seems
counter intuitive.
Just hang around and you'll learn that, as well as how to post
constructively on Usenet (instead of upside-down fullquoting). For fast
learning, check past postings via Google Groups or the fine FAQs.
Let's say you design a page with a 20 em left and
right margin and the font is 1 em.
Then you've set the margins too large. Using fine units doesn't mean you can
use absurd numbers with them.
It seems to me that whoever came up with this "use em instead of px
for margins and paddings" didn't think it through.
For a person who started posting the way you did, you speculate too much on
other people's thinking.

--
Jukka K. Korpela ("Yucca")
http://www.cs.tut.fi/~jkorpela/

Mar 20 '07 #12

P: n/a
In article
<11**********************@e1g2000hsg.googlegroups. com>,
"Andy Dingley" <di*****@codesmiths.comwrote:
I stongly recommend using Firefox and the latest HTML validator
extension.
http://users.skynet.be/mgueury/mozilla/
This includes a real HTML validator and also Tidy. Because it's
pervasive and automatic, it also gets used (unlike making the effort
to use the W3C).
Thanks for mentioning this one. I will have it when I can solve
the following query:

At http://users.skynet.be/mgueury/mozilla/download.html there is
a 4 line instruction set and I am stumped by point 3. What
exactly does one need to do to "add the website to the authorized
list."? I run OS X on Tiger, PPC.

I ask here in case someone here has already done this, I have
also asked in a Mac group. You see how anxious I am to get it, it
is a good idea!

--
dorayme
Mar 20 '07 #13

P: n/a
li***********@gmail.com wrote:
Lately I've seen quite a few references to using em instead of px for
margin and padding.
It really depends on the design. em scales with text size. % scales with
window size. px are fine for padding and even margins, especially if
graphics are involved. Personally, I prefer % over em in a lot of cases.

You can mix units, but if you don't know what you're doing the layout
may suffer.

BTW, don't top post.
http://allmyfaqs.net/faq.pl?How_to_post

--
Berg
Mar 20 '07 #14

P: n/a
dorayme <do************@optusnet.com.auwrites:
In article
<11**********************@e1g2000hsg.googlegroups. com>,
"Andy Dingley" <di*****@codesmiths.comwrote:
>I stongly recommend using Firefox and the latest HTML validator
extension.
http://users.skynet.be/mgueury/mozilla/
This includes a real HTML validator and also Tidy. Because it's
pervasive and automatic, it also gets used (unlike making the effort
to use the W3C).

Thanks for mentioning this one. I will have it when I can solve
the following query:

At http://users.skynet.be/mgueury/mozilla/download.html there is
a 4 line instruction set and I am stumped by point 3. What
exactly does one need to do to "add the website to the authorized
list."? I run OS X on Tiger, PPC.
Bring up the FireFox preferences. In the "Security" pane, the "warn me
when sites try to install add-ons" should be checked. Click the button
to the right of that, labeled "Exceptions", and add "users.skynet.be"
to the list of sites that are, as the button's name implies, exceptions
to the normal rule and therefore allowed to install add-ons.

sherm--

--
Web Hosting by West Virginians, for West Virginians: http://wv-www.net
Cocoa programming in Perl: http://camelbones.sourceforge.net
Mar 20 '07 #15

P: n/a
Sherm Pendley <sp******@dot-app.orgwrites:
dorayme <do************@optusnet.com.auwrites:
>In article
<11**********************@e1g2000hsg.googlegroups .com>,
"Andy Dingley" <di*****@codesmiths.comwrote:
>>I stongly recommend using Firefox and the latest HTML validator
extension.
http://users.skynet.be/mgueury/mozilla/
This includes a real HTML validator and also Tidy. Because it's
pervasive and automatic, it also gets used (unlike making the effort
to use the W3C).

Thanks for mentioning this one. I will have it when I can solve
the following query:

At http://users.skynet.be/mgueury/mozilla/download.html there is
a 4 line instruction set and I am stumped by point 3. What
exactly does one need to do to "add the website to the authorized
list."? I run OS X on Tiger, PPC.

Bring up the FireFox preferences. In the "Security" pane, the "warn me
when sites try to install add-ons" should be checked. Click the button
to the right of that, labeled "Exceptions", and add "users.skynet.be"
to the list of sites that are, as the button's name implies, exceptions
to the normal rule and therefore allowed to install add-ons.
Oh, another way to do the same thing: When you click on one of the download
links, FF will create an alert banner at the top of the page. To the right
of the alert banner there's an "Options" button. Clicking that button will
bring up the exceptions list too, which the name of the current site already
filled in.

sherm--

--
Web Hosting by West Virginians, for West Virginians: http://wv-www.net
Cocoa programming in Perl: http://camelbones.sourceforge.net
Mar 20 '07 #16

P: n/a
In article <m2************@local.wv-www.com>,
Sherm Pendley <sp******@dot-app.orgwrote:
dorayme <do************@optusnet.com.auwrites
At http://users.skynet.be/mgueury/mozilla/download.html there is
a 4 line instruction set and I am stumped by point 3. What
exactly does one need to do to "add the website to the authorized
list."? I run OS X on Tiger, PPC.

Bring up the FireFox preferences. In the "Security" pane, the "warn me
when sites try to install add-ons" should be checked. Click the button
to the right of that, labeled "Exceptions", and add "users.skynet.be"
to the list of sites that are, as the button's name implies, exceptions
to the normal rule and therefore allowed to install add-ons.

Thanks Sherm, appreciate it.

--
dorayme
Mar 20 '07 #17

P: n/a
"Jukka K. Korpela" <jk******@cs.tut.fiwrote in message
news:r3*******************@reader1.news.saunalahti .fi...
Scripsit Edward:
><div style="margin: 20 20 20 20;background-color:#ddd;font-size:
24pt;color:red;padding: 100 100 100 100">inside inline-css div </div>

A conforming browser _must_ ignore the margin and padding rules, since the specified
values are syntactically malformed (no unit symbol after number). Of course, this is
just the top of the iceberg. Normally you shouldn't use pixel values but em values for
margin and padding.
No unit symbol is required with values of 0, right?

-Lost
Mar 21 '07 #18

P: n/a
In article <p5******************************@comcast.com>,
"-Lost" <mi*********@comcast.netwrote:
No unit symbol is required with values of 0, right?
In general, this is correct, the prima facie reason being that
zero pixels is the same as zero any other unit.

There is an obscure argument which, naturally enough, I am happy
to discuss at length with anyone, that says that no quantity of
one type of thing is different to no quantity of something
entirely different.

On this slight pretext may I leave you with a story about a
French philosopher called Sartre*who ordered a cup of coffee but
specified it was to be without cream. The waitress felt obliged
to inform him that there was no cream anyway, only milk. He
replied that in that case, he would have coffee without milk.

--
dorayme
Mar 21 '07 #19

P: n/a
Edward wrote :
>I stongly recommend using Firefox
[snipped]

I also found and installed this Firefox CSS validator addon (https://
addons.mozilla.org/firefox/2289) but realized that it simply goes
online to the above service and hences doesn't work for local files,
Firefox's Error Console reports CSS parsing errors for local files. You
do not need to install the CSS validator addon to know if there are CSS
parsing errors.

Tools/Error Console

Gérard
--
Using Web Standards in your Web Pages (Updated Dec. 2006)
http://developer.mozilla.org/en/docs...your_Web_Pages
Mar 23 '07 #20

This discussion thread is closed

Replies have been disabled for this discussion.