CSS questions about padding and doctype

[Hello]

Here problem is that in Mozilla the logo "The Website" will not pad from the
edge.
http://www.clickatus.com/test/

Also, when I put in loose DOCTYPE it blows the whole thing... Help...
http://www.clickatus.com/test/1

[Arne]

Once upon a time *Hello* wrote:

Here problem is that in Mozilla the logo "The Website" will not pad from the
edge.
Start with correcting your errors first. After that it may be easier
to find what's wrong.
http://www.clickatus.com/test/
Errors reported by the CSS validator at
http://jigsaw.w3.org/css-validator/validator-uri.html

* Line: 11 Context : body
Invalid number : background-color FCF1C6 is not a color value : FCF1C6

* Line: 24 Context : div.h_body
Invalid number : top only 0 can be a length. You must put an unit
after your number : 10

* Line: 28 Context : div.h_body
Invalid number : background-color E9BB0D is not a color value : E9BB0D

* Line: 29 Context : div.h_body
Invalid number : color C44E0B is not a color value : C44E0B

* Line: 36 Context : div.b_holder
Invalid number : top only 0 can be a length. You must put an unit
after your number : 60

* Line: 40 Context : div.b_holder
Invalid number : background-color F6D866 is not a color value : F6D866

* Line: 50 Context : div.m_body
Invalid number : padding only 0 can be a length. You must put an unit
after your number : 70 15 40 185

Also, when I put in loose DOCTYPE it blows the whole thing... Help...
http://www.clickatus.com/test/1

Same errors as abowe on this page.

--
/Arne

Top posters will be ignored. Quote the part you
are replying to, no more and no less! And don't
quote signatures, thank you.

[Jan Roland Eriksson]

On Sat, 21 May 2005 09:30:23 +0200, Arne <in*****@domain.invalid> wrote:

[a series of good observations]

Once upon a time *Hello* wrote:

Here problem is that in Mozilla the logo
"The Website" will not pad from the edge.

Start with correcting your errors first. After that it may be easier
to find what's wrong.

http://www.clickatus.com/test/

Errors reported by the CSS validator at
http://jigsaw.w3.org/css-validator/validator-uri.html

* Line: 11 Context : body
Invalid number : background-color FCF1C6 is not a color value : FCF1C6

* Line: 24 Context : div.h_body
Invalid number : top only 0 can be a length.

[...]

And in addition to all the errors already found, the CSS author should
be instructed to NOT use the "underscore" character in CSS selectors.

That character was not originally defined in CSS, as part of the
"forward compatible" set-up that CSS was designed to be.

--
Rex

[Hello]

Thank you all for comments. I still have questions. I fixed CSS but it still
will not pad, now even in IE.

(That is text string "The Website" should be padded from the edge by 15
pixels)
http://www.clickatus.com/test/2/
--------------

"Arne" <in*****@domain.invalid> wrote in message
news:3f************@individual.net...

Once upon a time *Hello* wrote:

Here problem is that in Mozilla the logo "The Website" will not pad from
the
edge.

Start with correcting your errors first. After that it may be easier
to find what's wrong.

http://www.clickatus.com/test/

Errors reported by the CSS validator at
http://jigsaw.w3.org/css-validator/validator-uri.html

* Line: 11 Context : body
Invalid number : background-color FCF1C6 is not a color value : FCF1C6

* Line: 24 Context : div.h_body
Invalid number : top only 0 can be a length. You must put an unit
after your number : 10

* Line: 28 Context : div.h_body
Invalid number : background-color E9BB0D is not a color value : E9BB0D

* Line: 29 Context : div.h_body
Invalid number : color C44E0B is not a color value : C44E0B

* Line: 36 Context : div.b_holder
Invalid number : top only 0 can be a length. You must put an unit
after your number : 60

* Line: 40 Context : div.b_holder
Invalid number : background-color F6D866 is not a color value : F6D866

* Line: 50 Context : div.m_body
Invalid number : padding only 0 can be a length. You must put an unit
after your number : 70 15 40 185

Also, when I put in loose DOCTYPE it blows the whole thing... Help...
http://www.clickatus.com/test/1

Same errors as abowe on this page.

--
/Arne

Top posters will be ignored. Quote the part you
are replying to, no more and no less! And don't
quote signatures, thank you.

[mscir]

Hello wrote:

Thank you all for comments. I still have questions. I fixed CSS but it still
will not pad, now even in IE.

I avoid using absolutely positioned elements whenever possible.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<HTML>
<HEAD>
<TITLE>Homepage</TITLE>
<META http-equiv=Content-Type content="text/html; charset=windows-1252">
<STYLE type=text/css>
*{
padding: 0;
margin: 0;
}
BODY {
width: 100%;
height: 100%;
FONT: 1.3em Georgia, Tahoma, serif;
BACKGROUND-COLOR: white;
color: black;
}
..line1 {
FONT-SIZE: 1px;
HEIGHT: 10px;
BACKGROUND-COLOR: black;
color: black;
left: 0px;
}
#logo {
padding: 0 15px 0 0; /* top right bottom left */
FONT-SIZE: 2em;
COLOR: #c44e0b;
HEIGHT: 50px;
BACKGROUND-COLOR: #e9bb0d;
TEXT-ALIGN: right;
}
#menu {
padding: 15px 10px 0 20px;
FONT-WEIGHT: 900;
FONT-SIZE: 1em;
LEFT: 0px;
WIDTH: 143px;
TOP: 60px;
HEIGHT: 600px;
BACKGROUND-COLOR: #f6d866;
position: absolute;
}
#content {
padding: 5px 0 5px 178px;
/* use padding so content div doesn't appear beneath menu div */
/* 178 = menu div width+padding+5px padding: 143 + 10 + 20 + 5 */
FONT-SIZE: 1em;
COLOR: black;
BACKGROUND-COLOR: white
}
#menu A {
COLOR: #c44e0b;
TEXT-DECORATION: none
}
#menu A:hover {
COLOR: darkred
}
..clear{
clear: both;
}
</STYLE>
</HEAD>

<BODY>
<DIV class="line1"></DIV>
<DIV id="logo">The WebSite</DIV>
<DIV id="content">This is my body</DIV>
<DIV id="menu"><A
href="http://www.clickatus.com/test/2/#">Home</A><BR><BR>
<A href="http://www.clickatus.com/test/2/#">Products</A><BR><BR>
<A href="http://www.clickatus.com/test/2/#">Support</A><BR><BR>
<A href="http://www.clickatus.com/test/2/#">Contact Us</A>
</DIV>
<div class='clear'></div>
</BODY>
</HTML>

[Gus Richter]

Hello wrote:

Thank you all for comments. I still have questions. I fixed CSS but it still
will not pad, now even in IE.

(That is text string "The Website" should be padded from the edge by 15
pixels)
http://www.clickatus.com/test/2/

Adding padding to the div extends the absolute box by that extra amount,
which is not what you want.
So, remove padding-right:15px; from your div.logo .

The inline content takes text-align:right and correctly sits flush right.
In order to give the padding to the inline content, wrap it in a span:
<div class="logo"><span>The WebSite</span></div>

Then apply the padding to the span in your stylesheet:
div.logo span {padding-right:15px;}

--
Gus