Shrink to fit

[Paul Furman]

The only way I can get this <HR> to shrink to match the size of the rest
of the page (which is just a bit of text in this case) is by putting
them both in a table:

<table><tr><td>
<HR>
text
</td></tr></table>

Div, span, etc. don't seem to help without setting a fixed width.


The same is true for an inline list (or other things I assume) if it has
a border showing, that will stretch to fit the entire page.

 

[Els]

The only way I can get this <HR> to shrink to match the size of the rest
of the page (which is just a bit of text in this case) is by putting
them both in a table:

<table><tr><td>
<HR>
text
</td></tr></table>

Div, span, etc. don't seem to help without setting a fixed width.

Not even <hr style="width:200px;"> ?

The same is true for an inline list (or other things I assume) if it has
a border showing, that will stretch to fit the entire page.

An inline list can certainly be put inside a div which has a
certain width. This can be a percentage width of course.

Or am I misunderstanding your problem?

 

[Paul Furman]

Not even <hr style="width:200px;"> ?

Yes, that works but is not flexible.

Or am I misunderstanding your problem?

I want the HR to shrink & grow with the stuff that it sits with so that:

<table><tr><td>
<HR>
text
</td></tr></table>


is only as wide as the word "text" like:
____
text

<table><tr><td>
<HR>
text that is longer
</td></tr></table>

makes a wider HR like:

___________________
text that is longer


not like:

__________________________________________________________________
text

 

[DU]

Yes, that works but is not flexible.




I want the HR to shrink & grow with the stuff that it sits with so that:

<table><tr><td>
<HR>
text
</td></tr></table>


is only as wide as the word "text" like:
____
text

<table><tr><td>
<HR>
text that is longer
</td></tr></table>

makes a wider HR like:

___________________
text that is longer


not like:

__________________________________________________________________
text

Maybe if you could post an url, then we could examine your webpage
situation and understand how to best fix this. Without it, it's
difficult to suggest something fitting your webpage requirements. As
described your situation can be solved with
<hr style="width:90%;"> or
<hr style="margin-left:10%;margin-right:10%">
as given by Els.
Creating a table for overlining text is inappropriate and refers exactly
to what tag soup means.
You may also try the css rule:
text-decorationverline;
http://www.w3.org/TR/CSS2/text.html#propdef-text-decoration
or
border-top:2px;
for such text.

HTH

DU

 

[Paul Furman]

Maybe if you could post an url, then we could examine your webpage
situation and understand how to best fix this. Without it, it's
difficult to suggest something fitting your webpage requirements. As
described your situation can be solved with
<hr style="width:90%;"> or
<hr style="margin-left:10%;margin-right:10%">
as given by Els.
Creating a table for overlining text is inappropriate and refers exactly
to what tag soup means.

I'm real close to eliminating tables on this site:
http://hills.ccsf.edu/~pfurma02/index.php

It will now resize (no bigger than needed) but if I eliminate the table
which encloses everything, then the <HR> on top & the inline menu list
below (with top & bottom border showing) expand to fill the entire page.
You will need to expand your browser window to see how these lines stop
now when they reach the limits of the contents inside the table.

 

[Els]

I'm real close to eliminating tables on this site:
http://hills.ccsf.edu/~pfurma02/index.php

It will now resize (no bigger than needed) but if I eliminate the table
which encloses everything, then the <HR> on top & the inline menu list
below (with top & bottom border showing) expand to fill the entire page.
You will need to expand your browser window to see how these lines stop
now when they reach the limits of the contents inside the table.

p.horizon{
border-top:1px solid black;
padding-top:1em; (or whatever distance you want
between the 'hr' and the text)
}

<p class="horizon">loads of text inside this paragraph bla
bla bla bla etc</p>

Does that work for you?

 

[Paul Furman]

p.horizon{
border-top:1px solid black;
padding-top:1em; (or whatever distance you want between the 'hr'
and the text)
}

<p class="horizon">loads of text inside this paragraph bla bla bla bla
etc</p>

