|
|
Posted by windandwaves on 06/19/05 04:59
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
[Back to original message]
|