min-height div background-image

[windandwaves]

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

 

[Lauri Raittila]

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

 

[windandwaves]

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

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?

Right. It's better to avoid setting it.


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?

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

 

[Lauri Raittila]

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.

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.


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)