How to make overflow:hidden take effect?

[Kai Grossjohann]

I have a frame which is supposed to contain a list of links. The
clickable area of each link comprises a picture followed by some text.

I want the text to be cut at the right hand side when the user resizes
the frame to be "too narrow".

Right now, the source for that frame looks like this:

<table border="1" width="100%">
<tr style="backgrou nd-color:#C0C0C0">
<td align="center">
<a href="group1">G roup 1</a>
</td>
</tr>
<tr class="menu">
<td>
<div style="whitespa ce:nowrap;overf low:hidden;widt h:auto;">
<a href="link1">
<img border="0" src="img1"> Text 1
</a>
</div>
<div style="whitespa ce:nowrap;overf low:hidden;widt h:auto;">
<a href="link2">
<img border="0" src="img1"> Some long text here
</a>
</div>
</td>
</tr>
<tr style="backgrou nd-color:#C0C0C0">
<td align="center">
<a href="group2">G roup 2</a>
</td>
</tr>
</table>

But the text "Some long text here" is wrapped instead of clipped.

Suggestions?

Kai

[Lauri Raittila]

In article Kai Grossjohann wrote:

I have a frame which is supposed to contain a list of links. The
clickable area of each link comprises a picture followed by some text.

I want the text to be cut at the right hand side when the user resizes
the frame to be "too narrow".

Right now, the source for that frame looks like this:

<table border="1" width="100%">
<tr style="backgrou nd-color:#C0C0C0">
<td align="center">
<a href="group1">G roup 1</a>
</td>
</tr>
<tr class="menu">
<td>
<div style="whitespa ce:nowrap;overf low:hidden;widt h:auto;">
<a href="link1">
<img border="0" src="img1"> Text 1
</a>
</div>
<div style="whitespa ce:nowrap;overf low:hidden;widt h:auto;">
<a href="link2">
<img border="0" src="img1"> Some long text here
</a>
</div>
</td>
</tr>
<tr style="backgrou nd-color:#C0C0C0">
<td align="center">
<a href="group2">G roup 2</a>
</td>
</tr>
</table>

But the text "Some long text here" is wrapped instead of clipped.

Of course it is. You don't define height. Overflow controls overflow. If
there is no overflow, it can't be hidden. There can't be overflow to down
unless height is set, as normal behaviour is that element will be
streched.

Are you sure you are doing right thing? Frames, table layout and
overflow:hidden doesn't sound good.

--
Lauri Raittila <http://www.iki.fi/lr> <http://www.iki.fi/zwak/fonts>
Saapi lähettää meiliä, jos aihe ei liity ryhmään, tai on yksityinen
tjsp., mutta älä lähetä samaa viestiä meilitse ja ryhmään.

[Kai Grossjohann]

Lauri Raittila <la***@raittila .cjb.net> writes:

In article Kai Grossjohann wrote:

But the text "Some long text here" is wrapped instead of clipped.
Of course it is. You don't define height. Overflow controls overflow. If
there is no overflow, it can't be hidden. There can't be overflow to down
unless height is set, as normal behaviour is that element will be
streched.

D'oh. Thanks for pointing this out.

How do I say that I want the table rows to be tall enough to contain
the image and also one row of text (the maximum of these two)?
Are you sure you are doing right thing? Frames, table layout and
overflow:hidden doesn't sound good.

There could be two answers to this.

(A) Of course I know that I'm not doing the right thing, but do you
really have to rub it in?

(B) My boss wants it, so it must be right.

Take your pick ;-)
"Thou shalt make it look like this Windows app here", my boss said.
And that Windows app has a resizable outlook bar on the left hand
side. (It's the kind of bar that MS Outlook has on the left, the bar
contains several groups with icons, each of the icons serves as a
shortcut. The bar is resizable (width only, it stretches the whole
height of the window anyway) by the user by dragging the mouse.) Do
you know of a way to make such a thing without frames?
Oh, regarding the table layout, I plead guilty. I thought that it was
easy to get the "raised button" look by having a table cell with the
right content. But it seems that didn't work. So I'll try to find
another way to do this.
We even bought this hideously expensive JavaScript menu package just
so that we could get menus that look like in Windows XP...
Kai

[Lauri Raittila]

In article Kai Grossjohann wrote:

Lauri Raittila <la***@raittila .cjb.net> writes:

In article Kai Grossjohann wrote:

