Question

In the website I am making, I have a ul set up. For every list item, there is text inside each one, but when I zoom in and out of the page the text starts to come out of the box. Is their a method to keeping the text in the list item?

HTML

<div id="navigation">
                  <ul>
          <font face="Verdana, Geneva, sans-serif">
          <li> <a href="../index.html"> ƏSAS SƏHİFƏ  </a> </li>
          <li id="active-li"> <a href="#"> BIOQRAFIYA </a> </li>
          <li> <a href="../News&Events/N&SAz.html"> XƏBƏRLƏR VƏ HADISƏLƏR </a></li>
          <li> <a href="../Books/booksAZ.html"> KİTABLAR </a></li>
          <li> <a> VİDEOLAR </a> </li>
          <li> <a href="../Picutres/picutresAZ.html" id="last-item"> FOTOLAR </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;
    }

Answer 1

The most important thing to know when styling lists: DON’T style the list! Style the CONTENTS.

Reset the list. Use:

ul, li {margin:0;padding:0}

then:

Put all styling on the anchor in the list, using display:block. You can use positioning, such as float:left, on your LI, but put EVERYTHING else on the A-tag.