I have a php page that delivers valid 4.01 strict using valid css. The
pages display fine in IE 6, Firefox, Opera with:
css
ul li {
color: #f00;
font-family: "Comic Sans MS", tabitha, cursive;
font-size: 125%; list-style-type: none
}
ul li li {
color: #ff0;
font-size: 80%; // 80% of 125% = 100%
list-style-position: inside;
list-style-type: disc
}
ul ul{
height: 25em // displays fine at 18em except IE7
}
..right {
float: right;
padding: 0 3% 1% 0
}
and the html:
<ul><li>item 1
<ul>
<li><img alt="ye" src="ye.jpg" class="right">bs point 1</li>
<li>bs point 2</li>
<li>bs point 3</li>
</ul></li>
more items then </ul>

In IE6 the ul ul height displays fine with 18em. In IE7 there are
horrific text overlap problems without the 25em height. Any insights
into this problem will be greatly appreciated. If my write-up is not
clear, you can visit the page
http://www.candcsealingequipment.com/tanks_sealer.php for a better look.
I assume it is a float problem?

TIA
--
TK
http://www.wejuggle2.com/
Still Having a Ball

Terry wrote:
> I have a php page that delivers valid 4.01 strict using valid css. The
> pages display fine in IE 6, Firefox, Opera with:
> css

> ul ul{
> height: 25em // displays fine at 18em except IE7
> }

I was going to ask why you bother specifying height at all, instead of
just letting the content take care of the appropriate vertical size for
you automatically, but I see that you have a problem when the number of
bullet points is small and the list items don't reach to the bottom of
the image to their right.

>
> In IE6 the ul ul height displays fine with 18em. In IE7 there are
> horrific text overlap problems without the 25em height. Any insights
> into this problem will be greatly appreciated. If my write-up is not
> clear, you can visit the page
> http://www.candcsealingequipment.com/tanks_sealer.php for a better look.
> I assume it is a float problem?

I think that the fact that the image is floated is what keeps its parent
ul from stretching down to visually contain it. I would have thought
that IE7 (which I don't have here) would be about as bad as FF (which I
do have), which also shows overlaps with 18em (although none I'd call
horrific). Is FF really okay for you with 18em (and resized fonts)?

One possible workaround you might try is to replace height with
min-height, which IE7 is supposed to support although IE6 didn't. SO:

ul ul{ min-height: 240px; margin-bottom:2em;}

I've used px instead of em because you're only trying to get to the
bottom of the image, and it looks as though you *always know* the height
of the image is 240px.

You will need to test this in multiple browsers, trying variously
resized texts.

It could be that a better solution would be to revise your basic markup
(instead of nested lists, e.g.) but I don't feel inclined to study it
more right now. I'm supposed to be working... ;-)

HTH

--
John
Read about the UIP: http://improve-usenet.org/

John Hosking wrote:
> Terry wrote:
>> I have a php page that delivers valid 4.01 strict using valid css. The
>> pages display fine in IE 6, Firefox, Opera with:
>> css
>
>> ul ul{
>> height: 25em // displays fine at 18em except IE7
>> }
>
> I was going to ask why you bother specifying height at all, instead of
> just letting the content take care of the appropriate vertical size for
> you automatically, but I see that you have a problem when the number of
> bullet points is small and the list items don't reach to the bottom of
> the image to their right.
>
[snip]
> One possible workaround you might try is to replace height with
> min-height, which IE7 is supposed to support although IE6 didn't. SO:
>
> ul ul{ min-height: 240px; margin-bottom:2em;}
>
> I've used px instead of em because you're only trying to get to the
> bottom of the image, and it looks as though you *always know* the height
> of the image is 240px.

Works a charm!- after I changed minimum-height ;-). I went from this
computer to my development machine (xammp), put in minimum and it did
nothing. I sometimes think language developers just switch from full
length words to abbreviations to trip *me* and it works.

> It could be that a better solution would be to revise your basic markup
> (instead of nested lists, e.g.) but I don't feel inclined to study it
> more right now. I'm supposed to be working... ;-)
>
Funny how much more fun work is when it is not work. I really
appreciate the time and effort spent. I am not having much luck
understanding fully why it works but it is clean in all tested browsers
(including IE6/7). It has the added benefit of not having all the extra
white-space my solution had on short item lists.

I would have gotten back to you sooner but my wife and I are working on
a new routine. It always amazes me how difficult that is after all
these years.

Thanks again,

--
TK
http://www.wejuggle2.com/
Still Having a Ball


----== Posted via Pronews.Com - Unlimited-Unrestricted-Secure Usenet News==----
http://www.pronews.com The #1 Newsgroup Service in the World! >100,000 Newsgroups
---= - Total Privacy via Encryption =---

