Shrink to fit

[Steve Pugh]

# 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 the stylesheet at http://hills.ccsf.edu/~pfurma02/paul.css you
haven't. Remember that the code at the bottom of the validator results
is a modified output and some errors may be corrected.

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

I dunno, it works in Moz & IE

No, the border-style: none; works. border-size: 0 is totally ignored.
border-style: none; automatically sets border-width to 0, so the style
you were trying to set wasn't needed anyway (except in a few rare
cases where the redeundency is needed to work around browser bugs).

Steve

 

[Paul Furman]

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">

Hmm thanks for looking but actually I had that constrained thing
commented out, now it only applies to the text boxes. If the page has
larger content like big images or many thumbnails it needs to be able to
grow. It was only the text that I didn't like to see getting so wide.

And add
body{text-align:center;}

Ah, I hadn't thought of centering the body. That kills one of the
<center> tags! Hmm... nope, it doesn't work in Mozilla.

I still need that one table though as far as I can see to get the
auto-shrink/grow effect. The HR is the indicator that it's not able to
shrink like in the very simple example I started with.


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

____
text

vs


<div>
<HR>
text
</div>

____________________________________
text

 

[Els]

Hmm thanks for looking but actually I had that constrained thing
commented out, now it only applies to the text boxes. If the page has
larger content like big images or many thumbnails it needs to be able to
grow. It was only the text that I didn't like to see getting so wide.


Ah, I hadn't thought of centering the body. That kills one of the
<center> tags! Hmm... nope, it doesn't work in Mozilla.

What do you mean doesn't work in Mozilla. Check for yourself:
http://home.tiscali.nl/~elizabeth/Paul4.html

I still need that one table though as far as I can see to get the
auto-shrink/grow effect. The HR is the indicator that it's not able to
shrink like in the very simple example I started with.

the hr in above document is behaving just fine

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

____
text

vs


<div>
<HR>
text
</div>

____________________________________
text

I guess you mistyped some of what I said somewhere....

 

[Steve Pugh]

Ah, I hadn't thought of centering the body. That kills one of the
<center> tags! Hmm... nope, it doesn't work in Mozilla.

Mozilla understands margin-left: auto; margin-right: auto; so it's
only IE <6 that needs the text-align: center; (and IE6 if your code
triggers quirks mode).

So..
body {text-align: center;}
child-of-body {margin-left: auto; margin-right: auto; text-align:
left; width: 30em;}

Will center the child-of-body within the browser window, but left
align the text inside that child in IE and modern browsers.

I still need that one table though as far as I can see to get the
auto-shrink/grow effect. The HR is the indicator that it's not able to
shrink like in the very simple example I started with.

____
text

____________________________________
text

If it's really just one or two words, then applying border-top to an
inline element (e.g. <span> if nothing more meaningful applies) will
do what you want. However, if the text ever wraps onto more than one
line then the result will vary between browsers and may be rather
unattractive.

Steve

 

[Els]

I guess you mistyped some of what I said somewhere....

That said, why don't you use a program like TopStyle Lite to
type your css files in, that way any wrong code is directly
highlighted in red, hard to miss

http://www.bradsoft.com/download/index.asp

 

[Paul Furman]

Remember that the code at the bottom of the validator results
is a modified output and some errors may be corrected.

Ah... I didn't know that!

: - )

 

[Paul Furman]

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.

So should I change:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
to:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

"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).

OK that makes sense, thanks!

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".

The table provides resizing flexibility that div's cannot. The tag soup
is a separate issue. I demonstrated my question with the simplest
possible 4-line example to eliminate other factors.

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.

Or skip the insults if you can't answer the question. That would save
typing <g>. I do appreciate the constructive criticisms though. Thanks.

 

[DU]

So should I change:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
to:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

Yes.




OK that makes sense, thanks!





The table provides resizing flexibility that div's cannot.

That's not correct. Table's default css declarations is width:auto while
div can be set width:auto as well.

The tag soup

is a separate issue.

I disagree. Maybe others can help you with what you want then.

regards

DU

 

[Paul Furman]

Thanks, I'll have to try it again. The 60% width is not really what I
was looking for but the centering ought to work.

That said, why don't you use a program like TopStyle Lite to type your
css files in, that way any wrong code is directly highlighted in red,
hard to miss

http://www.bradsoft.com/download/index.asp

I'm using PSPad as an editor with color highlighting but it doesn't
catch many of those CSS errors. Maybe an updated syntax plug-in would help.

 

[Paul Furman]

Steve Pugh wrote:

