Re: [WSG] stretching of html elements
It's still a bit hard to tell without seeing an example. Can you send a link to a cut down version of what the problem is? Thanks Russ On 21/07/2010, at 3:31 PM, Jayachandran Kandasamy wrote: Hi Russ, I tried these CSS 3 properties and tested in the IE7 and Mozilla FF 3.6.6 browser, they are not helping is there any special hacks available to overcome this problem Thanks for your immediate response and article link you have given me. Cheers, JC *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
Re: [WSG] stretching of html elements
Hi Russ,
I tried these CSS 3 properties and tested in the IE7 and Mozilla FF 3.6.6
browser, they are not helping is there any special hacks available to
overcome this problem
Thanks for your immediate response and article link you have given me.
Cheers,
JC
On Wed, Jul 21, 2010 at 5:15 AM, Russ Weakley wrote:
> Hi JC,
>
> This is a question where a example would help. It all depends on:
>
> 1. the element in question (the TD element operates differently to DIV
> element in many cases)
> 2. whether sizing has been applied to the element
> 3. whether positioning had been applied to the element
> 4. which browser you are referring to (unless it is all browsers)
>
> Here is a long-winded answer...
>
> A DIV is a block level element by nature and will stretch to fit the
> viewport (browser window) or any containing box. As soon as you apply
> "float", "position: absolute" or "position: fixed" the element MAY change in
> dimension (depending on whether you also add a width/height to the element).
> If no width is applied to a float, absolute or fixed width element they
> naturally tend to "shrink-wrap" or collapse in width.
>
> The DIV, or any block level element for that matter, is also set to
> "overflow:visible" as the initial value. This means that an extremely long
> word, if wider than the width of the DIV, will poke out the right side of
> the DIV (assuming you have the default language - left to right - "ltr").
>
> You can control this behavior using the "overflow" property. The possible
> values in CSS2.1 are: visible | hidden | scroll | auto | inherit. For
> example:
>
> div { overflow: visible; } /* will show any content regardless of whether
> it's wider or deeper than the element */
> div { overflow: hidden; } /* will hide (cut off) any content that is wider
> or deeper than the element */
> div { overflow: scroll; } /* will add horizontal and vertical scroll bars
> to the right and bottom of the element */
> div { overflow: auto; } /* will add a scroll bar to the affected axis of
> the element */
>
> A TD element is quite different.
>
> Unlike a block level element they naturally collapse in height and width.
> You can change this - giving them a set width or stretching them. They have
> one other unique characteristic. If you set a width on a TD and the content
> is wider than the applied width, the content will not flow outside the TD
> element (it will not "overflow"). Instead, the TD will expand to suit the
> needs of the content. You cannot apply "overflow" to a TD.
>
> So are there any solutions? Well, CSS3 offers two properties that may be of
> use... "word-wrap" and "word-break". Keep in mind that milage may vary.
> Safari and Internet Explorer support both of these properties. Firefox seems
> to support "word-wrap" but not "word-break". Opera does not seem to support
> either.
>
> Here super-quick is a test case for you:
> http://www.maxdesign.com.au/jobs/html-tests/property-wordwrap.htm
>
> HTH
> Russ
>
>
>
> On 21/07/2010, at 2:58 AM, Jayachandran Kandasamy wrote:
>
> Hi Team,
>>
>> Is there any idea to overcome the problem when there is content without
>> blankspace (spaces between words) inside TD / DIV is still expanding though
>> it has fixed width.
>>
>> Any suggestions welcome :)
>>
>> Cheers,
>> JC
>>
>> ***
>> List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
>> Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
>> Help: memberh...@webstandardsgroup.org
>> ***
>>
>
>
>
> ***
> List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
> Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
> Help: memberh...@webstandardsgroup.org
> ***
>
>
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***
Re: [WSG] stretching of html elements
Hi JC,
This is a question where a example would help. It all depends on:
1. the element in question (the TD element operates differently to DIV
element in many cases)
2. whether sizing has been applied to the element
3. whether positioning had been applied to the element
4. which browser you are referring to (unless it is all browsers)
Here is a long-winded answer...
A DIV is a block level element by nature and will stretch to fit the
viewport (browser window) or any containing box. As soon as you apply
"float", "position: absolute" or "position: fixed" the element MAY
change in dimension (depending on whether you also add a width/height
to the element). If no width is applied to a float, absolute or fixed
width element they naturally tend to "shrink-wrap" or collapse in width.
The DIV, or any block level element for that matter, is also set to
"overflow:visible" as the initial value. This means that an extremely
long word, if wider than the width of the DIV, will poke out the right
side of the DIV (assuming you have the default language - left to
right - "ltr").
You can control this behavior using the "overflow" property. The
possible values in CSS2.1 are: visible | hidden | scroll | auto |
inherit. For example:
div { overflow: visible; } /* will show any content regardless of
whether it's wider or deeper than the element */
div { overflow: hidden; } /* will hide (cut off) any content that is
wider or deeper than the element */
div { overflow: scroll; } /* will add horizontal and vertical scroll
bars to the right and bottom of the element */
div { overflow: auto; } /* will add a scroll bar to the affected axis
of the element */
A TD element is quite different.
Unlike a block level element they naturally collapse in height and
width. You can change this - giving them a set width or stretching
them. They have one other unique characteristic. If you set a width on
a TD and the content is wider than the applied width, the content will
not flow outside the TD element (it will not "overflow"). Instead, the
TD will expand to suit the needs of the content. You cannot apply
"overflow" to a TD.
So are there any solutions? Well, CSS3 offers two properties that may
be of use... "word-wrap" and "word-break". Keep in mind that milage
may vary. Safari and Internet Explorer support both of these
properties. Firefox seems to support "word-wrap" but not "word-break".
Opera does not seem to support either.
Here super-quick is a test case for you:
http://www.maxdesign.com.au/jobs/html-tests/property-wordwrap.htm
HTH
Russ
On 21/07/2010, at 2:58 AM, Jayachandran Kandasamy wrote:
Hi Team,
Is there any idea to overcome the problem when there is content
without blankspace (spaces between words) inside TD / DIV is still
expanding though it has fixed width.
Any suggestions welcome :)
Cheers,
JC
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***
[WSG] stretching of html elements
Hi Team, Is there any idea to overcome the problem when there is content without blankspace (spaces between words) inside TD / DIV is still expanding though it has fixed width. Any suggestions welcome :) Cheers, JC *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
