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;

______________________________________________________________________
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/

Reply via email to