Hey Dan,

Here's the issue on your site:

(http://www.calvarygreenmeadow.com/schedule.htm)

In order to "capture" the floated elements, we have to alter the way the 
browsers handle them. Under normal circumstances, floated elements are 
given special consideration within the document flow. This is more or 
less the essence of what makes them floated.

In this situation, we want them to be treated differently, so we have to 
toggle this behavior. For standards-compliant browsers, we can use this 
rule (in this case) to capture the floated elements:

~~~
.schedule li
{
   overflow:                      hidden;
}
~~~

Internet Explorer has more trouble with this, requiring that we activate 
the MS proprietary "hasLayout" property. There's a number of ways to do 
this. In the original code I sent you, I used the MS "zoom" property. 
This is unique to MS and does not validate. It also probably looked 
pretty useless, which is maybe why you dropped it from your styles.

A better way to activate this behavior (as far as I'm concerned) is 
through the use of "display:inline-block". This CSS property is not 
completely supported by IE -- it only works on elements with a default 
display of "inline". Interestingly enough, however, is the fact that it 
will trigger the required "hasLayout" behavior we need to capture the 
float. More interesting is that configuring the display back to the 
desired setting doesn't de-activate "hasLayout."

Thus, using this rule should allow all browsers to show consistent results:

~~~
.schedule li
{
   display:                       inline-block;
}
.schedule li
{
   display:                       block;
   overflow:                      hidden;
}
~~~

They must be broken up into two separate rules as above or IE will not 
activate "hasLayout" for the element.

In your current live version, the rule you need to replace begins around 
line 131.

I wasn't sure if my explanation above was entirely clear, soooo...by way 
of *further* explanation, consider an image floated in a paragraph:

~~~
p img {
   float:                left;
}
~~~

<pppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppp
p Homer Jay Simpson is a fictional main character in the animated     p
p <iiiiiiiiiiiiiiiiiiiiiiii television series The Simpsons and        p
p i            ___        i father of the eponymous family.           p
p i          _//_\\       i                                           p
ppi        ,"    //".     ippppppppppppppppppppppppppppppppppppppppppp>
   i       /          \    i
   i     _/           |    i
   i    (.-,--.       |    i
   i    /o/  o \     /     i
   i    \_\    /  /\/\     i
   i    (__`--'   ._)      i
   i    /  `-.     |       i
   i   (     ,`-.  |       i
   i    `-,--\_  ) |-.     i
   i     _`.__.'  ,-' \    i
   i    |\ )  _.-'    |    i
   i    i-\.'\     ,--+.   i
   i  .' .'   \,-'/     \  i
   i / /         /       \ i
   iiiiiiiiiiiiiiiiiiiiiiii>

Demonstrated above is the default browser behavior regarding floats. 
Under normal circumstances, this is exactly what we want so that when we 
include another paragraph about Homer, we get this:

<pppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppp
p Homer Jay Simpson is a fictional main character in the animated     p
p <iiiiiiiiiiiiiiiiiiiiiiii television series The Simpsons and        p
p i            ___        i father of the eponymous family.           p
p i          _//_\\       i                                           p
ppi        ,"    //".     ippppppppppppppppppppppppppppppppppppppppppp>
   i       /          \    i
<pi     _/           |    ipppppppppppppppppppppppppppppppppppppppppppp
p i    (.-,--.       |    i He is voiced by Dan Castellaneta and      p
p i    /o/  o \     /     i first appeared on television, along with  p
p i    \_\    /  /\/\     i the rest of his family, in The Tracey     p
p i    (__`--'   ._)      i Ullman Show short "Good Night" on April   p
p i    /  `-.     |       i 19, 1987. Homer was created and designed  p
p i   (     ,`-.  |       i by cartoonist Matt Groening while he was  p
p i    `-,--\_  ) |-.     i waiting in the lobby of James L. Brooks'  p
p i     _`.__.'  ,-' \    i office. Groening had been called to pitch p
p i    |\ )  _.-'    |    i a series of shorts based on Life in Hell  p
p i    i-\.'\     ,--+.   i but instead decided to create a new set   p
p i  .' .'   \,-'/     \  i of characters. He named the character     p
p i / /         /       \ i after his father Homer Groening. After    p
p iiiiiiiiiiiiiiiiiiiiiiii> appearing on The Tracey Ullman Show for   p
p three years, the Simpson family got their own series on Fox, which  p
p debuted December 17, 1989.                                          p
p                                                                     p
pppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppp>

Note, however, that changing the styles like this:

~~~
p {
   display:              inline-block; /* For MSIE gte 5.5 */
}
p {
   display:              block; /* For MSIE gte 5.5 */
   overflow:             hidden; /* For standards-compliant browsers */
}
p img {
   float:                left;
}
~~~

...gives us this:

<pppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppp
p Homer Jay Simpson is a fictional main character in the animated     p
p <iiiiiiiiiiiiiiiiiiiiiiii television series The Simpsons and        p
p i            ___        i father of the eponymous family.           p
p i          _//_\\       i                                           p
p i        ,"    //".     i                                           p
p i       /          \    i                                           p
p i     _/           |    i                                           p
p i    (.-,--.       |    i                                           p
p i    /o/  o \     /     i                                           p
p i    \_\    /  /\/\     i                                           p
p i    (__`--'   ._)      i                                           p
p i    /  `-.     |       i                                           p
p i   (     ,`-.  |       i                                           p
p i    `-,--\_  ) |-.     i                                           p
p i     _`.__.'  ,-' \    i                                           p
p i    |\ )  _.-'    |    i                                           p
p i    i-\.'\     ,--+.   i                                           p
p i  .' .'   \,-'/     \  i                                           p
p i / /         /       \ i                                           p
p iiiiiiiiiiiiiiiiiiiiiiii>                                           p
pppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppp>

<pppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppp
p He is voiced by Dan Castellaneta and first appeared on television,  p
p along with the rest of his family, in The Tracey Ullman Show short  p
p "Good Night" on April 19, 1987. Homer was created and designed by   p
p cartoonist Matt Groening while he was waiting in the lobby of James p
p L. Brooks' office. Groening had been called to pitch a series of    p
p shorts based on Life in Hell but instead decided to create a new    p
p set of characters. He named the character after his father Homer    p
p Groening. After appearing on The Tracey Ullman Show for three       p
p years, the Simpson family got their own series on Fox, which        p
p debuted December 17, 1989.                                          p
pppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppp>

...which is useful in some circumstances but would most definitely not 
work under normal conditions. The ability to toggle between the two 
behaviors is better than having either one, but not the other.

Hope that helps. Floats can be tricky sometimes. I'm sure my incredible 
grasp of ASCII cleared it right up, though. ;-)

I've bounced this back to the CSS Discussion List in case this answer is 
helpful to anyone else.
--Bill

Homer Simpson bio from http://en.wikipedia.org/wiki/Homer_simpson
Homer's headshot from http://www.ascii-art.de/ascii/s/simpsons.txt
______________________________________________________________________
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Reply via email to