Terry wrote:
> John Hosking wrote:

>> One possible workaround you might try is to replace height with
>> min-height, which IE7 is supposed to support although IE6 didn't. SO:
>>
>> ul ul{ min-height: 240px; margin-bottom:2em;}
>>
>> I've used px instead of em because you're only trying to get to the
>> bottom of the image, and it looks as though you *always know* the
>> height of the image is 240px.
>
> Works a charm!

[...]

> Funny how much more fun work is when it is not work. I really
> appreciate the time and effort spent. I am not having much luck
> understanding fully why it works but it is clean in all tested browsers
> (including IE6/7).

IE6, too? Really?

You're welcome to my earlier "," and if you liked that, see if this
does anything for you. I learn a lot by trying to explain things I hope
to understand; here's one such attempt:

The image, being floated, doesn't contribute to the apparent length of
the containing element (except e.g. in IE quirks mode), because floats
are taken "out of the flow".

See http://www.w3.org/TR/CSS21/visuren.html#floats (and the rest of that
whole page).

When there are lots of or long bullet points, they take up a lot of
space vertically, extending the boundaries of the ul container, giving
you (something close to) the spacing you want.

When the bullet texts are short or few, they're not as tall as the image
to the right, so when the subsequent text comes along (in the next ul,
say) it's spaced (vertically) based on the bottom of the text. (It's
also spaced horizontally, so to speak, since the image is a float and
muscling text out of its way.)

The min-height approach tries to take the float out of play by forcing
(in some non-IE browsers...) the ul's length to exceed the image's.

Get it? Does that ?

>
> I would have gotten back to you sooner but my wife and I are working on
> a new routine. It always amazes me how difficult that is after all
> these years.

Based on what I hear from married folks, what's difficult is all those
years with the same *old* routine.


--
John
What do you say when she criticizes your performance? ;-)

John Hosking wrote:
> Terry wrote:
>> John Hosking wrote:
>
>>> One possible workaround you might try is to replace height with
>>> min-height, which IE7 is supposed to support although IE6 didn't. SO:
>>>
>>> ul ul{ min-height: 240px; margin-bottom:2em;}
>>>
>>> I've used px instead of em because you're only trying to get to the
>>> bottom of the image, and it looks as though you *always know* the
>>> height of the image is 240px.
>>
>> Works a charm!
>
> [...]
>
>> Funny how much more fun work is when it is not work. I really
>> appreciate the time and effort spent. I am not having much luck
>> understanding fully why it works but it is clean in all tested
>> browsers (including IE6/7).
>
> IE6, too? Really?

Yes, really!

> You're welcome to my earlier "," and if you liked that, see if this
> does anything for you. I learn a lot by trying to explain things I hope
> to understand; here's one such attempt:

I learn a lot more teaching than studying. It is a fun challenge to see
what triggers learning in different people.

> The image, being floated, doesn't contribute to the apparent length of
> the containing element (except e.g. in IE quirks mode), because floats
> are taken "out of the flow".
>
> See http://www.w3.org/TR/CSS21/visuren.html#floats (and the rest of that
> whole page).

This write-up needs to replace the one at w3c. After reading your
example I could kinda, sorta follow what they were trying to say.

> When there are lots of or long bullet points, they take up a lot of
> space vertically, extending the boundaries of the ul container, giving
> you (something close to) the spacing you want.
>
> When the bullet texts are short or few, they're not as tall as the image
> to the right, so when the subsequent text comes along (in the next ul,
> say) it's spaced (vertically) based on the bottom of the text. (It's
> also spaced horizontally, so to speak, since the image is a float and
> muscling text out of its way.)
>
> The min-height approach tries to take the float out of play by forcing
> (in some non-IE browsers...) the ul's length to exceed the image's.
>
> Get it? Does that ?

Yes, I think I do get it. It always amazes me the different things that
seemingly reasonably intelligent people virtually refuse to understand.
For me, one of those things is the box model - specifically
margins/padding. (that and a tree falling in the forest)

>>
>> I would have gotten back to you sooner but my wife and I are working
>> on a new routine. It always amazes me how difficult that is after all
>> these years.

That should have said: "new *juggling* routine".

> Based on what I hear from married folks, what's difficult is all those
> years with the same *old* routine.
>

Well, we have only been married for forty years so I guess we have not
had time for that type of routine to develop.

--
TK
http://www.wejuggle2.com/
Still Having a Ball
I think I will *drop* discussing your question in your signature ;-)


----== Posted via Pronews.Com - Unlimited-Unrestricted-Secure Usenet News==----
http://www.pronews.com The #1 Newsgroup Service in the World! >100,000 Newsgroups
---= - Total Privacy via Encryption =---