List Item text Overlapping - html

Question

I have been trying to fix the overlapping of the text in the the li when zooming in but i am unable to find a solution here is the link to JSFiddle.
if anyone is able to help me i will be gladly appreciated.

Answer 1

What I've updated:
moved hyperlinks inside listItems
removed float:right inside cells
added min-width to first cell of every column
removed width attribute to seconds cells
CSS
a {
text-decoration: none;
}
table {
display: inline-block;
line-height: 10px;
padding: 0px;
margin: 0px;
vertical-align: middle;
}
td {
height: 20px;
}
ul {
padding: 0px;
min-width: 700px;
margin: 0px;
overflow: hidden;
}
img {
vertical-align: middle;
margin-left: 5px;
}
#main_forums li:hover {
background: #EEE;
border: 1px solid #EEE;
border-radius: 4px;
}
#main_forums .main_forum_container li {
border: 1px solid #FFF;
clear: both;
border-radius: 4px;
display: block;
min-height: 50px;
height: 50px;
min-width: 900px;
padding-bottom: 10px;
}
#main_forums {
}
.sub_description {
min-width:300px;
}
#main_forums .main_forum {
background: #880000;
margin-top: 10px;
border: 1px solid #800;
border-radius: 4px;
}
.main_forum_header {
color: #FFF;
font-size: 20px;
font-weight: bold;
}
.main_forum_container {
background: #FFF;
color: #800;
border: 4px solid #800;
padding: 10px;
}
HTML
<div id="main_forums">
<div class="main_forum">
<div class="main_forum_header">
<img src="images/programming.png" height="70" width="70">
<span class="main_forum_title">Programming</span>
</div>
<div class="main_forum_container">
<ul>
<li>
<a href="?p=forums&forum_id=2&sub_id=1">
<img src="images/php.png" height="60" width="60">
<table border="1">
<tbody>
<tr>
<td class="sub_description" >
<span>PHP - Web Programming</span>
</td>
<td style="margin-right: 0px;">Posts: 12011</td>
</tr>
<tr>
<td class="sub_description" style="font-size: 12px;" >PHP web applications.</td>
<td>Views: 12012311</td>
</tr>
</tbody>
</table>
</a>
</li>
<li>
<a href="?p=forums&forum_id=2&sub_id=2">
<img src="images/python.png" height="60" width="60" />
<table>
<tbody>
<tr>
<td class="sub_description" >
<span>Python - Application Programming</span>
</td>
<td style="margin-right: 0px;">Posts: 12011</td>
</tr>
<tr>
<td class="sub_description" style="font-size: 12px;" >Python Application programming</td>
<td>Views: 12012311</td>
</tr>
</tbody>
</table>
</a>
</li>
</ul>
</div>
</div>
<div class="main_forum">
<div class="main_forum_header">
<img src="images/web_developing.png" height="70" width="70" />
<span class="main_forum_title">Web Developing</span>
</div>
<div class="main_forum_container">
<ul>
<li>
<a href="?p=forums&forum_id=1&sub_id=4">
<img src="images/css.png" height="60" width="60" />
<table>
<tbody>
<tr>
<td class="sub_description">
<span>CSS</span>
</td>
<td style="margin-right: 0px;">Posts: 12011
</td>
</tr>
<tr>
<td class="sub_description" style="font-size: 12px;" >Cascading Style Sheets</td>
<td>Views: 12012311</td>
</tr>
</tbody>
</table>
</a>
</li>
<li>
<a href="?p=forums&forum_id=1&sub_id=3">
<img src="images/html.png" height="60" width="60" />
<table>
<tbody>
<tr>
<td class="sub_description">
<span>HTML</span>
</td>
<td style="margin-right: 0px;">Posts: 12011</td>
</tr>
<tr>
<td class="sub_description" style="font-size: 12px;" >HyperText Markup Language</td>
<td>Views: 12012311</td>
</tr>
</tbody>
</table>
</a>
</li>
</ul>
</div>
</div>
</div>

Answer 2

Is there a reason for the tables? The first thing I would do is remove the tables. In fact none of your HTML is semantic. You have tables inside of li tags and li tags surrounded by hyperlinks.
<ul>
<li>
<a href="?p=forums&forum_id=2&sub_id=1">
<img src="images/php.png" height="60" width="60">
<span>PHP - Web Programming</span>
Posts: 12011
PHP web applications.
Views: 12012311
</a>
</li>
<li>
<a href="?p=forums&forum_id=2&sub_id=2">
<img src="images/python.png" height="60" width="60">
<span>Python - Application Programming</span>
Posts: 12011
Python Application programming
Views: 12012311
</a>
</li>
</ul>
http://jsfiddle.net/pLy92/
See how that already cleans things up? These are all in-line elements so they line up.

Answer 3

Remove the slash() in that <a href="?p=forums&forum_id=1&sub_id=4">\