JasonBourne JasonBourne - 3 months ago 10
HTML Question

CSS Div and li spacing issue

How do I get the

div
to have the 1 px border on the bottom? Instead of that thick grey bar.
The
div
that holds the
ul
with
id="widget-content"
has a white background with a 1px padding to give the 1px border impression.

No matter what I do, if I try to collapse the widget-content
div
or expand the li
div
. There can be more than 3
li
in the
ul
.

enter image description here

HTML

<div id="content">




<div id="widget-head">
<h3><a href="#" target="_blank">CHANNEL</a></h3>
<div id="widget-edit"><img src="images/icons/settings_g.png" width="12" height="12"></div>
</div>
<div id="widget-content">
<ul id="widget-feeds">
<li>
<div>
<a href="#" > <img src="images/icons/hidden.gif" name="123311"> </a> <a href="#" target="_blank" title="title">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet tortor sit amet nunc interdum</a>
</div>
<div class="widget-desc">
<p>description text here</p>
</div>
</li>

<li>
<div>
<a href="#" > <img src="images/icons/hidden.gif" name="123311"> </a> <a href="#" target="_blank" title="title">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet tortor sit amet nunc interdum</a>
</div>
<div class="widget-desc">
<p>description text here</p>
</div>
</li>

<li>
<div>
<a href="#" > <img src="images/icons/hidden.gif" name="123311"> </a> <a href="#" target="_blank" title="title">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet tortor sit amet nunc interdum</a>
</div>
<div class="widget-desc">
<p>description text here</p>
</div>
</li>
</ul>
</div>





And my relevant CSS

#content #widget-container {
width: 30%;
background-color: #ddd;
float: left;
margin-top: 25px;
margin-bottom: 25px;
margin-left: 25px;
white-space: nowrap;
display: block;
}
#content #widget-container #widget-head {
height: 25px;
padding: 5px;
overflow: hidden;
line-height: 25px;
}
#content #widget-container #widget-head h3 {
font-size: 14px;
width: 90%;
float: left;
}
#content #widget-container #widget-head #widget-edit {
float: right;
width: 12px;
padding-top: 5px;
}
#content #widget-container #widget-content {
background-color: #FFF;
margin: 1px;

}
#content #widget-container #widget-content #widget-feeds ul {
overflow: auto;
}
#content #widget-container #widget-content #widget-feeds li {
display: block;
white-space: normal;
word-wrap: normal;
margin-bottom: 5px;
padding: 4px;
}
#content #widget-container #widget-content #widget-feeds li a {


}
#content #widget-container #widget-content #widget-feeds li .widget-desc {
white-space: normal;
display: none;
margin-bottom: 4px;
padding-top: 2px;
padding-right: 10px;
padding-bottom: 5px;
padding-left: 15px;
overflow: hidden;
}

Answer

The visible greyness at the bottom is not a border, it's actually due to the unordered list's bottom margin, which creates an empty space at the bottom.

The following will eliminate this space:

#widget-feeds { margin-bottom: 0 }
#widget-feeds li { margin-bottom: 0 !important; padding: 4px 0 9px 0 !important; }

Note that my fix above is not good practice, you should edit your existing stylesheet to meet these changes instead of applying the rules I specified here.