CSS problem <li> height - css

Question

Please check this one:
http://jsfiddle.net/sasindu555/nNyxk/8/
You can see Description, Features and Contact Details <li> tags are not fully filled with the background color. Please help me to solve this.
Here is the CSS:
#h-spacer {
width:auto;
height:1px;
clear:both;
font-size:0
}
#property-details {
margin:0 auto;
width:auto;
height:auto;
float:left;
padding:0px;
border-left:solid #65C6ED 1px;
border-top:solid #65C6ED 1px
}
#property-details ul {
width:auto;
height:auto;
padding:0;
margin:0 auto;
display:block;
border-bottom:solid #65C6ED 1px
}
#property-details ul li {
float:left;
height:auto;
list-style-image:none;
list-style-type:none;
text-align:left;
padding:2px 5px;
color:#4f4f4f;
line-height:1.8em;
font-size:11px;
border-right:solid #65C6ED 1px
}
#property-details ul li.title {
width:140px;
font-weight:600;
background:#e5f8ff
}
#property-details ul li.data {
width:360px;
font-weight:normal;
background:#f1fbff
}
#property-details-sub.sub {
margin:0 auto;
height:auto;
width:369px;
padding:0px;
border-left:solid #65C6ED 1px;
border-top:solid #65C6ED 1px
}
#property-details-sub ul {
width:auto;
height:auto;
padding:0;
margin:0 auto;
display:block;
border-bottom:solid #65C6ED 1px
}
#property-details-sub ul li {
float:left;
height:auto;
list-style-image:none;
list-style-type:none;
text-align:left;
padding:2px 5px;
color:#4f4f4f;
line-height:1.8em;
font-size:11px;
border-right:solid #65C6ED 1px
}
#property-details-sub ul li.title-sub {
width:100px;
font-weight:600;
background:#e5f8ff
}
#property-details-sub ul li.data-sub {
width:247px;
font-weight:normal;
background:#f1fbff
}
And HTML:
<div id="property-details">
<ul>
<li class="title">Category</li>
<li class="data">House for Sale</li>
<div id="h-spacer"></div>
</ul>
<ul>
<li class="title">Reference Number</li>
<li class="data">10066</li>
<div id="h-spacer"></div>
</ul>
<ul>
<li class="title">Published On</li>
<li class="data">June 07,2011</li>
<div id="h-spacer"></div>
</ul>
<ul>
<li class="title">Description</li>
<li class="data">House for Sale Akuregoda House Built in a 12.5 Perch Land Located at 200m away from The Akuregoda Main Road With 6 Rooms, 3 Bath rooms, Living Room, Dining Room Surrounded By walls With an Annex is Available for Sale at Rs 42 (Negotiable) 4.2 Million </li>
<div id="h-spacer"></div>
</ul>
<ul>
<li class="title">Location - District</li>
<li class="data">Colombo</li>
<div id="h-spacer"></div>
</ul>
<ul>
<li class="title">Location - City</li>
<li class="data">Akuregoda</li>
<div id="h-spacer"></div>
</ul>
<ul>
<li class="title">Property address</li>
<li class="data">Akuregoda, Colombo</li>
<div id="h-spacer"></div>
</ul>
<ul>
<li class="title">Number of Rooms</li>
<li class="data">6</li>
<div id="h-spacer"></div>
</ul>
<ul>
<li class="title">Number of Floors</li>
<li class="data">2</li>
<div id="h-spacer"></div>
</ul>
<ul>
<li class="title">Floor Area </li>
<li class="data">1200</li>
<div id="h-spacer"></div>
</ul>
<ul>
<li class="title">Land Area </li>
<li class="data">Acres : 0 / Perches :28.00</li>
<div id="h-spacer"></div>
</ul>
<ul>
<li class="title">Selling Price </li>
<li class="data">Rs. 4,200,000.00</li>
<div id="h-spacer"></div>
</ul>
<ul>
<li class="title">Features </li>
<li class="data"> » Air Conditioned<br />
» Cable TV<br />
» Garage<br />
» Hot Water<br />
» Internet<br />
» Parapet Wall<br />
» Pipe Bourne Water<br />
» Telephone Line<br />
» Veranda<br /></li>
<div id="h-spacer"></div>
</ul>
<ul>
<li class="title">Property Availablity</li>
<li class="data">Immediatly available</li>
<div id="h-spacer"></div>
</ul>
<ul>
<li class="title">Advertisment expires</li>
<li class="data">In 10 days</li>
<div id="h-spacer"></div>
</ul>
<ul>
<li class="title">Contact Details</li>
<li id="property-details-sub" class="sub">
<ul>
<li class="title-sub">Name</li>
<li class="data-sub">Sasindu Hewage</li>
<div id="h-spacer"></div>
</ul>
<ul>
<li class="title-sub">Address</li>
<li class="data-sub">627, Thalangama South</li>
<div id="h-spacer"></div>
</ul>
<ul>
<li class="title-sub">Contact number</li>
<li class="data-sub">[phone]</li>
<div id="h-spacer"></div>
</ul>
<ul>
<li class="title-sub">Inquiry via Email</li>
<li class="data-sub">Send an inquiry</li>
<div id="h-spacer"></div>
</ul>
<ul>
<li class="title-sub">Skype Id</li>
<li class="data-sub">sasindu</li>
<div id="h-spacer"></div>
</ul>
</li>
<div id="h-spacer"></div>
</ul>
</div>

