Setting DIV Height

[Jeff Bowman]

Hi Kids

Say, what's the general consensus on using tables to force layer height,
like so:

http://jeffbowman.com/boxtest/

Thanks!

 

[-Lost]

Hi Kids

Say, what's the general consensus on using tables to force layer height, like so:

http://jeffbowman.com/boxtest/

Thanks!

Well, people have been misusing tables for quite a few years so why stop now?

Seriously, if you are already playing about with CSS, why not just set the height via CSS?

Also, totally off the subject... what in the world is all that extraneous code for? I
also do not understand why for such a small example you appear to be dynamically
generating each of eight PNGs. Weird.

-Lost

 

[Bergamot]

Say, what's the general consensus on using tables to force layer height,

http://jeffbowman.com/boxtest/

Regardless of the type of container, setting a fixed height rarely works
well with text elements, especially when the height is set in px units.
Take a look in Firefox with text zoomed up a couple notches and see what
happens.

 

[Jeff Bowman]

Well, people have been misusing tables for quite a few years so why stop
now?

HeHeHe...

Seriously, if you are already playing about with CSS, why not just set the
height via CSS?

Oh my! Last I heard it wasn't possible--this must be new news?

If there's actually a way to do it, I'd sure be pleased if you could send a
quick tip...

Also, totally off the subject... what in the world is all that extraneous
code for? I also do not understand why for such a small example you
appear to be dynamically generating each of eight PNGs. Weird.

Sure, no problem, I can help you with that ;-)

It's an ASP.NET server control that I'm building. It enables the web
application developer to specify various settings--CornerRadius, ForeColor,
BackColor, etc.--and then the control generates the appropriate CSS and
images dynamically at runtime. At design time all the developer has to do is
drag and drop the control onto a form, set a few properties and presto! it
works--no fiddling with images and such. It's basically a productivity tool.

True, there's extra bandwidth and CPU overhead associated, but given today's
machine capacities those are relatively minimal and shouldn't be a concern
for all but the most demanding of applications. And once an image is
generated for the first time it goes into the server-side memory cache, so
CPU usage is kept down even further.

All this is well and good, I suppose--I'm pretty handy at server-side logic
and database stuff, but it's you guys I stand in awe of. The way you're able
to make a browser sit up and pay attention continually amazes me. And the
designs--my goodness what designs!

Thanks!

 

[dorayme]

but it's you guys I stand in awe of. The way you're able
to make a browser sit up and pay attention continually amazes me. And the
designs--my goodness what designs!

I am going to watch you very closely now and see if this flattery
does you any good. I tried all the Dale Carnegie courses and
failed. I went to see a shrink about it, he mumbled about needing
to be genuine and that is where I needed to improve. But if I
watch you very very closely, I reckon I could improve my cover...
<g>

 

[Jeff Bowman]

Regardless of the type of container, setting a fixed height rarely works
well with text elements, especially when the height is set in px units.

FWIW, the only time the control emits table markup is if the FillColorBegin
and FillColorEnd properties aren't the same--IOW a gradient is called for,
such as in this particular example. And that's only because I'm pretty sure
it's not possible to stretch a background image--but I could be wrong.

If there's no background image there's no need for a fixed height and
therefore no need for a table.

Maybe I should be asking instead if there's a way to stretch a background
image?

Take a look in Firefox with text zoomed up a couple notches and see what
happens.

Yep, spotted that one already. Same considerations as above apply.

I may end up having to just warn users of the control about the design
issues associated with setting a gradient fill, although I hope it doesn't
come to that last resort.

 

[-Lost]

HeHeHe...


Oh my! Last I heard it wasn't possible--this must be new news?

If there's actually a way to do it, I'd sure be pleased if you could send a quick tip...

Well, often I hear that giving the body a height of 100% allows for DIVs of varying
percentage heights.

What *I* have found to work however is simple using absolute position (with top, right,
left, or bottom) and then applying the height of the DIV. In that fashion I get 100% DIVs
with no problem.

Another thing that I think actually may be of more use to you is:

http://www.greywyvern.com/code/min-height-hack.html

Sure, no problem, I can help you with that ;-)

It's an ASP.NET server control that I'm building. It enables the web application
developer to specify various settings--CornerRadius, ForeColor, BackColor, etc.--and
then the control generates the appropriate CSS and images dynamically at runtime. At
design time all the developer has to do is drag and drop the control onto a form, set a
few properties and presto! it works--no fiddling with images and such. It's basically a
productivity tool.

