[EMAIL PROTECTED] wrote: > I am working on a box for text, constructed with a list, here: > > http://kurtnimmo.com/css_tests/test.html > > Looks great in Firefox, Mozilla, Flock, etc. But in IE 6 the top <li> with > its background separates from the next list item, creating an ugly gap. Is > there a hack for this? Here's the code and CSS: > > <ul class="box"> > <li class="boxtop"></li> > <li class="boxmiddle"><p class="box">text...</li> > <li class="boxbottom"></li> > </ul> > > } > ul.box { > width: 198px; > } > .boxtop { > list-style: none; > background: url(images/boxtop.png) no-repeat; > height: 10px; > } > .boxmiddle { > background: url(images/boxtile.png) repeat-y; > list-style: none; > width: 198px; > } > > p.box { > margin: 0px; > padding: 0px 0px 0px 12px; > width: 170px; > } > > .boxbottom { > background: url(images/boxbottom.png) no-repeat; > width: 198px; > list-style: none; > height: 11px; >
I haven't seen any responses to this, and I still see the problem in your page, so I'm posting this well after the original message. I'm betting that the gap is coming from the fact that IE6 expands boxes to hold potential text, even if you set their height to something small. Give the first li a tiny font-size and line-height and see if that fixes it. That being said, this should not be marked up as a list. It should be a series of divs: <div class="box-outer"> <div class="box-inner"> <p> </div> </div> Give the outer div the repeating center graphic. Give the inner div the top graphic. Give the p the bottom graphic. Zoe -- Zoe M. Gillenwater Design Services Manager UNC Highway Safety Research Center http://www.hsrc.unc.edu ______________________________________________________________________ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
