Stylesheets - CSS questions about padding and doctype

Author

CSS questions about padding and doctype

Hello

2005-05-21, 4:16 am

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

2005-05-21, 4:16 am

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

2005-05-21, 7:20 am

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

[a series of good observations]

>Once upon a time *Hello* wrote:
>
>Start with correcting your errors first. After that it may be easier
>to find what's wrong.
>
>
>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

2005-05-21, 7:22 pm

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" <invalid@domain.invalid> wrote in message
news:3f86c8F6fmmcU1@individual.net...
> Once upon a time *Hello* wrote:
>
> Start with correcting your errors first. After that it may be easier
> to find what's wrong.
>
>
> 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
>
>
>
> 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

2005-05-21, 7:22 pm

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

2005-05-22, 7:35 am

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

Arne

2005-05-23, 4:21 am