Setting DIV Height

Discussion in 'HTML' started by Jeff Bowman, Dec 22, 2006.

  1. Jeff Bowman

    Jeff Bowman Guest

    Jeff Bowman, Dec 22, 2006
    #1
    1. Advertising

  2. Jeff Bowman

    -Lost Guest

    "Jeff Bowman" <> wrote in message
    news:458b41a0$...
    > 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
    -Lost, Dec 22, 2006
    #2
    1. Advertising

  3. Jeff Bowman

    Bergamot Guest

    Jeff Bowman wrote:
    >
    > 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.

    --
    Berg
    Bergamot, Dec 22, 2006
    #3
  4. Jeff Bowman

    Jeff Bowman Guest

    "-Lost" <> wrote in message
    news:...

    > 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!
    Jeff Bowman, Dec 23, 2006
    #4
  5. Jeff Bowman

    dorayme Guest

    In article <>,
    "Jeff Bowman" <> wrote:

    > 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>

    --
    dorayme
    dorayme, Dec 23, 2006
    #5
  6. Jeff Bowman

    Jeff Bowman Guest

    "Bergamot" <> wrote in message
    news:...
    > 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.
    Jeff Bowman, Dec 23, 2006
    #6
  7. Jeff Bowman

    -Lost Guest

    "Jeff Bowman" <> wrote in message
    news:...
    > "-Lost" <> wrote in message
    > news:...
    >
    >> 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...


    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

    >> 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!


    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
    -Lost, Dec 23, 2006
    #7
  8. Jeff Bowman

    Bergamot Guest

    Jeff Bowman wrote:
    >
    > 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.

    --
    Berg
    Bergamot, Dec 23, 2006
    #8
  9. Jeff Bowman

    -Lost Guest

    "Bergamot" <> wrote in message news:...
    > Jeff Bowman wrote:
    >>
    >> 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.
    >
    > --
    > Berg


    This might be it.d

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

    -Lost
    -Lost, Dec 24, 2006
    #9
  10. Jeff Bowman

    Jeff Bowman Guest

    "dorayme" <> wrote in message
    news:...
    > In article <>,
    > "Jeff Bowman" <> wrote:
    >
    >> 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>


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


    --
    We're losing America. To see how you can help
    get her back, visit www.FreedomToFascism.com.
    Jeff Bowman, Dec 27, 2006
    #10
  11. Jeff Bowman

    Jeff Bowman Guest

    "-Lost" <> wrote in message
    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.


    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.



    >>> Also, totally off the subject... what in the world is all that
    >>> extraneous code for?

    >> It's an ASP.NET server control that I'm building.

    > 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 :)



    --
    We're losing America. To see how you can help
    get her back, visit www.FreedomToFascism.com.
    Jeff Bowman, Dec 27, 2006
    #11
  12. Jeff Bowman

    Jeff Bowman Guest

    "Bergamot" <> wrote in message
    news:...
    > Jeff Bowman wrote:
    >>
    >> 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.


    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.


    --
    We're losing America. To see how you can help
    get her back, visit www.FreedomToFascism.com.
    Jeff Bowman, Dec 27, 2006
    #12
  13. Jeff Bowman

    Jeff Bowman Guest

    Jeff Bowman, Dec 27, 2006
    #13
  14. Jeff Bowman

    dorayme Guest

    In article <>,
    "Jeff Bowman" <> wrote:

    >
    > "Bergamot" <> wrote in message
    > news:...


    > > 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?


    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>

    --
    dorayme
    dorayme, Dec 27, 2006
    #14
  15. Jeff Bowman

    Bergamot Guest

    Jeff Bowman wrote:
    > "Bergamot" <> wrote in message
    > news:...
    >> Jeff Bowman wrote:
    >>>
    >>> Maybe I should be asking instead if there's a way to stretch a background
    >>> image?

    >>
    >> About the best you can do is anchor the image to either the top or
    >> bottom corner and repeat-x.

    >
    > 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.

    --
    Berg
    Bergamot, Dec 28, 2006
    #15
  16. Jeff Bowman

    Jeff Bowman Guest

    "dorayme" <> wrote in message
    news:...

    > 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!



    --
    We're losing America. To see how you can help
    get her back, visit www.FreedomToFascism.com.



    --
    Posted via a free Usenet account from http://www.teranews.com
    Jeff Bowman, Jan 13, 2007
    #16
  17. Jeff Bowman

    Jeff Bowman Guest

    "Bergamot" <> wrote in message
    news:...

    >> How do you mean 'anchor'?

    >
    > 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.



    >> 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'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 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.



    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.




    --
    We're losing America. To see how you can help
    get her back, visit www.FreedomToFascism.com.




    --
    Posted via a free Usenet account from http://www.teranews.com
    Jeff Bowman, Jan 13, 2007
    #17
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. HJ
    Replies:
    5
    Views:
    834
    Jonathan N. Little
    Sep 1, 2006
  2. muggslab

    Div Height = Image height. help

    muggslab, Feb 1, 2010, in forum: HTML and CSS
    Replies:
    1
    Views:
    853
    muggslab
    Feb 1, 2010
  3. MyndPhlyp

    Setting <img> height to match <td> height

    MyndPhlyp, Dec 21, 2003, in forum: Javascript
    Replies:
    5
    Views:
    184
    MyndPhlyp
    Dec 22, 2003
  4. Don Vaillancourt

    How to tell height of div where height is not set?

    Don Vaillancourt, Jan 28, 2005, in forum: Javascript
    Replies:
    8
    Views:
    133
    Dietmar Meier
    Jan 31, 2005
  5. Replies:
    0
    Views:
    114
Loading...

Share This Page