True, there's extra bandwidth and CPU overhead associated, but given today's machine
capacities those are relatively minimal and shouldn't be a concern for all but the most
demanding of applications. And once an image is generated for the first time it goes
into the server-side memory cache, so CPU usage is kept down even further.

All this is well and good, I suppose--I'm pretty handy at server-side logic and database
stuff, but it's you guys I stand in awe of. The way you're able to make a browser sit up
and pay attention continually amazes me. And the designs--my goodness what designs!

Thanks!

Ah, OK. It was naive of me to think it was "just a simple test".

Also, I would reserve some of the awe for others more deserving of it. I may not be the
best candidate for praise. Thank you nonetheless.

Be well, Jeff.

-Lost

 

[Bergamot]

Maybe I should be asking instead if there's a way to stretch a background
image?

No, there isn't - all you can do reliably is repeat on the x and/or y
axis. Maybe CSS3 has a stretch property (haven't checked), but don't
hold your breath waiting for that.

About the best you can do is anchor the image to either the top or
bottom corner and repeat-x. Set the background color so that it blends
with wherever the gradient color leaves off.

BTW, there was an article posted at A List Apart about another way of
making gradient backgrounds, but I didn't save the URL. Maybe it will be
useful to you, if you can find it.

 

[-Lost]

No, there isn't - all you can do reliably is repeat on the x and/or y
axis. Maybe CSS3 has a stretch property (haven't checked), but don't
hold your breath waiting for that.

About the best you can do is anchor the image to either the top or
bottom corner and repeat-x. Set the background color so that it blends
with wherever the gradient color leaves off.

BTW, there was an article posted at A List Apart about another way of
making gradient backgrounds, but I didn't save the URL. Maybe it will be
useful to you, if you can find it.

This might be it.d

http://www.alistapart.com/articles/supereasyblendys/

-Lost

 

[Jeff Bowman]

I am going to watch you very closely now and see if this flattery
does you any good. I tried all the Dale Carnegie courses and
failed. I went to see a shrink about it, he mumbled about needing
to be genuine and that is where I needed to improve. But if I
watch you very very closely, I reckon I could improve my cover...
<g>

Well, hopefully it'll get me everywhere--if I'm lucky, maybe even
Carnegie/Hall ;-)

 

[Jeff Bowman]

Well, often I hear that giving the body a height of 100% allows for DIVs
of varying percentage heights.

What *I* have found to work however is simple using absolute position
(with top, right, left, or bottom) and then applying the height of the
DIV. In that fashion I get 100% DIVs with no problem.

OK, here's what I've decided to do. I'm simply going to set the DIVs' height
property. (Did I say that right--'property'?)

I guess I'm feeling a bit silly now, for not trying it before wasting yours
and others' time. I just tried it sans table and it seems to work just fine.
So now the whole thing has got me wondering--why all the hubub over the
supposed inability to set DIV height? I guess I must be missing something
somewhere...

Another thing that I think actually may be of more use to you is:

http://www.greywyvern.com/code/min-height-hack.html

Good lead, thanks.

Ah, OK. It was naive of me to think it was "just a simple test".

Heck no! Mine is a pretty unusual implementation, I'll be the first to
admit.

Also, I would reserve some of the awe for others more deserving of it. I
may not be the best candidate for praise. Thank you nonetheless.

You're too modest

Be well, Jeff.

Thanks, I will--you too

 

[Jeff Bowman]

No, there isn't - all you can do reliably is repeat on the x and/or y
axis. Maybe CSS3 has a stretch property (haven't checked), but don't
hold your breath waiting for that.

Ah, I didn't think so. Thanks for the clarification. CSS3 apparently will
have a background-size property, but as you say I'm sure we'll be blue in
the face before we see it.

About the best you can do is anchor the image to either the top or
bottom corner and repeat-x. Set the background color so that it blends
with wherever the gradient color leaves off.

Yep, turns out that's how I'm going to handle that particular issue, except
I'll to fade into the background color using PNG transparency. How do you
mean 'anchor'? Could you provide a quick sample snippet?

Also, IE (7, at least) seems to have a nasty habit of displaying solid
images of a given color in just a tad different shade than an element's
background color, even if the markup specifies the exact same color as the
image. See below for more on -that- issue.

BTW, there was an article posted at A List Apart about another way of
making gradient backgrounds, but I didn't save the URL. Maybe it will be
useful to you, if you can find it.

I found it, thanks. Considering the gradient fix I just mentioned, I broke
into a cold sweat and was mortified to read about IE6's lack of support for
PNG transparency. (See? I've still got a long way to go in learning about
all of this.)

I then tried the AlphaImageLoader fix suggested, and that works, but
unfortunately it causes IE6 to not respect the image positioning CSS. For
control configurations that specify a background gradient, I can think of no
other solution than to emit table markup (for <= IE6 browsers only).

If you can see a better way through, I'd sure be pleased to hear it.

 

[Jeff Bowman]

This might be it.d

http://www.alistapart.com/articles/supereasyblendys/

Yep, that's it. An article it links to is interesting, too:

http://alistapart.com/stories/pngopacity/

 

[dorayme]

Yep, turns out that's how I'm going to handle that particular issue, except
I'll to fade into the background color using PNG transparency. How do you
mean 'anchor'? Could you provide a quick sample snippet?

When Bergamot is on hols, I am his official spokesmartian:

If you do nothing, the background image starts at top left of
whatever box it is in. If you want you can also "anchor" it there
officially or elsewhere with:

background-position: numberUnit numberUnit

"If a background image has been specified, this property
specifies its initial position." Bottom left eg. could be "0%
100%"

For more on units and shortcut keywords:

<http://www.w3.org/TR/CSS21/colors.html#propdef-background-positio
n>

 

[Bergamot]

How do you mean 'anchor'?
background-position

Also, IE (7, at least) seems to have a nasty habit of displaying solid
images of a given color in just a tad different shade than an element's
background color, even if the markup specifies the exact same color as the
image.

I hadn't noticed this, but that doesn't mean it doesn't happen. Of note,
however, is an issue with png gamma correction differences between PC
and Mac. I suggest google for more info on that subject.

I then tried the AlphaImageLoader fix suggested, and that works, but
unfortunately it causes IE6 to not respect the image positioning CSS.

Didn't they include a link to a MS reference page for AlphaImageLoader?
http://msdn2.microsoft.com/en-us/library/ms532969.aspx
It doesn't have an option to tile backgrounds, so the CSS background
position and repeat properties are irrelevant. This filter usually
stretches the background, which by chance is what you originally wanted.

I haven't used the Gradient filter, but you might want to look at it as
an alternative.

I can think of no
other solution than to emit table markup (for <= IE6 browsers only).

I don't see how this will help, but I can see how it may create other
problems. Caching comes to mind.

 

[Jeff Bowman]

When Bergamot is on hols, I am his official spokesmartian:

<g>

I wasn't ignoring your reply, I promise--I had a crummy Usenet provider, and
I just now switched.

If you do nothing, the background image starts at top left of
whatever box it is in. If you want you can also "anchor" it there
officially or elsewhere with:

background-position: numberUnit numberUnit

"If a background image has been specified, this property
specifies its initial position." Bottom left eg. could be "0%
100%"

For more on units and shortcut keywords:

<http://www.w3.org/TR/CSS21/colors.html#propdef-background-positio

Got it, thanks!

 

[Jeff Bowman]

background-position

Ah, OK.

I wasn't ignoring your reply, really--my Usenet provider didn't pick it up.
(Easy to blame it on someone else, eh? <s>)

Anyway, I just switched providers. This new one seems to be a little better.

I hadn't noticed this, but that doesn't mean it doesn't happen. Of note,
however, is an issue with png gamma correction differences between PC
and Mac. I suggest google for more info on that subject.

I've worked around the issue by generating a solid-color image the same size
as the corner images, and repeating it across the background. For a solid
fill, that is--for a gradient fill it gets handled differently of course.

Didn't they include a link to a MS reference page for AlphaImageLoader?
http://msdn2.microsoft.com/en-us/library/ms532969.aspx

Good link, thanks. RTFM is always better than flying blind.

This filter usually
stretches the background, which by chance is what you originally wanted.

Nice accident

I haven't used the Gradient filter, but you might want to look at it as
an alternative.

Yes, I'll have a look.

I don't see how this will help, but I can see how it may create other
problems. Caching comes to mind.

That's the only way I can find to position the transparent PNGs when using
the AlphaImageLoader filter. Can you think of another?

It already has created a problem. On a browser text resize it stretches the
overall size of the layer(s), while the same resize doesn't do so on a
div--the text spills out past the div's edges. Again, the control only emits
table markup for <= IE6 gradient fill configurations, so that serves to
mitigate the problem somewhat.

Caching? How would that apply? Could you clarify?

Here's the link again:

http://jeffbowman.com/boxtest/

Thanks.