Re: CSS for positioning

[Jenn]

If there are more than just one or two that require different to
the great majority, you will come to find it natural to class
those and target them in the non-inline repository of styles.

.specialClassWithAppropriateUsefulName {...;...;...}

There are sometimes easier ways to target a few elements *without
classing* those elements which you will come to recognise too and
will further help you keep good tabs on things.

dorayme .. I've made an attempt to edit my old old original website (just
for the fun of it to see if I could do it). Tell me .. what do you think?
http://pqlr.org/TEST/index.html. I put it through a validator... and I'm
just tired of looking at the code. I think my eyes are telling me to STOP
for a while. LOL I tested it in IE7 and Firefox, but the validator says
it's good so far.

I didn't put a meta tags in it yet.. that's the only thing I may need to do.

 

[Jenn]

Gazing into my crystal ball I observed "Jenn"

yep ... the techs at my job still won't let me upgrade to IE8 yet...
not sure what he is waiting on tho.

Did you show him the vunerablity stats I posted? That ought to scare
him a bit.

[http://secunia.com/advisories/product/12366/] IE7 - 118
vunerabilities

[http://secunia.com/advisories/product/21625/] IE8 - 43
vunerabilities

no ... not yet anyway ... we hardly run across each others paths unless
something is wrong on the pc or he has to do updates.

 

[Jenn]

Gazing into my crystal ball I observed "Jenn"

I think it's important to have a good stylesheet editor, especially
when you are using an external stylesheet. I use TopStyle from
Bradsoft [http://bradsoft.com/top-style]. Integrated progams are
nice, but I like using separate tools, just as I separate content

<snip>

I got a page not found for the bradsoft page link above.

 

[C A Upsdell]

dorayme .. I've made an attempt to edit my old old original website (just
for the fun of it to see if I could do it). Tell me .. what do you think?
http://pqlr.org/TEST/index.html. I put it through a validator... and I'm
just tired of looking at the code. I think my eyes are telling me to STOP
for a while. LOL I tested it in IE7 and Firefox, but the validator says
it's good so far.

I didn't put a meta tags in it yet.. that's the only thing I may need to do.

You have CSS errors which will likely make the page appear to look right
with older versions of IE. You have to validate the CSS as well. See
the W3C CSS validator service.

 

[Jenn]

You have CSS errors which will likely make the page appear to look
right with older versions of IE. You have to validate the CSS as
well. See the W3C CSS validator service.

one thing at a time... It took a few hours of re-doing the entire group of
pages so they would validate their html ... I'm pooped playing with what
I've done so far. Maybe later tonite or tomorrow I can look at the CSS
validator.

 

[dorayme]

dorayme .. I've made an attempt to edit my old old original website (just
for the fun of it to see if I could do it). Tell me .. what do you think?
http://pqlr.org/TEST/index.html. I put it through a validator... and I'm
just tired of looking at the code. I think my eyes are telling me to STOP
for a while. LOL I tested it in IE7 and Firefox, but the validator says
it's good so far.

Yes, it validates so that eliminates many possible mistakes in
the markup, so that is good. You will find it quite useful to
also put it through a CSS validator. You can do this either by
going directly to:

<http://jigsaw.w3.org/css-validator/>

or by installing a web developer add-on for Firefox. The
validator then comes up in the tools menu, you can validate local
or externally hosted pages, and the CSS one uses the one at the
above URL.

So, that is the first thing to attend to, the errors mentioned.
They are easily fixed. In CSS, unlike in HTML attributes, you
generally have to put units for quantities. If you put in a style
like:

<div style="width:200; background: pink;">...</div>

the browser will ignore the width and default to auto which is
100% wide when no borders, margin and paddings are there. How
ever if you put in the units, say px, or em or %, you get to be
cooking with gas.

I didn't put a meta tags in it yet.. that's the only thing I may need to do.

I guess it depends on how good you want it to be. There are many
things you can do that will help you strengthen your skills for
the future if you are doing this as an exercise. There are always
so many issues in these things. More than you can poke a stick at!

Perhaps if you attend to the issues mentioned first we might go
on to look at some of the other things that might be interesting
to examine. I will just mention one important one. It is very
rarely a good idea to use px units for fonts. In fact, it is
usually best to be very light indeed on saying anything about
font-size. But this is a complicated issue. A font-size of 100%
or 1em is the default (and therefore hardly needs specifying.
There is a bug in IE that makes it helpful to say at the body
level, font-size:100%; but let's not go there for the moment).

 

[Adrienne Boswell]

Gazing into my crystal ball I observed "Jenn"

I think it's important to have a good stylesheet editor, especially
when you are using an external stylesheet. I use TopStyle from
Bradsoft [http://bradsoft.com/top-style]. Integrated progams are
nice, but I like using separate tools, just as I separate content

<snip>

I got a page not found for the bradsoft page link above.

Well, there you go. I've been so pleased with it, I never bothered to
check for newer versions. Here you go:
http://svanas.dynip.com/topstyle/

 

[Adrienne Boswell]

Gazing into my crystal ball I observed "Jenn"

yep ... the techs at my job still won't let me upgrade to IE8 yet...
not sure what he is waiting on tho.

Did you show him the vunerablity stats I posted? That ought to scare
him a bit.

[http://secunia.com/advisories/product/12366/] IE7 - 118
vunerabilities

[http://secunia.com/advisories/product/21625/] IE8 - 43
vunerabilities

no ... not yet anyway ... we hardly run across each others paths unless
something is wrong on the pc or he has to do updates.

Email the links to him. Ask for a return receipt.

 

[Adrienne Boswell]

dorayme .. I've made an attempt to edit my old old original website
(just for the fun of it to see if I could do it). Tell me .. what do
you think? http://pqlr.org/TEST/index.html. I put it through a
validator... and I'm just tired of looking at the code. I think my
eyes are telling me to STOP for a while. LOL I tested it in IE7 and
Firefox, but the validator says it's good so far.

I didn't put a meta tags in it yet.. that's the only thing I may need
to do.

You cheated. You are using an iframe for the content. The contents of
that iframe (line 311) does not validate. Try again.

I was going to congradulate you on a job well done, and I was going to
mention the lack of heading elements, for example, markup such as
<center><p class="header">NEWS</p></center> would be better suited as
<h2>NEWS</h2> and styling it as:

h2 {
text-align:center;
color:#02627a;
background-color: transparent;
font-size:120%;
}

In the first place, center is deprecated. As a matter of fact, it is
absent in HTML5 [http://www.w3.org/TR/html5-diff/#absent-elements].
NEWS is a heading, not a paragraph, and it should be marked up as such.

Come back when you have completed fixing these errors:
[http://validator.w3.org/check?uri=http://pqlr.org/indexhome.html].
Don't cheat.

 

[Adrienne Boswell]

Gazing into my crystal ball I observed Adrienne Boswell

dorayme .. I've made an attempt to edit my old old original website
(just for the fun of it to see if I could do it). Tell me .. what do
you think? http://pqlr.org/TEST/index.html. I put it through a
validator... and I'm just tired of looking at the code. I think my
eyes are telling me to STOP for a while. LOL I tested it in IE7 and
Firefox, but the validator says it's good so far.

I didn't put a meta tags in it yet.. that's the only thing I may need
to do.

You cheated. You are using an iframe for the content. The contents of
that iframe (line 311) does not validate. Try again.

I was going to congradulate you on a job well done, and I was going to
mention the lack of heading elements, for example, markup such as
<center><p class="header">NEWS</p></center> would be better suited as
<h2>NEWS</h2> and styling it as:

h2 {
text-align:center;
color:#02627a;
background-color: transparent;
font-size:120%;
}

In the first place, center is deprecated. As a matter of fact, it is
absent in HTML5 [http://www.w3.org/TR/html5-diff/#absent-elements].
NEWS is a heading, not a paragraph, and it should be marked up as such.

Come back when you have completed fixing these errors:
[http://validator.w3.org/check?uri=http://pqlr.org/indexhome.html].
Don't cheat.

One final thought on this: Jenn, I had high hopes for you, and I am
greatly saddened to see this kind of behavior.

 

[Jenn]

Gazing into my crystal ball I observed Adrienne Boswell
<[email protected]> writing in
One final thought on this: Jenn, I had high hopes for you, and I am
greatly saddened to see this kind of behavior.

You're checking the wrong link.

You checked the live site... I have a TEST folder the new edits are in here:
http://pqlr.org/TEST/index.html

http://pqlr.org/TEST/indexhome.html
This document was successfully checked as HTML 4.01 Transitional!
Resultassed
Encoding:iso-8859-1
Doctype:HTML 4.01 Transitional

I checked every page in the test folder, and they all validated. I don't
think I missed any page, but it's possible as I was getting tired. I
checked all of them about 5 times each before I posted my TEST folder link.

 

[Jenn]

You cheated. You are using an iframe for the content. The contents
of that iframe (line 311) does not validate. Try again.

What are you talking about? I checked all the pages, and I don't believe any
of them did not validate.

I was going to congradulate you on a job well done, and I was going to
mention the lack of heading elements, for example, markup such as
<center><p class="header">NEWS</p></center> would be better suited as
<h2>NEWS</h2> and styling it as:

h2 {
text-align:center;
color:#02627a;
background-color: transparent;
font-size:120%;
}

In the first place, center is deprecated. As a matter of fact, it is
absent in HTML5 [http://www.w3.org/TR/html5-diff/#absent-elements].
NEWS is a heading, not a paragraph, and it should be marked up as
such.

Come back when you have completed fixing these errors:
[http://validator.w3.org/check?uri=http://pqlr.org/indexhome.html].
Don't cheat.

I don't appreciate you saying I'm cheating. I haven't done anything to
warrant a mean comment like that.

You should check the TEST folder before you make remarks like that.

 

[dorayme]

You cheated.

I doubt it. Such language has implications which are not true.
The iframe source itself in Jenn's TEST folder is:

<http://pqlr.org/TEST/indexhome.html>

At least the validator used in FF latest web dev add-on thinks it
is valid. So an Oklohman citizen is cheating to trust this, if
she has? Do we know what validator she used?

<http://validator.w3.org/check?verbose=1&uri=http://pqlr.org
%2FTEST%2Findexhome.html>

My own BBEdit Editor facilities picks up three things, two
essentially the same (she left off the hash leaving a seemingly
unknown colour name with a lot of Fs in it. And one not the
biggest deal (and probably not a *validation* error per se) to do
with an uncoded &:

1. Value of attribute ³bgcolor² for element ³<table>² is invalid;
Value isn't hex color spec or predefined color.

2. Value of attribute ³bgcolor² for element ³<table>² is invalid;
Value isn't hex color spec or predefined color.

3. Unencoded entity found; ³&² needs to be encoded as ³&amp;².


While iCab scowling face, when probed, grumbles that:

1. HTML Error (11, 1): The value "ffffff" of the attribute
"bgcolor" is not a valid color definition.

2. HTML Error (16, 2): The value "ffffff" of the attribute
"bgcolor" is not a valid color definition.

There are some mistakes in the CSS. And quite a number of other
things beyond validation that need discussing but that is a
different thing.

 

[Jenn]

Yes, it validates so that eliminates many possible mistakes in
the markup, so that is good. You will find it quite useful to
also put it through a CSS validator. You can do this either by
going directly to:

<http://jigsaw.w3.org/css-validator/>

or by installing a web developer add-on for Firefox. The
validator then comes up in the tools menu, you can validate local
or externally hosted pages, and the CSS one uses the one at the
above URL.

So, that is the first thing to attend to, the errors mentioned.
They are easily fixed. In CSS, unlike in HTML attributes, you
generally have to put units for quantities. If you put in a style
like:

<div style="width:200; background: pink;">...</div>

I don't use <div>'s in this site, and I don't intend on re-coding the entire
thing so I can use <div>'s. It's a tables based site and I edited the code
to see if I could validate it in the doctype I was using. I don't even
quite understand what the heck a <div> is to begin with. I just see people
using them, and they don't work like a table, either. They don't make sense
to me like a table makes sense, so I'm sticking with tables for this site.

the browser will ignore the width and default to auto which is
100% wide when no borders, margin and paddings are there. How
ever if you put in the units, say px, or em or %, you get to be
cooking with gas.

I just edited the style sheet enough to get the html to validate. It works.

I guess it depends on how good you want it to be. There are many
things you can do that will help you strengthen your skills for
the future if you are doing this as an exercise. There are always
so many issues in these things. More than you can poke a stick at!

Perhaps if you attend to the issues mentioned first we might go
on to look at some of the other things that might be interesting
to examine. I will just mention one important one. It is very
rarely a good idea to use px units for fonts. In fact, it is
usually best to be very light indeed on saying anything about
font-size. But this is a complicated issue. A font-size of 100%
or 1em is the default (and therefore hardly needs specifying.
There is a bug in IE that makes it helpful to say at the body
level, font-size:100%; but let's not go there for the moment).

I'm not there yet as far as getting all the newest syntax for fonts, etc.
I'm a bit discouraged at this point. I put all this time and effort into
getting the html to validate and the first comments I get is "you didn't
validate the css file"... and "you cheated (adrienne)" .... What's up with
that? Not a congratulations... you got them all the validate? I'm thinking
.... It works and it validates ... I'm not messing with the css file because
I don't want to screw it up. Shoot... just adding a doctype to the first
file screwed it all up and took some time to figure it out to make it work.
I'm asking myself ... why do I want to go to anymore trouble when I get
called a "cheat" for trying?

 

[Jenn]

Gazing into my crystal ball I observed "Jenn"

I think it's important to have a good stylesheet editor, especially
when you are using an external stylesheet. I use TopStyle from
Bradsoft [http://bradsoft.com/top-style]. Integrated progams are
nice, but I like using separate tools, just as I separate content

<snip>

I got a page not found for the bradsoft page link above.

Well, there you go. I've been so pleased with it, I never bothered to
check for newer versions. Here you go:
http://svanas.dynip.com/topstyle/

thanks ..

 

[Jenn]

I doubt it. Such language has implications which are not true.
The iframe source itself in Jenn's TEST folder is:

<http://pqlr.org/TEST/indexhome.html>

At least the validator used in FF latest web dev add-on thinks it
is valid. So an Oklohman citizen is cheating to trust this, if
she has? Do we know what validator she used?

<http://validator.w3.org/check?verbose=1&uri=http://pqlr.org
%2FTEST%2Findexhome.html>

My own BBEdit Editor facilities picks up three things, two
essentially the same (she left off the hash leaving a seemingly
unknown colour name with a lot of Fs in it. And one not the
biggest deal (and probably not a *validation* error per se) to do
with an uncoded &:

1. Value of attribute ³bgcolor² for element ³<table>² is invalid;
Value isn't hex color spec or predefined color.

2. Value of attribute ³bgcolor² for element ³<table>² is invalid;
Value isn't hex color spec or predefined color.

3. Unencoded entity found; ³&² needs to be encoded as ³&amp;².


While iCab scowling face, when probed, grumbles that:

1. HTML Error (11, 1): The value "ffffff" of the attribute
"bgcolor" is not a valid color definition.

2. HTML Error (16, 2): The value "ffffff" of the attribute
"bgcolor" is not a valid color definition.

There are some mistakes in the CSS. And quite a number of other
things beyond validation that need discussing but that is a
different thing.

I used http://validator.w3.org/ .

 

[dorayme]

I don't use <div>'s in this site, and I don't intend on re-coding the entire
thing so I can use <div>'s. It's a tables based site and I edited the code
to see if I could validate it in the doctype I was using. I don't even
quite understand what the heck a <div> is to begin with. I just see people
using them, and they don't work like a table, either. They don't make sense
to me like a table makes sense, so I'm sticking with tables for this site.

I was not suggesting you used DIVs or urging you do in any way at
all. I was just giving an example where something does not work
right if you omit the units. The example could as easily have
been with any if the table family elements.

I just edited the style sheet enough to get the html to validate. It works.

Usually, at least as far as I know, nothing you do in an external
CSS sheet can help the HTML validate. The HTML stands on its own
in many ways. Sometimes some faulty insertion of CSS can confuse
the HTML, but if the fault is purely confined to the CSS itself,
it contributes nothing to the validation of the HTML

I'm not there yet as far as getting all the newest syntax for fonts, etc.
I'm a bit discouraged at this point.

Don't be. Be patient and don't let the nastier parts of the
culture that resides here get to you.

I put all this time and effort into
getting the html to validate and the first comments I get is "you didn't
validate the css file"... and "you cheated (adrienne)" .... What's up with
that? Not a congratulations...

My "Yes, it validates so that eliminates many possible mistakes
in the markup, so that is good." - see above - was meant as
praise for you.

you got them all the validate? I'm thinking
... It works and it validates ... I'm not messing with the css file because
I don't want to screw it up.

You won't screw it up because you can get assistance here. The
faults that the CSS validator picked up were not big ones. I
tried to explain about units in my DIV example above. If you say
width: 80 for any element's style, you need to add units. 80px,
80%, 80em; and so on. These may seem minor things but they need
to be got right otherwise the styles you are asking the browser
to display will not work.

Shoot... just adding a doctype to the first
file screwed it all up and took some time to figure it out to make it work.
I'm asking myself ... why do I want to go to anymore trouble when I get
called a "cheat" for trying?

I can easily imagine how awful it sounded to be told this and I
have said my piece on this elsewhere. It was just another unwise
and insensitive charge against you.

 

[Adrienne Boswell]

I doubt it. Such language has implications which are not true.

What this is is essentially hiding something under the rug, or when your
mother asks you to clean up the livingroom, you stuff everything under
the sofa cushions. That works until your mother sits down on the couch
and immediately notices how lumpy it is.

If an author is going to check something, check the whole thing and fix
it - unless the source is from a server over which the author has no
control.

Now, if Jenn had said that she was using an iframe for some of the
content, and had not had time to fix it, that would be fine. But she
gave the impression that she had fixed all the errors, which she did
not.

The iframe source itself in Jenn's TEST folder is:

<http://pqlr.org/TEST/indexhome.html>

At least the validator used in FF latest web dev add-on thinks it
is valid. So an Oklohman citizen is cheating to trust this, if
she has? Do we know what validator she used?

The W3 validator passes the calling document without any problems. It's
a pity it can't go deeper into iframes and such.

 

[Adrienne Boswell]

What are you talking about? I checked all the pages, and I don't
believe any of them did not validate.

You did not check the content that is coming from the iframe. That is what
does not validate.

You have control over the content of that iframe - fix it.

 

[Adrienne Boswell]

You're checking the wrong link.

I did check the test document, and in looking at the source, found the
iframe. Since you have control over the source of the iframe, you need
to fix that, too.

You checked the live site... I have a TEST folder the new edits are in
here: http://pqlr.org/TEST/index.html

Which uses an iframe whose contents does not validate.

http://pqlr.org/TEST/indexhome.html
This document was successfully checked as HTML 4.01 Transitional!
Resultassed
Encoding:iso-8859-1
Doctype:HTML 4.01 Transitional

I checked every page in the test folder, and they all validated. I
don't think I missed any page, but it's possible as I was getting
tired. I checked all of them about 5 times each before I posted my
TEST folder link. --

Since you have control over the content of the iframe, you have to check
it as well.

Understand, too, that some users do not have iframes enabled for
security reasons. There is a very nasty 1 pixel iframe malware that
hits servers which are not locked down well enough. Google for iframe
security.