<centering advice>


Thanks for the centering clarifications, I'll work on removing the

If it's really just one or two words, then applying border-top to an
inline element (e.g. <span> if nothing more meaningful applies) will
do what you want. However, if the text ever wraps onto more than one
line then the result will vary between browsers and may be rather
unattractive.

I tried span and it doesn't work:

<span>
<hr>
text
</span>

________________________________
text

 

[Steve Pugh]

I tried span and it doesn't work:

<span>
<hr>
text
</span>

This is not what I suggested you use.

Read what I wrote again. I've cut the above quote right down so you've
got a better chance of spotting the key point.

Steve

 

[Paul Furman]

This is not what I suggested you use.

Read what I wrote again. I've cut the above quote right down so you've
got a better chance of spotting the key point.

Steve

OK sorry, I see what you mean. Inline elements do work.

<span style="border-top: 1px solid black;">
text
</span>

results:
____
text


But.... what I really want is for the border to expand but no further
(or less) than the largest element in the span (menu in this case):

. . . . . . . .
. header .
.______________.
. header .
. .
extra. . extra
. content . white
. . space
. . both
. . sides
.______________.
menu menu menu

A container encloses both lines and both lines expand to the width of
the largest element. A table is the only thing that works. If something
else in the content gets bigger, the lines expand. If it needs to
squeeze in a small window, the longer text wraps.

As far as I can tell, only a table can provide this feature.
example:
http://www.edgehill.net/html/css/1.htm

<body style="text-align: center;">
<table style="text-align: center;
margin-left: auto;
margin-right: auto;">
<tr><td>
header
<div style="border-top: 1px solid black;">
header
</div>
<p>
<a href="2.htm">
content
</a>
</p>
<div style="border-top: 1px solid black;">
menu menu menu menu menu menu
</div>
</td></tr>
</table>
</body>

PS I've got the HTML & CSS validating except for IE workarounds and a
couple things I know about like trying to wrap an <a> around some divs.
http://hills.ccsf.edu/~pfurma02/index.php?SCREEN=index.php
Thanks for all your help pushing me to do that.

 

[Els]

OK sorry, I see what you mean. Inline elements do work.

<span style="border-top: 1px solid black;">
text
</span>

results:
____
text

But.... what I really want is for the border to expand but no further
(or less) than the largest element in the span (menu in this case):

. . . . . . . .
. header .
.______________.
. header .
. .
extra. . extra
. content . white
. . space
. . both
. . sides
.______________.
menu menu menu

A container encloses both lines and both lines expand to the width of
the largest element. A table is the only thing that works. If something
else in the content gets bigger, the lines expand. If it needs to
squeeze in a small window, the longer text wraps.

As far as I can tell, only a table can provide this feature.
example:
http://www.edgehill.net/html/css/1.htm

I still don't see why you say this can only be done with a
table. What's wrong with the example I gave you yesterday?
http://home.tiscali.nl/~elizabeth/Paul4.html
You said you didn't like the percentage.
So what stopped you from changing the percentage to a width
in ems?
Like here:
http://home.tiscali.nl/~elizabeth/Paul5.html

Really, no need for a table, as far as I can see.
Not that you can't use a table if you like to, but don't say
you need to.

 

[Paul Furman]

I still don't see why you say this can only be done with a table. What's
wrong with the example I gave you yesterday?
http://home.tiscali.nl/~elizabeth/Paul4.html
You said you didn't like the percentage.
So what stopped you from changing the percentage to a width in ems?
Like here:
http://home.tiscali.nl/~elizabeth/Paul5.html

Really, no need for a table, as far as I can see.
Not that you can't use a table if you like to, but don't say you need to.

The table doesn't require a fixed width. It expands if the contents are
large and shrinks if the browser window is small. A fixed width
container won't shrink. I do use the MAX-width property on text boxes
inside so they don't get too wide but if I put a dozen thumbnails in the
table, they are free to stretch the page out to full screen:
<http://hills.ccsf.edu/~pfurma02/ind...G_DIR=2003-08-09-pipevine-caterpillar&PICS=12>
But a really simple page without even the max width textbox can shrink
down to a few ems wide or expand no more than the width of the menu bar
at the bottom:
http://hills.ccsf.edu/~pfurma02/index.php

IE just started being weird about refusing to shrink the max-width
textbox on a page like this:
http://hills.ccsf.edu/~pfurma02/index.php?SCREEN=web-ref.php
but Mozilla still works. I don't know what I did to cause that.
Sometimes it works, sometimes it doesn't.