My problem is I need the table cell holding the navigation to expand/contact to the list size. To no prevail, I tried looking through and using CSS Border Box Model...but...no luck.
There is a link under Fire Fox’s Web Developer Extension (CSS->Use Border Box Model) which when selected gives me the desired result, however, I can't figure out how to make it happen in CSS.
The following is an example of what I'm trying to do....
Code: Select all
<style>
/*
LEFT NAVIGATION
*/
#nav_holder{
clear: both;
padding: 0 0 1em 0;
}
#nav_hchild{
float: left;
width: 160px;
margin-bottom: 1em;
white-space: nowrap;
}
/* PADD LIST TO LEFT */
#ul_nav, #ul_nav ul {
margin: 0;
padding: 0;
list-style: none;
}
/* REMOVE LI DOT */
#ul_nav li {
display: inline;
padding: 0;
margin: 0;
}
#ul_nav li a {
display: block;
padding: 8px 10px;
font-family:arial;
font-size:10pt;
color: #7d8995;
font-weight: bold;
text-decoration: none;
text-align: left;
border-right:1px #7d8995 solid;
border-bottom:1px #7d8995 solid;
width: 100%;
}
#ul_nav li a:hover {
background-color: #FFF9F1;
width: 100%;
text-decoration:underline;
color:#A26103;
}
td.left_nav_holder{
background-color: #F3F0E9;
}
</style>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="160" class="left_nav_holder"> <div id="nav_holder">
<div id="nav_hchild">
<ul id="ul_nav">
<li><a href="#1">Link 1</a></il>
<li><a href="#2">Link 2</a></il>
<li><a href="#3">Link 3</a></il>
<li><a href="#4">Link 4</a></il>
<li><a href="#5">Link 5</a></il>
</ul>
</div>
</div></td>
<td width="100%"> </td>
</tr>
</table>