min-height div background-image

Discussion in 'HTML' started by windandwaves, Jun 19, 2005.

  1. windandwaves

    windandwaves Guest

    Hi Gurus

    I have been working on www.waimanapoint.co.nz. In this design, I use two
    background images. I found that if I wanted to show a background image in a
    div, I had to set the height of that div - just having another div in the
    div (e.g.

    <div id="background-image-one">
    <div>
    lots of text
    </div>
    </div>


    ) with lots of text to give the parent div height did not show the
    background image that was set in the parent div.

    Using height is problematic, because if the text in the child div would
    require more height than the height set then you have to start using things
    like overflow and that gets ugly real quickly.

    I then discovered min-height, but apparently IE does not support that (not
    sure about older browser either), so I ended up adding an image of 1px wide
    and the intended height of the div to create a min-height.

    I am sure that there is a more graceful way to solving this problem. What
    would you suggest?

    Thanks in advance

    - Nicolaas
     
    windandwaves, Jun 19, 2005
    #1
    1. Advertising

  2. in alt.html, windandwaves wrote:
    > Hi Gurus
    >
    > I have been working on www.waimanapoint.co.nz. In this design, I use two
    > background images.


    Why? What do you mean?

    > I found that if I wanted to show a background image in a
    > div, I had to set the height of that div


    If your div is empty, that is usually best.

    [useless example snipped]

    > - just having another div in the div
    > with lots of text to give the parent div height did not show the
    > background image that was set in the parent div.


    That sounds strange, and when looking your website, I see 2 columns. You
    are floating them? Or positioning them? that would cause it, of course,
    as floated or absolutely positioned stuff is taken put of flow.

    > Using height is problematic, because if the text in the child div would


    Right. It's better to avoid setting it.

    > I then discovered min-height, but apparently IE does not support that (not
    > sure about older browser either), so I ended up adding an image of 1px wide
    > and the intended height of the div to create a min-height.


    You don't need image, you can use empty element. Or you can use height
    for IE and add display:table for others (to get strechy box IE has.)

    > I am sure that there is a more graceful way to solving this problem. What
    > would you suggest?


    If I only knew what exactly is your problem...

    BTW, box with your address and stuff in it needs min-width, or be big
    enough, I get text overflowing to left, and as it is white on white it
    gets hard to read...

    --
    Lauri Raittila <http://www.iki.fi/lr> <http://www.iki.fi/zwak/fonts>
    Utrecht, NL.
    Support me, buy Opera:
    https://secure.bmtmicro.com/opera/buy-opera.html?AID=882173
     
    Lauri Raittila, Jun 19, 2005
    #2
    1. Advertising

  3. windandwaves

    windandwaves Guest

    Lauri Raittila wrote:
    > in alt.html, windandwaves wrote:
    >> Hi Gurus
    >>
    >> I have been working on www.waimanapoint.co.nz. In this design, I
    >> use two background images.

    >
    > Why? What do you mean?


    Here is the css for the page. I have provided all of it, as I am not sure
    where I am going wrong.

    body {margin: 0;padding: 0; font-size: 100%}
    h1, p, a, li {font-family: tahoma, 'Arial Narrow', Verdana, Arial,Helvetica,
    'Gill Sans MT', sans-serif;}
    p{color: #3395B2;font-size: .8em;line-height: 1.3em; margin-top: 0px;
    padding-top: 0px;}
    a{text-decoration: none; color: #9fa388;}
    a:hover {color: #9e1819; }

    /*document laid out as page itself*/
    #container{margin: auto; margin-top: 20px; width: 704px;}
    #content {background: transparent url(bg3.gif) no-repeat 0 0; width: 704px;
    min-height: 155px;}
    #cs {float: right;}
    #content-left{width: 324px;padding-left: 15px; text-align: justify;float:
    left; margin-top: 0px; padding-top: 15px;}
    #title { text-transform: capitalize; color: #9e1818; font-weight: bold;}
    #content-right{width: 324px; padding-right: 15px;text-align:
    justify;float: right; margin-top: 0px; padding-top: 15px;}
    #menu {background: transparent url(bg4.gif) repeat-y 0 0; width: 704px;
    clear: both; min-height: 200px;}
    #nav{float: left; padding: 20px 0px 0px 15px;}
    #ms {float: right;}
    UL {left: 0px; padding: 0px; margin: 0px;}
    li{font-size: .9em;line-height: 0.9em;color: #9e1819;padding-top:
    4px;list-style-type: none; font-weight: bold; text-transform: capitalize;}
    li a{color: #ffffff;}
    li a:visited{color: #ffffff;}
    li a:hover{color: #9fa388;}
    #address{float: right; text-align: right;font-size: .9em;line-height:
    1.2em;color: #ffffff; padding: 20px 15px 0px 0px; }
    #address p {color: #ffffff; margin: 2px;}
    #address a {color: #FFFFFF;}
    #address a:hover {color: #9e1819;}
    #images {clear: both; padding-top: 15px;}
    #pic {margin: 0;padding: 0; border: 0; }


    >> I found that if I wanted to show a background image in a
    >> div, I had to set the height of that div

    >
    > If your div is empty, that is usually best.


    The div is not empty, there is another div in it and that child div contains
    lots of text.

    > [useless example snipped]
    >
    >> - just having another div in the div
    >> with lots of text to give the parent div height did not show the
    >> background image that was set in the parent div.

    >
    > That sounds strange, and when looking your website, I see 2 columns.
    > You are floating them? Or positioning them? that would cause it, of
    > course, as floated or absolutely positioned stuff is taken put of
    > flow.


    Ok, so you are saying is that if you float the child div then the height of
    the parent div is not set by the child div?
    >
    >> Using height is problematic, because if the text in the child div
    >> would

    >
    > Right. It's better to avoid setting it.
    >
    >> I then discovered min-height, but apparently IE does not support
    >> that (not sure about older browser either), so I ended up adding an
    >> image of 1px wide and the intended height of the div to create a
    >> min-height.

    >
    > You don't need image, you can use empty element. Or you can use height
    > for IE and add display:table for others (to get strechy box IE has.)


    If i set height in IE then I still have the height limitations in IE?

    >> I am sure that there is a more graceful way to solving this problem.
    >> What would you suggest?

    >
    > If I only knew what exactly is your problem...


    My problem is that the background image of the parent div is not shown
    because even though the parent div should be several hundred pixels high is
    seems to be of zero height. Setting the height solves the problem but
    creates a raft of new problems. I was wondering if there is a solution that
    shows the background image without the limitations of using height.

    > BTW, box with your address and stuff in it needs min-width, or be big
    > enough, I get text overflowing to left, and as it is white on white it
    > gets hard to read...


    OK, thank you, will fix!

    Thank you for your reply.

    - Nicolaas
     
    windandwaves, Jun 19, 2005
    #3
  4. in alt.html, windandwaves wrote:
    > Lauri Raittila wrote:
    > > in alt.html, windandwaves wrote:
    > >> Hi Gurus
    > >>
    > >> I have been working on www.waimanapoint.co.nz. In this design, I
    > >> use two background images.

    > >
    > > Why? What do you mean?

    >
    > Here is the css for the page. I have provided all of it, as I am not sure
    > where I am going wrong.


    Why do you think copy pasting it helps at all?

    Could you please
    a) answers my question?
    b) read my answer?

    I have no intention to debug your whole CSS. Posting it here helps none.

    > > If your div is empty, that is usually best.

    >
    > The div is not empty, there is another div in it and that child div contains
    > lots of text.


    But what you describe wouldn't happen. Maybe you can make your simplified
    example online, and see yourself?

    > Ok, so you are saying is that if you float the child div then the height of
    > the parent div is not set by the child div?


    Yes.

    > > You don't need image, you can use empty element. Or you can use height
    > > for IE and add display:table for others (to get strechy box IE has.)

    >
    > If i set height in IE then I still have the height limitations in IE?


    You need to use clearing div or something on the bottom for IE, propably
    (to trickker the bug.)

    Or you can make it inline block instead of table for IE:
    #thing {display:inline;display:inline-block;display:table;}

    Hm, actually, it is propably easiest to just float the container and have
    clear on next element (which you propabably alreasy have)

    --
    Lauri Raittila <http://www.iki.fi/lr> <http://www.iki.fi/zwak/fonts>
    Utrecht, NL.
    Support me, buy Opera:
    https://secure.bmtmicro.com/opera/buy-opera.html?AID=882173
     
    Lauri Raittila, Jun 19, 2005
    #4
    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. Malcolm Collett

    min-height on a div

    Malcolm Collett, Jan 13, 2004, in forum: HTML
    Replies:
    11
    Views:
    749
  2. Lois
    Replies:
    1
    Views:
    3,247
    Ryan Stewart
    Dec 27, 2004
  3. jc
    Replies:
    3
    Views:
    1,737
  4. Ciaran
    Replies:
    14
    Views:
    1,745
    dorayme
    Jun 27, 2009
  5. muggslab

    Div Height = Image height. help

    muggslab, Feb 1, 2010, in forum: HTML and CSS
    Replies:
    1
    Views:
    867
    muggslab
    Feb 1, 2010
Loading...

Share This Page