But the text "Some long text here" is wrapped instead of clipped.
Of course it is. You don't define height. Overflow controls overflow. If
there is no overflow, it can't be hidden. There can't be overflow to down
unless height is set, as normal behaviour is that element will be
streched.

D'oh. Thanks for pointing this out.

How do I say that I want the table rows to be tall enough to contain
the image and also one row of text (the maximum of these two)?

You can't. Height aplied to table row acts roughly as min-height to other
elements. You would need to wrap contents of each td to something first.
(Didn't notice this probmlem at first as I never use table layout
anymore...)

To set height of that wrapper element you would use height of image and
1em, and then set one of them as height and other as min-height. Not
supported by IE, which I assume your thing needs to work. OTOH, IE has
bug that may help this, but I don't know what it thinks about overflow

You could try white-space:no-wrap and defined (100%) width supposing you
never want wrapping. That might have desired effect.
"Thou shalt make it look like this Windows app here", my boss said.
And that Windows app has a resizable outlook bar on the left hand
side. (It's the kind of bar that MS Outlook has on the left, the bar
contains several groups with icons, each of the icons serves as a
shortcut. The bar is resizable (width only, it stretches the whole
height of the window anyway) by the user by dragging the mouse.) Do
you know of a way to make such a thing without frames?
Never used Outlook bar (nor know what it would look like). Could be
possible with CSS and JS, but that wouldn't be any better. Seems that
this might be use for frames, as it is trying to be aplication, not
webpage.
Oh, regarding the table layout, I plead guilty. I thought that it was
easy to get the "raised button" look by having a table cell with the
right content. But it seems that didn't work. So I'll try to find
another way to do this.

Make it list? That would allow to make it quite easily. Hard to comment
on markup whitout knowledge on what kind of content it would have.

--
Lauri Raittila <http://www.iki.fi/lr> <http://www.iki.fi/zwak/fonts>
Saapi lähettää meiliä, jos aihe ei liity ryhmään, tai on yksityinen
tjsp., mutta älä lähetä samaa viestiä meilitse ja ryhmään.

[Kai Grossjohann]

Lauri Raittila <la***@raittila .cjb.net> writes:

Of course it is. You don't define height. Overflow controls overflow. If
there is no overflow, it can't be hidden. There can't be overflow to down
unless height is set, as normal behaviour is that element will be
streched.

Okay, now I set the height. It's 20px which allows one row to be
visible. But it doesn't do what I need, either:

IE 6 tries to fit the element into a too-narrow column, so instead of

foo bar

it displays

foo
bar

instead. Now it cuts off the bottom part, so I only see

foo

But what I really wanted to see is, say,

foo b

with the "ar" part being cut off. I already added "whitespace:now rap"
to the list of styles to use for my <div>, but it didn't help.

Hm. Let me try "white-space:no-wrap", too... [time passes] No, that
doesn't help, either.

Life is difficult...

Kai

[Kai Grossjohann]

Lauri Raittila <la***@raittila .cjb.net> writes:

In article Kai Grossjohann wrote:

Lauri Raittila <la***@raittila .cjb.net> writes:

"Thou shalt make it look like this Windows app here", my boss said.
And that Windows app has a resizable outlook bar on the left hand
side. (It's the kind of bar that MS Outlook has on the left, the bar
contains several groups with icons, each of the icons serves as a
shortcut. The bar is resizable (width only, it stretches the whole
height of the window anyway) by the user by dragging the mouse.) Do
you know of a way to make such a thing without frames?

Never used Outlook bar (nor know what it would look like). Could be
possible with CSS and JS, but that wouldn't be any better. Seems that
this might be use for frames, as it is trying to be aplication, not
webpage.

I had a hunch, so I tried to describe how the Outlook bar looks and
behaves ;-)

Kai

[Lauri Raittila]

In article Kai Grossjohann wrote:

Hm. Let me try "white-space:no-wrap", too... [time passes] No, that
doesn't help, either.

Hm, correct would be white-space:nowrap. Try that. (I wonder where the
logic is.)
http://www.w3.org/TR/CSS21/text.html#white-space-prop

Do you have URL?
--
Lauri Raittila <http://www.iki.fi/lr> <http://www.iki.fi/zwak/fonts>
Saapi lähettää meiliä, jos aihe ei liity ryhmään, tai on yksityinen
tjsp., mutta älä lähetä samaa viestiä meilitse ja ryhmään.