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/