Does that work for you?

Nope :-(

looks like:

____________________________________________
text

 

[DU]

p.horizon{
border-top:1px solid black;
padding-top:1em; (or whatever distance you want between the 'hr'
and the text)
}

<p class="horizon">loads of text inside this paragraph bla bla bla bla
etc</p>

Does that work for you?

Your webpage has many other problems to fix, IMO. Every single time you
use &nbsp;, you are unneedlessly increasing the size of your webpage:
&nbsp; is used for precise situations. Either you should need padding or
letter-spacing

<span style="font-size:140%;">
P&nbsp;a&nbsp;u&nbsp;l &nbsp;&nbsp;&nbsp;&nbsp;
F&nbsp;u&nbsp;r&nbsp;m&nbsp;a&nbsp;n
</span>
You can safely replace the above with a
<h1 style="letter-spacing:0.5em;">Paul Furman</h1>

W3C Quality Assurance tip:
Use headings to structure your document
http://www.w3.org/QA/Tips/headings

W3C Quality Assurance tips:
http://www.w3.org/QA/Tips/

Every occurence of <center> should be replaced, IMO. <center> is
deprecated with proper css declarations.

You're often switching from <p> with <br> in them to <ul><li>. These are
for positioning your text.
All you had to do is use paragraphs when your text is really a paragraph
and then use a list when your text is about items. To center all your
page, using margin for the body was correct.

body {margin:10%;}

and then just use proper markup (no tables, no lists unless text are
items, no <center> needed, no &nbsp. You already have too much
formating code (elements, classes).

Your webpage markup code does not validate either: I recommend to use a
strict definition instead. Your page has many other structure, design
problems. The centering of lines around the text is secondary issue in
this perspective but related to this too.

HTH

DU

 

[Paul Furman]

Your webpage has many other problems to fix, IMO.

I'm working on it. Are you admitting you don't know how to get what I

Every single time you use &nbsp;,
you are unneedlessly increasing the size of your webpage
<snip>
You can safely replace the above with a
style="letter-spacing:0.5em;">Paul Furman</

Great, I knew there was something like that but couldn't find it.

W3C Quality Assurance tip:
Use headings to structure your document
http://www.w3.org/QA/Tips/headings

W3C Quality Assurance tips:
http://www.w3.org/QA/Tips/

Every occurence of <center> should be replaced, IMO. <center> is
deprecated with proper css declarations.

Some can be fixed but the following does not work reliably for centering
the overall page:

margin-left: auto;
margin-right: auto;

I should be able to use text-align: center; for many of those <center>
tags. It's a matter of time because it takes experimenting with backups,
etc. I spent a hell of a lot of time experimenting already, don't assume
I'm just being lazy.

You're often switching from <p> with <br> in them to <ul><li>. These are
for positioning your text.
All you had to do is use paragraphs when your text is really a paragraph
and then use a list when your text is about items.

I have not misused lists! Careful with the assumptions buddy <g>.

The <br> & <p> I guess should become inline margin-top settings instead,
though that certainly doesn't simplify anything and <br> & <p> are not
deprecated. I understand the concept of closing <p> tags but haven't

To center all your
page, using margin for the body was correct.

See above, I tried and that doesn't work.
http://www.edgehill.net/html/css/max-min-width3.htm

body {margin:10%;}

Not what I want. Why waste 20% of the screen when things are tight?

and then just use proper markup (no tables,

Only one remaining and I'm asking for help to remove it.

<snip> You already have too much
formating code (elements, classes).

I want to control the formatting. Where I can find opportunities to
simplify that's better but I've only put things in that I needed.

Your webpage markup code does not validate either:

I know, that's pure avoidance. It's overwhelming. I'm assembling it all
with PHP though so it's easy to fix globally as I learn things.

Your page has many other structure, design problems.

Not a very helpful comment without specifics.

The centering of lines around the text is secondary issue in
this perspective but related to this too.

Wrong!

The centering of lines around text is my top priority at the moment. The
page is fluid, reads fine in a plain text browser and doesn't have any
other browser related bugs that I know of. The first thing is to make
sure it looks correct, then I can worry about whether my title is inside
a <h1> or whatever syntactical niceties.

 

[Els]

Paul Furman wrote:

Had a look at your code, and really, so easy to take the
table off:

If you take away from you code
<center>
<table class=".constrained">
<tr>
<td class=".constrained">
And instead write:
<div class="constrained">

And take away
</td>
</tr>
</table>
And instead write:
</div>

And add
<style type="text/css">
body{text-align:center;}
div.constrained {width:60%;margin-left:auto;
margin-right:auto;text-align:center;}
</style>

in the head of your document, all you will have to do still,
is making the head left-aligned.

And I don't know if <p> tags are legal when open, but it
looks a lot clearer in the code, if one sees where you close
them.

 

[Paul Furman]

Your webpage markup code does not validate either

Looks pretty good except for the validator's inability to understand PHP
URL's:
<url:
http://validator.w3.org/check?uri=http://hills.ccsf.edu/~pfurma02/index.php>


Line 9, column 8: end tag for element "HEAD" which is not open
(explain...).
</head>
^

WRONG (AFAIK)



Line 11, column 5: document type does not allow element "BODY" here
(explain...).
<body>
^

WRONG (AFAIK)


Line 17, column 74: cannot generate system identifier for general entity
"PICS"
...f.edu/~pfurma02/index.php?SCREEN=index.php&PICS=6"
^

THIS ERROR APPEARS REPEATEDLY, IT'S A VALID PHP URL!


Line 24, column 8: document type does not allow element "CENTER" here;
missing one of "APPLET", "OBJECT", "MAP", "IFRAME", "BUTTON" start-tag
<center>
^

OK I CAN TRY TO WORK ON THAT.

 

[Paul Furman]

Your webpage markup code does not validate either

The CSS errors appear to be primarily related to IE workarounds:

<url:
http://jigsaw.w3.org/css-validator/...aul.css&warning=1&profile=css2&usermedium=all>

The rest I can't understand.

 

[Mark Parnell]

Looks pretty good except for the validator's inability to understand PHP
URL's:
<url:
http://validator.w3.org/check?uri=http://hills.ccsf.edu/~pfurma02/index.php>

This has nothing to do with PHP (except that your PHP code is generating
invalid HTML).

Line 9, column 8: end tag for element "HEAD" which is not open
(explain...).
</head>
^

WRONG (AFAIK)

No, the validator is right, as usual. You are using pseudo-XHTML markup
(the /> at the end of the link element). Remove the /.

Line 11, column 5: document type does not allow element "BODY" here
(explain...).
<body>
^

Same problem as above.

Line 17, column 74: cannot generate system identifier for general entity
"PICS"
...f.edu/~pfurma02/index.php?SCREEN=index.php&PICS=6"
^

Ampersands need to be encoded properly. Replace & with &amp;

 

[Mark Parnell]

The CSS errors appear to be primarily related to IE workarounds:

A couple of them, possibly.

<url:
http://jigsaw.w3.org/css-validator/...aul.css&warning=1&profile=css2&usermedium=all>

The rest I can't understand.

I don't mean to be rude, but did you actually read the errors?

2 of them clearly state that you are missing semicolons.

3 relate to properties/values that don't exist in the specs (possibly IE
workarounds, but I doubt it).

1 (the "parse error") you seem to be trying to get it to do some sort of
calculation - CSS is not a programming language.

 

[Steve Pugh]

Looks pretty good except for the validator's inability to understand PHP
URL's:

If your server is sending PHP to the validator then your server either
doesn't support PHP or your PHP code is broken. The validator gets
exactly the same code that the browser gets.

<url:
http://validator.w3.org/check?uri=http://hills.ccsf.edu/~pfurma02/index.php>

Line 9, column 8: end tag for element "HEAD" which is not open
(explain...).
</head>
^

WRONG (AFAIK)

No, it's right, you're wrong.

You've mixed XHTML and HTML syntax.
<link /> is XHTML, in HTML it means <link>>
As > is a text character it can not go in the head so as soon as it
appears the head is closed and the body is opened. So the later

Line 17, column 74: cannot generate system identifier for general entity
"PICS"
...f.edu/~pfurma02/index.php?SCREEN=index.php&PICS=6"
^

THIS ERROR APPEARS REPEATEDLY, IT'S A VALID PHP URL!

It's a good URL, but it's bad HTML.
& in HTML must always be written as &amp;

Line 24, column 8: document type does not allow element "CENTER" here;
missing one of "APPLET", "OBJECT", "MAP", "IFRAME", "BUTTON" start-tag
<center>
^
OK I CAN TRY TO WORK ON THAT.

You can't nest block level elements link <center> inside inline
elements link <a>

Steve

 

[Paul Furman]

A couple of them, possibly.




I don't mean to be rude, but did you actually read the errors?

2 of them clearly state that you are missing semicolons.

# Line: 0 Context : body
Invalid number : colorattempt to find a semi-colon before the property
name. add it
body {
color : #444;


I've got a colon & a semicolon
the spec linking there from the word color says:
{ color: red }
or
{ color: rgb(255,0,0) }
no mention of #RRGGBB
????? is this new ??????


# Line: 0 Context : button
Property border-size doesn't exist : 0

I dunno, it works in Moz & IE


# Line: 0 Context : button
Invalid number : cursorhand is not a cursor value : hand

IE workaround.

# Line: 0 Context : div.textbox
Invalid number : widthParse Error - document.body.clientWidth > (500/12)
* parseInt(document.body.currentStyle.fontSize)? "30em": "auto" )

IE workaround.


# Line: 0 Context : table.fine
Invalid number : borderattempt to find a semi-colon before the property
name. add it
table.fine {
border : 1px none inherit;

Again, I've got a semicolon!


# Line: 0 Context : table.fine
Property solid doesn't exist : #aaaaaa
td.fine {
border : 1px solid #aaaaaa;

I don't know what they are talking about, isn't this the right format?

That's it, that's all the errors I got.

 

[Steve Pugh]

The CSS errors appear to be primarily related to IE workarounds:

<url:
http://jigsaw.w3.org/css-validator/...aul.css&warning=1&profile=css2&usermedium=all>

The rest I can't understand.

color: #444
font-family: Times New Roman;
Missing semi-colon.

border-size: 0px;
No such property, maybe you meant border-width ?

border: 1px solid: #aaaaaa;
Colon after solid, this causes two errors from the validator.

The other two errors are indeed caused by using IE-specific code.

Steve

 

[Paul Furman]

A couple of them, possibly.




I don't mean to be rude, but did you actually read the errors?

2 of them clearly state that you are missing semicolons.

# Line: 0 Context : body
Invalid number : colorattempt to find a semi-colon before the property
name. add it
body {
color : #444;


I've got a colon & a semicolon
the spec linking there from the word color says:
{ color: red }
or
{ color: rgb(255,0,0) }
no mention of #RRGGBB
????? is this new ??????


# Line: 0 Context : button
Property border-size doesn't exist : 0

I dunno, it works in Moz & IE


# Line: 0 Context : button
Invalid number : cursorhand is not a cursor value : hand

IE workaround.

# Line: 0 Context : div.textbox
Invalid number : widthParse Error - document.body.clientWidth > (500/12)
* parseInt(document.body.currentStyle.fontSize)? "30em": "auto" )

IE workaround.


# Line: 0 Context : table.fine
Invalid number : borderattempt to find a semi-colon before the property
name. add it
table.fine {
border : 1px none inherit;

Again, I've got a semicolon!


# Line: 0 Context : table.fine
Property solid doesn't exist : #aaaaaa
td.fine {
border : 1px solid #aaaaaa;

I don't know what they are talking about, isn't this the right format?

That's it, that's all the errors I got.

 

[Mark Parnell]

# Line: 0 Context : body
Invalid number : colorattempt to find a semi-colon before the property
name. add it
body {
color : #444;


I've got a colon & a semicolon

Not in http://hills.ccsf.edu/~pfurma02/paul.css

Maybe you have fixed it locally and not uploaded it yet?

# Line: 0 Context : button
Property border-size doesn't exist : 0

I dunno, it works in Moz & IE

I usually use the shorthand border property (in this case, border:
none, but the correct one you are looking for is border-width: 0;

# Line: 0 Context : button
Invalid number : cursorhand is not a cursor value : hand

IE workaround.

Thought that one might be.

# Line: 0 Context : div.textbox
Invalid number : widthParse Error - document.body.clientWidth > (500/12)
* parseInt(document.body.currentStyle.fontSize)? "30em": "auto" )

IE workaround.

Which bit? What exactly is it supposed to do?

# Line: 0 Context : table.fine
Invalid number : borderattempt to find a semi-colon before the property
name. add it
table.fine {
border : 1px none inherit;

Again, I've got a semicolon!

Again, see above.

# Line: 0 Context : table.fine
Property solid doesn't exist : #aaaaaa
td.fine {
border : 1px solid #aaaaaa;

I don't know what they are talking about, isn't this the right format?

You have a colon after solid.

That's it, that's all the errors I got.

Yep, that's it.

 

[DU]

I'm working on it. Are you admitting you don't know how to get what I
want without a table? <g>.

All I wanted to explain is that I see what is the layout you want to
achieve. You now need to redo the code design.

Great, I knew there was something like that but couldn't find it.




Some can be fixed but the following does not work reliably for centering
the overall page:

margin-left: auto;
margin-right: auto;

Most people (above 90%) are now using a CSS1 compliant browser. You need
to trigger MSIE 6 into standards compliant rendering mode to do that.
And your current doctype decl. does not do that.

I should be able to use text-align: center; for many of those <center>
tags.

No. text-align:center is to center inline elements. Setting the
horizontal margins to auto will center blocklevel elements.

It's a matter of time because it takes experimenting with backups,

etc. I spent a hell of a lot of time experimenting already, don't assume
I'm just being lazy.

I'm not assuming you're lazy.

I have not misused lists! Careful with the assumptions buddy <g>.

I said when paragraphs are texts (like sentences,
subject-verb-complement), then paragraphs are fine. When the text show

The <br> & <p> I guess should become inline margin-top settings instead,
though that certainly doesn't simplify anything and <br> & <p> are not
deprecated. I understand the concept of closing <p> tags but haven't
found any need yet. An open <p> is still legal, right?

"Close Your Tags

Unlike Extensible Markup Language (XML), HTML has the notion of
implicitly closed tags. This includes frame, img, li, and p. If you
don't close these tags, Internet Explorer renders your pages just fine.
If you do close your tags, Internet Explorer will render your pages even
faster."
Building High Performance HTML Pages
http://msdn.microsoft.com/workshop/author/perf/perftips.asp

Closing tags are necessary in strict definition. ANyway, I recommend you
use a strict definition for your document. That way, it will render more
consistently across browsers. If you use appropriate markup code, then
it will degrade gracefully in old browsers (over 6 years old ones).

See above, I tried and that doesn't work.
http://www.edgehill.net/html/css/max-min-width3.htm





Not what I want. Why waste 20% of the screen when things are tight?

Well, your content was using less than 80% for sure on my monitor screen.

Only one remaining and I'm asking for help to remove it.

It does not really work like that. You have other problems in your page
that just can not make the removal of the table possible. In my opinion,
your markup already has several signs of "tag soup".

I want to control the formatting. Where I can find opportunities to
simplify that's better but I've only put things in that I needed.





I know, that's pure avoidance. It's overwhelming. I'm assembling it all
with PHP though so it's easy to fix globally as I learn things.






Not a very helpful comment without specifics.

Well, this is my 3rd post. I could write a lot, explaining, explaining
takes time, etc.. I might as well just do the file the way I would do it
instead and then save typing on explaining, etc.


DU