I'm currently working on a website where I have a ul element set up. Each list item contains text, but when I zoom in and out of the page, the text overflows the box. Is there a way to prevent the text from overflowing the list item?
HTML
<div id="navigation">
<ul>
<font face="Verdana, Geneva, sans-serif">
<li> <a href="../index.html"> HOME </a> </li>
<li id="active-li"> <a href="#"> BIOGRAPHY </a> </li>
<li> <a href="../News&Events/N&SAz.html"> NEWS & EVENTS </a></li>
<li> <a href="../Books/booksAZ.html"> BOOKS </a></li>
<li> <a> VIDEOS </a> </li>
<li> <a href="../Picutres/picutresAZ.html" id="last-item"> PHOTOS </a> </li>
</font>
</ul>
</div>
</div>
CSS
#navigation {
width: 900px;
margin: 0 auto 0px;
}
div#navigation ul li {
font-size:.5em;
list-style:none;
background-color:transparent;
background-color:#FFF;
float: left;
width:150px;
height:40px;
text-align:center;
}
div#navigation ul li:hover {
background-color:#9C1A35;
}
div#navigation ul li a {
color:#333333;
text-decoration:none;
display: block;
padding:6px 0px 18px;
}
#navigation ul li a:hover {
color:#fff;
}
ul {
padding:0;
}
#active-li {
background:#9C1A35 !important;
}
#active-li a {
color:#fff !important;
}
#last-item {
!important;
}
div#navigation ul li #active {
background:#9C1A35 !important;
}
div#navigation ul li #active a {
color:#fff;
}