Answer 1

My solution is to set the background color of the li.tittle not in li but set it to ul.
Then problem remains for the border-right property of the li, so move this border-right property to #property-details ul li.data item and change it to border-left.
So, I suggest these changes:
#property-details ul {
background-color: #E5F8FF
}
#property-details ul li.data {
border-right:solid #65C6ED 1px;
border-left:solid #65C6ED 1px;
}
/* remove this from your css:
#property-details ul li {
border-right: solid #65C6ED 1px;
}
*/
http://jsfiddle.net/nNyxk/21/

Answer 2

Why are you using lists? The proper elements to use here are definition lists (<dl>). You can even use tables for this (it is tabular data).
CSS:
* {
margin:0;
padding:0
}
body {
font-size:11px;
margin:1em;
color:#4f4f4f
}
ul {
list-style-position:inside
}
#property-details {
background:#e5f8ff;
border-style:solid;
border-color:#65c6ed;
border-width:1px 1px 0;
line-height:1.8em
}
#property-details dl {
border-bottom:1px solid #65c6ed;
position:relative
}
#property-details dt, #property-details dd {
padding:2px 5px
}
#property-details dt {
font-weight:600;
width:140px;
position:absolute;
top:0;
bottom:0;
left:0
}
#property-details dd {
background:#f1fbff;
position:relative;
left:140px;
margin-right:140px;
border-left:1px solid #65c6ed
}
#property-details .sub {
padding:0
}
#property-details .sub dl:last-child {
border:0
}
HTML (with definition lists):
<div id="property-details">
<dl>
<dt>Category</dt>
<dd>House for Sale</dd>
</dl>
<dl>
<dt>Reference Number</dt>
<dd>10066</dd>
</dl>
<dl>
<dt>Published On</dt>
<dd>June 07,2011</dd>
</dl>
<dl>
<dt>Description</dt>
<dd>House for Sale Akuregoda House Built in a 12.5 Perch Land Located at 200m away from The Akuregoda Main Road With 6 Rooms, 3 Bath rooms, Living Room, Dining Room Surrounded By walls With an Annex is Available for Sale at Rs 42 (Negotiable) 4.2 Million </dd>
</dl>
<dl>
<dt>Location - District</dt>
<dd>Colombo</dd>
</dl>
<dl>
<dt>Location - City</dt>
<dd>Akuregoda</dd>
</dl>
<dl>
<dt>Property address</dt>
<dd>Akuregoda, Colombo</dd>
</dl>
<dl>
<dt>Number of Rooms</dt>
<dd>6</dd>
</dl>
<dl>
<dt>Number of Floors</dt>
<dd>2</dd>
</dl>
<dl>
<dt>Floor Area </dt>
<dd>1200</dd>
</dl>
<dl>
<dt>Land Area </dt>
<dd>Acres : 0 / Perches :28.00</dd>
</dl>
<dl>
<dt>Selling Price </dt>
<dd>Rs. 4,200,000.00</dd>
</dl>
<dl>
<dt>Features </dt>
<dd>
<ul>
<li>Air Conditioned</li>
<li>Cable TV</li>
<li>Garage</li>
<li>Hot Water</li>
<li>Internet</li>
<li>Parapet Wall</li>
<li>Pipe Bourne Water</li>
<li>Telephone Line</li>
<li>Veranda</li>
</ul>
</dd>
</dl>
<dl>
<dt>Property Availablity</dt>
<dd>Immediatly available</dd>
</dl>
<dl>
<dt>Advertisment expires</dt>
<dd>In 10 days</dd>
</dl>
<dl>
<dt>Contact Details</dt>
<dd class="sub">
<dl>
<dt>Name</dt>
<dd>Sasindu Hewage</dd>
</dl>
<dl>
<dt>Address</dt>
<dd>627, Thalangama South</dd>
</dl>
<dl>
<dt>Contact number</dt>
<dd>[phone]</dd>
</dl>
<dl>
<dt>Inquiry via Email</dt>
<dd>Send an inquiry</dd>
</dl>
<dl>
<dt>Skype Id</dt>
<dd>sasindu</dd>
</dl>
</dd>
</dl>
</div>
And all your spacers are gone...