How to define text max width

Forum Moderators: open

Message Too Old, No Replies

How to define text max width

within fluid script

henry0

5:37 pm on May 8, 2005 (gmt 0)

How can I define a max width for “block” of text within a table and <td> 100% and still keeping my fluid design?
Short of making a zillion nested tables each corresponding to a block of text

Thanks

encyclo

5:58 pm on May 8, 2005 (gmt 0)

There is the CSS rule

max-width

which will do the trick. The only problem is that Internet Explorer (what a surprise) doesn't support it. So, you need to use an IE-only CSS expression to do the same for IE. Combine the two and you get this:

.classname {
max-width:650px; /* for standards-compliant browsers */
width:expression(document.body.clientWidth > 650? "650px": "auto" ); /* max-width expression for IE only */
}

Ugly code, but functional.

henry0

6:06 pm on May 8, 2005 (gmt 0)

Very interesting
thanks a lot

Henry

keyplyr

6:39 am on May 9, 2005 (gmt 0)

encyclo, reading this has started me thinking (once again) about restricting the width of my fluid pages. Last time I gave it any thought about a year ago, nobody was suggesting the IE fix so I forgot about it.

So will it work for the entire webpage display like this?

html, body {
background-color:#fff;
color:#000;
max-width:1200px;
width:expression(document.body.clientWidth > 1200? "1200px": "auto" );
margin:0;
padding:0;
}

Thanks

keyplyr

6:58 am on May 9, 2005 (gmt 0)

Wow! The 'owner edit' function sure disappeared quickly.

Anyway, testing showed that it [the IE code] doesn't work and in addition, doesn't validate.

henry0

10:24 am on May 9, 2005 (gmt 0)

Keyplir, My quest is dif from yours in that I only look at a max W for an element and not for the whole page

However do a WM search and you shall get an answer
I remember a while ago a thread that answered precisely to your question

BTW
if the above code works for encyclo, why not for you?
(I did not get the chance to try it, I will later today)

encyclo

1:59 pm on May 9, 2005 (gmt 0)

Anyway, testing showed that it [the IE code] doesn't work and in addition, doesn't validate.

To answer in reverse order, it will never validate: it is a proprietary Microsoft solution which inserts Javascript expressions into CSS. I said it was ugly!

I should have been more specific about the bugs that you're going to encounter when using this technique. Here's my first test page:

<html>
<head>
<title>testing max-width expressions</title>
<style type="text/css">
p {
background:#ff0;
border:2px solid black;
max-width:600px;
width:expression(document.body.clientWidth > 600? "600px": "auto" );
}
</style>
</head>
<body>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>
</body>
</html>

This works just fine, but notice the lack of doctype. If you add a doctype to force the browser into standards-compliance mode, the expression doesn't work... unless you're using absolute positioning:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<html>
<head>
<title>testing max-width expressions</title>
<style type="text/css">
p {
position:absolute;
top:10px;
left:10px;
background:#ff0;
border:2px solid black;
max-width:600px;
width:expression(document.body.clientWidth > 600? "600px": "auto" );
}
</style>
</head>
<body>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>
</body>
</html>

Now, I'm not a Javascript guru (as I said, the expression is pure Javascript), so I'll leave it to someone with better JS knowledge to see if they can alter

document.body.clientWidth

into something which will work in standards-compliance mode.

henry0

3:39 pm on May 9, 2005 (gmt 0)

encyclo,
thanks for your time and the demo

Henry

<edit>
May we ask HTML mod to move it in the JS forum?
</edit>

henry0

11:29 am on May 10, 2005 (gmt 0)

Hmmm, I might be on something here:
if I use relative then it reacts and positions in regards of the first <td>
then the first <td> when resizing viewable space is kept fluid and the second is as wished kept fixed

your thoughts?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<html>
<head>
<title>testing max-width expressions</title>
<style type="text/css">
p {
position:relative;
top:0px;
left:0px;
background:#ff0;
border:2px solid black;
max-width:400px;
width:expression(document.body.clientWidth > 400? "400px": "auto" );
}
</style>
</head>
<body>

<table border="2">
<tr>
<td width="300">
aaaaaaaaaaaaaaaaa
</td>
<td>

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>

</td>
</tr>
</table>
</body>
</html>

henry0

1:19 pm on May 11, 2005 (gmt 0)

I tested it and it seems to work fine in IE and NN
if you need to nest the <P> in between other <div>
it is important to respect the following order:

<div class="aa"><p>
and closing
</p></div>

sitll scared using it in production server!

it looks like the answer to a long time quest

your thoughts?

Henry

encyclo

3:17 pm on May 11, 2005 (gmt 0)

Your test page is not behaving the same in IE and Firefox for me, Henry. In Firefox it behaves as expected: the left-hand column remains fixed at 300px and the right-hand column expands as necessary until stopping at 400px. In IE, the left-hand column resizes (it shouldn't) and the right-hand column stays fixed at 400px (the max-width rule is interpreted as width).

Are you trying to have a fixed-width left-hand column and the right-hand column fluid but restricted to 400px?

henry0

3:42 pm on May 11, 2005 (gmt 0)

Not really the demo page was just an example
I tried to change it (left) with a fliud 50% and it still works fine.

I am working on a new site and have sent you a PM so you can look at what I did

it is only a beta but you will get the idea

thanks

Henry