Can a div's width expand to fit content's width?

[Dave Rado]

Hi

I've created a banner with a drop-shadow using a div - there's a mock-
up at http://tinyurl.com/6n7czu . The only problem is that the way
I've done it, I have to specify the width of the div - if I don't, it
renders with a width of 100%. Is there any way of making the width fit
the text it encloses (plus padding), and so that it expand
automatically if you add more text?

Dave

[dorayme]

In article
<21**********************************@e10g2000prf. googlegroups.com>,
Dave Rado <da*******@dsl.pipex.comwrote:

Hi

I've created a banner with a drop-shadow using a div - there's a mock-
up at http://tinyurl.com/6n7czu . The only problem is that the way
I've done it, I have to specify the width of the div - if I don't, it
renders with a width of 100%. Is there any way of making the width fit
the text it encloses (plus padding), and so that it expand
automatically if you add more text?

Try changing your css to:

..BannerWidth1 {width: 11em;}

(quick fix)

--
dorayme

[Dave Rado]

Hi dorayme

On 8 Apr, 23:01, dorayme <[e-mail]:

Try changing your css to:

.BannerWidth1 {width: 11em;}

(quick fix)

No, I probably didn't explain what I'm trying to achieve very well.
I've now updated my mock-up at http://tinyurl.com/6n7czu so that it
has a width of 11em, and I've added some more text within the banner
(I've added the word "more"); but the width of the banner hasn't
increased, and the text has been forced to wrap onto a second line,
which I don't want to happen. What I want is for the banner's width to
be slightly wider than the width of the widest line of text within it
(so no unnecessary wrapping, but also no unnecessary white space), up
to a maximum width of 100%, regardless of how much text is within it.
Is that possible?

Dave

[dorayme]

In article
<ea**********************************@w5g2000prd.g ooglegroups.com>,
Dave Rado <da*******@dsl.pipex.comwrote:

Hi dorayme

On 8 Apr, 23:01, dorayme <[e-mail]:

Try changing your css to:

.BannerWidth1 {width: 11em;}

(quick fix)

No, I probably didn't explain what I'm trying to achieve very well.
I've now updated my mock-up at http://tinyurl.com/6n7czu so that it
has a width of 11em, and I've added some more text within the banner
(I've added the word "more"); but the width of the banner hasn't
increased, and the text has been forced to wrap onto a second line,
which I don't want to happen. What I want is for the banner's width to
be slightly wider than the width of the widest line of text within it
(so no unnecessary wrapping, but also no unnecessary white space), up
to a maximum width of 100%, regardless of how much text is within it.
Is that possible?

I widthed to suit your previous text. You have made the text more now
and of course it must wrap. So, I would think, you must increase the
width of the banner to more than 11em. The point of em widthing (which
is a unit suited to characters) is that as the characters get bigger or
smaller (think user font-size settings), so too does the box that is so
widthed.

--
dorayme

[Dave Rado]

Hi dorayme

On 9 Apr, 01:10, dorayme <[e-mail]:

You have made the text more now
and of course it must wrap.

But tables do allow one to do what I'm trying to do. I've now updated
my mock-up at http://tinyurl.com/6n7czu again, and if you look at the
second banner on the page, which is a table, if you add more text to
it, it's width does expand automatically, which is what I'm trying to
achieve (so that I don't have to have a hundreds of BannerWidthx
styles for all the different banners on my site).

The only problem with using a table in place of the DocBanner div is
that I can't see any way to apply a drop-shadow to it. Is there no
possible way to combine the two techniques, so as to get the benefits
of the table's dynamic width, while still having a drop-shadow?

Dave

[dorayme]

In article
<cc**********************************@t54g2000hsg. googlegroups.com>,
Dave Rado <da*******@dsl.pipex.comwrote:

Hi dorayme

On 9 Apr, 01:10, dorayme <[e-mail]:

You have made the text more now
and of course it must wrap.

But tables do allow one to do what I'm trying to do.

You seem to have forgotten about older query and started talking about
tables suddenly without any acknowledgement about your previous query.
Your example below gets it centred and shrunk to fit and shadowed up and
ready to go on stage to sing and dance. So why so keen on a table then?

Not that I mind table talk. Let's have some table talk now:

I've now updated
my mock-up at http://tinyurl.com/6n7czu again, and if you look at the
second banner on the page, which is a table, if you add more text to
it, it's width does expand automatically, which is what I'm trying to
achieve (so that I don't have to have a hundreds of BannerWidthx
styles for all the different banners on my site).

Well, I am sure we have discussed you using tables and I normally
approve of *you* doing this. Not many others here would, but most of
them are martians, you see... <g>

There are a number of things that are shrink-to-fit, and tables cells
have this magic property.

--
dorayme

[Dave Rado]

Hi dorayme

On 9 Apr, 02:33, dorayme <[e-mail]:

So why so keen on a table then?

I have no ideological commitment for or against tables, I simply want
to use the best tool for the job in hand.

There are a number of things that are shrink-to-fit, and tables cells
have this magic property.

Yes, but I can't work out how to apply a drop-shadow to a table whose
width is not specified. Does it require javascript to achieve this? I
know it must be possible using javascript, because I've seen
javascript-based menu systems and pop-ups that have a drop-shadow and
which automatically expand in width if one adds more text to them, but
I have no idea how they achieve this.

Dave

[Ben C]

On 2008-04-08, Dave Rado <da*******@dsl.pipex.comwrote:

Hi

I've created a banner with a drop-shadow using a div - there's a mock-
up at http://tinyurl.com/6n7czu . The only problem is that the way
I've done it, I have to specify the width of the div - if I don't, it
renders with a width of 100%. Is there any way of making the width fit
the text it encloses (plus padding), and so that it expand
automatically if you add more text?

You need a shrink-to-fit container, which means a float or display:
table, table-cell or inline-block.

Most of those don't work in IE and inline-block doesn't in Firefox 2.

It looks like you also want the box centered in which case float is out.

See

http://netweaver.com.au/alt/shrinkTo...rinkToFit.html

which has a possible workaround for IE.

[Dave Rado]

Hi Ben

On 9 Apr, 21:43, Ben C <[e-mail]:

You need a shrink-to-fit container, which means a float or display:
table, table-cell or inline-block.

Most of those don't work in IE and inline-block doesn't in Firefox 2.

It looks like you also want the box centered in which case float is out.

See

http://netweaver.com.au/alt/shrinkTo...ingShrinkToFit....

which has a possible workaround for IE.

Yes, floats are out of the question because as you say, it needs to be
horizontally centred. It bugs me that W3C don't think the ability to
centre floats is worthwhile - it makes them seem rather out of touch,
to me.

I've got it working using tables, now - by making a table's background
colour provide the drop-shadow and then offsetting a div within the
table. It works great, but it uses two single-cell tables, one to
provide the drop-shadow with a dynamic width, with an offset div
inside that, and then a second single-celled table within that div to
provide the vertical centring. Bit clunky but it works (see my mock-up
at http://tinyurl.com/5k8hdy).

Re. the workaround you linked to for the fact that IE doesn't support
display: table, I'm not sure whether it can be made to work in this
context - part of my problem is that I don't really understand the
workaround. See my failed attempt to get it working at http://tinyurl.com/6kvjtn
, which works in Firefox but not in IE.

Can you see any way to tweak the code in my mock-up at http://tinyurl.com/6kvjtn
so that the banner looks the same as the mock-up at http://tinyurl.com/5k8hdy
in all browsers?

Dave

[Bergamot]

Dave Rado wrote:

>
W3C don't think the ability to
centre floats is worthwhile

Hmmm... I consider centering and floating to be 2 mutually exclusive
things. The shrink-wrapping feature of floats is all you seem interested
in. Wanting that shouldn't equate to wanting floats.

- it makes them seem rather out of touch,
to me.

They may indeed be out of touch, but not necessarily over this. I'd call
IE out of touch, for not supporting the properties that give the results
you are really after - display:table etc.

I've got it working using tables, now
at http://tinyurl.com/5k8hdy).

Are you aware that your doctype triggers quirks mode in IE6? Drop the
xml prolog.

--
Berg

[Dave Rado]

Hi Berg

On 10 Apr, 05:19, Bergamot <[e-mail]:

>I'd call IE out of touch, for not supporting the properties that give the
results you are really after - display:table etc.

True ...

Are you aware that your doctype triggers quirks mode in IE6? Drop the
xml prolog.

That's done on purpose because of IE6's bugs when in strict mode. IE7
is running in strict mode though. And this has no effect on this
particular uissue.

Dave

[Jonathan N. Little]

Dave Rado wrote:

On 10 Apr, 05:19, Bergamot <[e-mail]:

>Are you aware that your doctype triggers quirks mode in IE6? Drop the
xml prolog.

That's done on purpose because of IE6's bugs when in strict mode. IE7
is running in strict mode though. And this has no effect on this
particular uissue.

Any reason why you are using XHTML? Bet not...

--
Take care,

Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com

[Jonathan N. Little]

Dave Rado wrote:

Hi

I've created a banner with a drop-shadow using a div - there's a mock-
up at http://tinyurl.com/6n7czu . The only problem is that the way
I've done it, I have to specify the width of the div - if I don't, it
renders with a width of 100%. Is there any way of making the width fit
the text it encloses (plus padding), and so that it expand
automatically if you add more text?

Use float is the only way I know of and include IE, else you must
specify a width... simple examples

http://www.littleworksstudio.com/tem....20080410.html

--
Take care,

Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com

[Dave Rado]

On 10 Apr, 16:16, "Jonathan N. Little" <[e-mail]:

Any reason why you are using XHTML? Bet not...

See for example:
http://www.w3schools.com/xhtml/xhtml_why.asp

Dave

[Dave Rado]

On 10 Apr, 17:26, "Jonathan N. Little" <[e-mail]:

Dave Rado wrote:

Hi

I've created a banner with a drop-shadow using a div - there's a mock-
up athttp://tinyurl.com/6n7czu. The only problem is that the way
I've done it, I have to specify the width of the div - if I don't, it
renders with a width of 100%. Is there any way of making the width fit
the text it encloses (plus padding), and so that it expand
automatically if you add more text?

Use float is the only way I know of and include IE, else you must
specify a width... simple examples

http://www.littleworksstudio.com/tem....20080410.html

--
Take care,

Jonathan
-------------------
LITTLE WORKS STUDIOhttp://www.LittleWorksStudio.com

Floats don't meet my requirement for reasons discussed earlier in the
thread (the boxes have to be shrink-to-fit *and* centred). I've got it
working using tables though.

Dave

[Jonathan N. Little]

Dave Rado wrote:

Why does Dreamweaver give you an xhtml transitional doctype by default
then?

Hmmm good one, it's self-answering ;-)

I don't use WYSIMWYG (What You See Is Maybe What You Get) editors, but I
believe you can set DW to code HTML 4.01 Strict

And given that I've already marked up several hundred webpages
in valid xhtml, with closing /tags for images etc., is it really
worth the many hours of work it would take to change it back now?

Well since they are most likely being incorrectly served as text/html,
yes. Also since most likely your pages are semi-xhtml a little parsing
with sed could fix them in a flash. I am sure someone here knows of an
xhtml stripping utility...

At the very least don't perpetuate your mistake by continuing to create
your new pages as xhtml...
--
Take care,

Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com

[Bergamot]

Dave Rado wrote:

>
Why does Dreamweaver give you an xhtml transitional doctype by default

Because it's trendy, nothing more.

--
Berg

[Ben C]

On 2008-04-09, Dave Rado <da*******@dsl.pipex.comwrote:

Hi Ben

On 9 Apr, 21:43, Ben C <[e-mail]:

>You need a shrink-to-fit container, which means a float or display:
table, table-cell or inline-block.

Most of those don't work in IE and inline-block doesn't in Firefox 2.

It looks like you also want the box centered in which case float is out.

See

http://netweaver.com.au/alt/shrinkTo...ingShrinkToFit....

which has a possible workaround for IE.

Yes, floats are out of the question because as you say, it needs to be
horizontally centred. It bugs me that W3C don't think the ability to
centre floats is worthwhile - it makes them seem rather out of touch,
to me.

More useful would be if you could set width: greedy or width:
shrink-to-fit on any block-level element.

Then you wouldn't have to use float or table-cell etc. just for the
shrink-to-fit side-effect and then have to work around the effect so to
speak.

I think something like this has been proposed for CSS 3.

But centre floats would be interesting-- presumably you'd interrupt each
line either side of the float.

I've got it working using tables, now - by making a table's background
colour provide the drop-shadow and then offsetting a div within the
table. It works great, but it uses two single-cell tables, one to
provide the drop-shadow with a dynamic width, with an offset div
inside that, and then a second single-celled table within that div to
provide the vertical centring. Bit clunky but it works (see my mock-up
at http://tinyurl.com/5k8hdy).

Re. the workaround you linked to for the fact that IE doesn't support
display: table, I'm not sure whether it can be made to work in this
context - part of my problem is that I don't really understand the
workaround. See my failed attempt to get it working at
http://tinyurl.com/6kvjtn , which works in Firefox but not in IE.

Can you see any way to tweak the code in my mock-up at
http://tinyurl.com/6kvjtn so that the banner looks the same as the
mock-up at http://tinyurl.com/5k8hdy in all browsers?

I don't know anything about IE so can't help you with that.

[Ben C]

On 2008-04-10, Dave Rado <da*******@dsl.pipex.comwrote:
[...]

Why does Dreamweaver give you an xhtml transitional doctype by default
then?

Does it actually generate valid xhtml?

[Dave Rado]

On 10 Apr, 21:39, Ben C <[e-mail]:

On 2008-04-10, Dave Rado <[e-mail]:
[...]

Why does Dreamweaver give you an xhtml transitional doctype by default
then?

Does it actually generate valid xhtml?

Yes.

Dave

[Dave Rado]

Hi Jonathan

On 10 Apr, 19:11, "Jonathan N. Little" <[e-mail]:

Well since they are most likely being incorrectly served as text/html,
yes. Also since most likely your pages are semi-xhtml a little parsing
with sed could fix them in a flash. I am sure someone here knows of an
xhtml stripping utility...

At the very least don't perpetuate your mistake by continuing to create
your new pages as xhtml...

I still don't understand what problems it will cause me that are
serious enough to justify changing back.

Dave

[Jonathan N. Little]

Dave Rado wrote:

Hi Jonathan

On 10 Apr, 19:11, "Jonathan N. Little" <[e-mail]:

>Well since they are most likely being incorrectly served as text/html,
yes. Also since most likely your pages are semi-xhtml a little parsing
with sed could fix them in a flash. I am sure someone here knows of an
xhtml stripping utility...

At the very least don't perpetuate your mistake by continuing to create
your new pages as xhtml...

I still don't understand what problems it will cause me that are
serious enough to justify changing back.

Okay, if you do xhtml *correctly* here is why. Point any version of IE
to this page...

http://www.fingerlakesbmw.org/test/xhtml.php
XHTML Properly Served
--
Take care,

Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com

[dorayme]

In article
<e6**********************************@p39g2000prm. googlegroups.com>,
Dave Rado <da*******@dsl.pipex.comwrote:

On 10 Apr, 16:16, "Jonathan N. Little" <[e-mail]:

Any reason why you are using XHTML? Bet not...

See for example:
http://www.w3schools.com/xhtml/xhtml_why.asp

You might like to read:

<http://www.spartanicus.utvinternet.ie/no-xhtml.htm>

--
dorayme

[dorayme]

In article
<21**********************************@e10g2000prf. googlegroups.com>,
Dave Rado <da*******@dsl.pipex.comwrote:

Hi

I've created a banner with a drop-shadow using a div - there's a mock-
up at http://tinyurl.com/6n7czu . The only problem is that the way
I've done it, I have to specify the width of the div - if I don't, it
renders with a width of 100%. Is there any way of making the width fit
the text it encloses (plus padding), and so that it expand
automatically if you add more text?

Try changing your css to:

..BannerWidth1 {width: 11em;}

(quick fix)

--
dorayme

[Dave Rado]

Hi dorayme

On 8 Apr, 23:01, dorayme <[e-mail]:

Try changing your css to:

.BannerWidth1 {width: 11em;}

(quick fix)

No, I probably didn't explain what I'm trying to achieve very well.
I've now updated my mock-up at http://tinyurl.com/6n7czu so that it
has a width of 11em, and I've added some more text within the banner
(I've added the word "more"); but the width of the banner hasn't
increased, and the text has been forced to wrap onto a second line,
which I don't want to happen. What I want is for the banner's width to
be slightly wider than the width of the widest line of text within it
(so no unnecessary wrapping, but also no unnecessary white space), up
to a maximum width of 100%, regardless of how much text is within it.
Is that possible?

Dave

[dorayme]

In article
<ea**********************************@w5g2000prd.g ooglegroups.com>,
Dave Rado <da*******@dsl.pipex.comwrote:

Hi dorayme

On 8 Apr, 23:01, dorayme <[e-mail]:

Try changing your css to:

.BannerWidth1 {width: 11em;}

(quick fix)

No, I probably didn't explain what I'm trying to achieve very well.
I've now updated my mock-up at http://tinyurl.com/6n7czu so that it
has a width of 11em, and I've added some more text within the banner
(I've added the word "more"); but the width of the banner hasn't
increased, and the text has been forced to wrap onto a second line,
which I don't want to happen. What I want is for the banner's width to
be slightly wider than the width of the widest line of text within it
(so no unnecessary wrapping, but also no unnecessary white space), up
to a maximum width of 100%, regardless of how much text is within it.
Is that possible?

I widthed to suit your previous text. You have made the text more now
and of course it must wrap. So, I would think, you must increase the
width of the banner to more than 11em. The point of em widthing (which
is a unit suited to characters) is that as the characters get bigger or
smaller (think user font-size settings), so too does the box that is so
widthed.

--
dorayme

[Dave Rado]

Hi dorayme

On 9 Apr, 01:10, dorayme <[e-mail]:

You have made the text more now
and of course it must wrap.

But tables do allow one to do what I'm trying to do. I've now updated
my mock-up at http://tinyurl.com/6n7czu again, and if you look at the
second banner on the page, which is a table, if you add more text to
it, it's width does expand automatically, which is what I'm trying to
achieve (so that I don't have to have a hundreds of BannerWidthx
styles for all the different banners on my site).

The only problem with using a table in place of the DocBanner div is
that I can't see any way to apply a drop-shadow to it. Is there no
possible way to combine the two techniques, so as to get the benefits
of the table's dynamic width, while still having a drop-shadow?

Dave

[dorayme]

In article
<cc**********************************@t54g2000hsg. googlegroups.com>,
Dave Rado <da*******@dsl.pipex.comwrote:

Hi dorayme

On 9 Apr, 01:10, dorayme <[e-mail]:

You have made the text more now
and of course it must wrap.

But tables do allow one to do what I'm trying to do.

You seem to have forgotten about older query and started talking about
tables suddenly without any acknowledgement about your previous query.
Your example below gets it centred and shrunk to fit and shadowed up and
ready to go on stage to sing and dance. So why so keen on a table then?

Not that I mind table talk. Let's have some table talk now:

I've now updated
my mock-up at http://tinyurl.com/6n7czu again, and if you look at the
second banner on the page, which is a table, if you add more text to
it, it's width does expand automatically, which is what I'm trying to
achieve (so that I don't have to have a hundreds of BannerWidthx
styles for all the different banners on my site).

Well, I am sure we have discussed you using tables and I normally
approve of *you* doing this. Not many others here would, but most of
them are martians, you see... <g>

There are a number of things that are shrink-to-fit, and tables cells
have this magic property.

--
dorayme

[Dave Rado]

Hi dorayme

On 9 Apr, 02:33, dorayme <[e-mail]:

So why so keen on a table then?

I have no ideological commitment for or against tables, I simply want
to use the best tool for the job in hand.

There are a number of things that are shrink-to-fit, and tables cells
have this magic property.

Yes, but I can't work out how to apply a drop-shadow to a table whose
width is not specified. Does it require javascript to achieve this? I
know it must be possible using javascript, because I've seen
javascript-based menu systems and pop-ups that have a drop-shadow and
which automatically expand in width if one adds more text to them, but
I have no idea how they achieve this.

Dave

[Ben C]

On 2008-04-08, Dave Rado <da*******@dsl.pipex.comwrote:

Hi

I've created a banner with a drop-shadow using a div - there's a mock-
up at http://tinyurl.com/6n7czu . The only problem is that the way
I've done it, I have to specify the width of the div - if I don't, it
renders with a width of 100%. Is there any way of making the width fit
the text it encloses (plus padding), and so that it expand
automatically if you add more text?

You need a shrink-to-fit container, which means a float or display:
table, table-cell or inline-block.

Most of those don't work in IE and inline-block doesn't in Firefox 2.

It looks like you also want the box centered in which case float is out.

See

http://netweaver.com.au/alt/shrinkTo...rinkToFit.html

which has a possible workaround for IE.

[Dave Rado]

Hi Ben

On 9 Apr, 21:43, Ben C <[e-mail]:

You need a shrink-to-fit container, which means a float or display:
table, table-cell or inline-block.

Most of those don't work in IE and inline-block doesn't in Firefox 2.

It looks like you also want the box centered in which case float is out.

See

http://netweaver.com.au/alt/shrinkTo...ingShrinkToFit....

which has a possible workaround for IE.

Yes, floats are out of the question because as you say, it needs to be
horizontally centred. It bugs me that W3C don't think the ability to
centre floats is worthwhile - it makes them seem rather out of touch,
to me.

I've got it working using tables, now - by making a table's background
colour provide the drop-shadow and then offsetting a div within the
table. It works great, but it uses two single-cell tables, one to
provide the drop-shadow with a dynamic width, with an offset div
inside that, and then a second single-celled table within that div to
provide the vertical centring. Bit clunky but it works (see my mock-up
at http://tinyurl.com/5k8hdy).

Re. the workaround you linked to for the fact that IE doesn't support
display: table, I'm not sure whether it can be made to work in this
context - part of my problem is that I don't really understand the
workaround. See my failed attempt to get it working at http://tinyurl.com/6kvjtn
, which works in Firefox but not in IE.

Can you see any way to tweak the code in my mock-up at http://tinyurl.com/6kvjtn
so that the banner looks the same as the mock-up at http://tinyurl.com/5k8hdy
in all browsers?

Dave

[Bergamot]

Dave Rado wrote:

>
W3C don't think the ability to
centre floats is worthwhile

Hmmm... I consider centering and floating to be 2 mutually exclusive
things. The shrink-wrapping feature of floats is all you seem interested
in. Wanting that shouldn't equate to wanting floats.

- it makes them seem rather out of touch,
to me.

They may indeed be out of touch, but not necessarily over this. I'd call
IE out of touch, for not supporting the properties that give the results
you are really after - display:table etc.

I've got it working using tables, now
at http://tinyurl.com/5k8hdy).

Are you aware that your doctype triggers quirks mode in IE6? Drop the
xml prolog.

--
Berg

[Dave Rado]

Hi Berg

On 10 Apr, 05:19, Bergamot <[e-mail]:

>I'd call IE out of touch, for not supporting the properties that give the
results you are really after - display:table etc.

True ...

Are you aware that your doctype triggers quirks mode in IE6? Drop the
xml prolog.

That's done on purpose because of IE6's bugs when in strict mode. IE7
is running in strict mode though. And this has no effect on this
particular uissue.

Dave

[Jonathan N. Little]

Dave Rado wrote:

On 10 Apr, 05:19, Bergamot <[e-mail]:

>Are you aware that your doctype triggers quirks mode in IE6? Drop the
xml prolog.

That's done on purpose because of IE6's bugs when in strict mode. IE7
is running in strict mode though. And this has no effect on this
particular uissue.

Any reason why you are using XHTML? Bet not...

--
Take care,

Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com

[Jonathan N. Little]

Dave Rado wrote:

Hi

I've created a banner with a drop-shadow using a div - there's a mock-
up at http://tinyurl.com/6n7czu . The only problem is that the way
I've done it, I have to specify the width of the div - if I don't, it
renders with a width of 100%. Is there any way of making the width fit
the text it encloses (plus padding), and so that it expand
automatically if you add more text?

Use float is the only way I know of and include IE, else you must
specify a width... simple examples

http://www.littleworksstudio.com/tem....20080410.html

--
Take care,

Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com

[Dave Rado]

On 10 Apr, 16:16, "Jonathan N. Little" <[e-mail]:

Any reason why you are using XHTML? Bet not...

See for example:
http://www.w3schools.com/xhtml/xhtml_why.asp

Dave

[Dave Rado]

On 10 Apr, 17:26, "Jonathan N. Little" <[e-mail]:

Dave Rado wrote:

Hi

I've created a banner with a drop-shadow using a div - there's a mock-
up athttp://tinyurl.com/6n7czu. The only problem is that the way
I've done it, I have to specify the width of the div - if I don't, it
renders with a width of 100%. Is there any way of making the width fit
the text it encloses (plus padding), and so that it expand
automatically if you add more text?

Use float is the only way I know of and include IE, else you must
specify a width... simple examples

http://www.littleworksstudio.com/tem....20080410.html

--
Take care,

Jonathan
-------------------
LITTLE WORKS STUDIOhttp://www.LittleWorksStudio.com

Floats don't meet my requirement for reasons discussed earlier in the
thread (the boxes have to be shrink-to-fit *and* centred). I've got it
working using tables though.

Dave

[Jonathan N. Little]

Dave Rado wrote:

On 10 Apr, 16:16, "Jonathan N. Little" <[e-mail]:

>Any reason why you are using XHTML? Bet not...

See for example:
http://www.w3schools.com/xhtml/xhtml_why.asp

Do not be deceived, www.w3schools.com has no association with w3.org.
Much on www.w3schools.com is just plain incorrect.

Except for a very narrow, often never used features, XHTML is no better
than HTML for creating websites. In fact unless you need the advanced
namespace and other features (which you don't) XHTML is an impediment to
your website design, much-much-much discussed here. If you do not know
what I am talking about then you *absolutely* do not need and should not
use XHTML.

--
Take care,

Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com

[Dave Rado]

Hi Jonathan

On 10 Apr, 18:06, "Jonathan N. Little" <[e-mail]:

Do not be deceived,www.w3schools.comhas no association with w3.org.
Much onwww.w3schools.comis just plain incorrect.

I've seen loads of websites, though - I only gave that link as one
example of many - that say that if you want to be forced to write well
structured html, and if you're keen on standards (both of which are
true in my case), then using an xhtml doctype will help to you to do
that. (And my pages do all validate).

Except for a very narrow, often never used features, XHTML is no better
than HTML for creating websites. In fact unless you need the advanced
namespace and other features (which you don't) XHTML is an impediment to
your website design, much-much-much discussed here. If you do not know
what I am talking about then you *absolutely* do not need and should not
use XHTML.

Why does Dreamweaver give you an xhtml transitional doctype by default
then? And given that I've already marked up several hundred webpages
in valid xhtml, with closing /tags for images etc., is it really
worth the many hours of work it would take to change it back now?

Dave

[Dave Rado]

On 10 Apr, 18:06, "Jonathan N. Little" <[e-mail]:

Except for a very narrow, often never used features, XHTML is no better
than HTML for creating websites. In fact unless you need the advanced
namespace and other features (which you don't) XHTML is an impediment to
your website design, much-much-much discussed here. If you do not know
what I am talking about then you *absolutely* do not need and should not
use XHTML.

Also in addition to my other reply, I've seen sites that rave about
the benefits of XMLHttpRequest etc., which admittedly I don't
currently use, but the point is, don't things like that mean that
using an xhtml doctype keeps more options open for you in the future?

Dave

[Jonathan N. Little]

Dave Rado wrote:

Why does Dreamweaver give you an xhtml transitional doctype by default
then?

Hmmm good one, it's self-answering ;-)

I don't use WYSIMWYG (What You See Is Maybe What You Get) editors, but I
believe you can set DW to code HTML 4.01 Strict

And given that I've already marked up several hundred webpages
in valid xhtml, with closing /tags for images etc., is it really
worth the many hours of work it would take to change it back now?

Well since they are most likely being incorrectly served as text/html,
yes. Also since most likely your pages are semi-xhtml a little parsing
with sed could fix them in a flash. I am sure someone here knows of an
xhtml stripping utility...

At the very least don't perpetuate your mistake by continuing to create
your new pages as xhtml...
--
Take care,

Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com

[Bergamot]

Dave Rado wrote:

>
Why does Dreamweaver give you an xhtml transitional doctype by default

Because it's trendy, nothing more.

--
Berg

[Ben C]

On 2008-04-09, Dave Rado <da*******@dsl.pipex.comwrote:

Hi Ben

On 9 Apr, 21:43, Ben C <[e-mail]:

>You need a shrink-to-fit container, which means a float or display:
table, table-cell or inline-block.

Most of those don't work in IE and inline-block doesn't in Firefox 2.

It looks like you also want the box centered in which case float is out.

See

http://netweaver.com.au/alt/shrinkTo...ingShrinkToFit....

which has a possible workaround for IE.

Yes, floats are out of the question because as you say, it needs to be
horizontally centred. It bugs me that W3C don't think the ability to
centre floats is worthwhile - it makes them seem rather out of touch,
to me.

More useful would be if you could set width: greedy or width:
shrink-to-fit on any block-level element.

Then you wouldn't have to use float or table-cell etc. just for the
shrink-to-fit side-effect and then have to work around the effect so to
speak.

I think something like this has been proposed for CSS 3.

But centre floats would be interesting-- presumably you'd interrupt each
line either side of the float.

I've got it working using tables, now - by making a table's background
colour provide the drop-shadow and then offsetting a div within the
table. It works great, but it uses two single-cell tables, one to
provide the drop-shadow with a dynamic width, with an offset div
inside that, and then a second single-celled table within that div to
provide the vertical centring. Bit clunky but it works (see my mock-up
at http://tinyurl.com/5k8hdy).

Re. the workaround you linked to for the fact that IE doesn't support
display: table, I'm not sure whether it can be made to work in this
context - part of my problem is that I don't really understand the
workaround. See my failed attempt to get it working at
http://tinyurl.com/6kvjtn , which works in Firefox but not in IE.

Can you see any way to tweak the code in my mock-up at
http://tinyurl.com/6kvjtn so that the banner looks the same as the
mock-up at http://tinyurl.com/5k8hdy in all browsers?

I don't know anything about IE so can't help you with that.

[Ben C]

On 2008-04-10, Dave Rado <da*******@dsl.pipex.comwrote:
[...]

Why does Dreamweaver give you an xhtml transitional doctype by default
then?

Does it actually generate valid xhtml?

[Dave Rado]

On 10 Apr, 21:39, Ben C <[e-mail]:

On 2008-04-10, Dave Rado <[e-mail]:
[...]

Why does Dreamweaver give you an xhtml transitional doctype by default
then?

Does it actually generate valid xhtml?

Yes.

Dave

[Dave Rado]

Hi Jonathan

On 10 Apr, 19:11, "Jonathan N. Little" <[e-mail]:

Well since they are most likely being incorrectly served as text/html,
yes. Also since most likely your pages are semi-xhtml a little parsing
with sed could fix them in a flash. I am sure someone here knows of an
xhtml stripping utility...

At the very least don't perpetuate your mistake by continuing to create
your new pages as xhtml...

I still don't understand what problems it will cause me that are
serious enough to justify changing back.

Dave

[Jonathan N. Little]

Dave Rado wrote:

Hi Jonathan

On 10 Apr, 19:11, "Jonathan N. Little" <[e-mail]:

>Well since they are most likely being incorrectly served as text/html,
yes. Also since most likely your pages are semi-xhtml a little parsing
with sed could fix them in a flash. I am sure someone here knows of an
xhtml stripping utility...

At the very least don't perpetuate your mistake by continuing to create
your new pages as xhtml...

I still don't understand what problems it will cause me that are
serious enough to justify changing back.

Okay, if you do xhtml *correctly* here is why. Point any version of IE
to this page...

http://www.fingerlakesbmw.org/test/xhtml.php
XHTML Properly Served
--
Take care,

Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com

[dorayme]

In article
<e6**********************************@p39g2000prm. googlegroups.com>,
Dave Rado <da*******@dsl.pipex.comwrote:

On 10 Apr, 16:16, "Jonathan N. Little" <[e-mail]:

Any reason why you are using XHTML? Bet not...

See for example:
http://www.w3schools.com/xhtml/xhtml_why.asp

You might like to read:

<http://www.spartanicus.utvinternet.ie/no-xhtml.htm>

--
dorayme

[Dave Rado]

On 11 Apr, 02:41, dorayme <[e-mail]:

You might like to read:

<http://www.spartanicus.utvinternet.ie/no-xhtml.htm>

Another good read is:
http://www.webdevout.net/articles/beware-of-xhtml

Okay my development site has now all been converted to valid html
4.01.

Thanks all.

Dave

[Jonathan N. Little]

Dave Rado wrote:

On 11 Apr, 02:41, dorayme <[e-mail]:

>You might like to read:

<http://www.spartanicus.utvinternet.ie/no-xhtml.htm>

Another good read is:
http://www.webdevout.net/articles/beware-of-xhtml

Okay my development site has now all been converted to valid html
4.01.

Thanks all.

Not that we put a gun to your head...well we kind'a did...but you will
find it is a smart move in both the short and long term. I don't think
xhtml is going anywhere anytime soon, if at all.

--
Take care,

Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com