Q:

Properly wrapping text in a list

I am having a problem trying to get the text in a list item wrapped to the next line to display properly. It's the first menu item. I've checked many of the other related answers but the answers don't seem to fit my situation.

#menuSide ul {
  margin-left: -45px;
  text-indent: 15px;
  list-style-type: none;
}

#menuSide li {
  padding-top: 3px;
  padding-bottom: 3px;
  border-bottom: 1px solid #00136F;
}

#menuSide a, #menuSide a:visited {
  display: block;
  font-family: "Lucida Grande", Verdana,Arial, sans-serif;
  height: 1.2em;
  color: #fff;
  background-color: inherit;
  text-decoration:none;
}

#menuSide a:hover {
  color: #3B5998;
  background-color: #fff;
  text-decoration:none;
}

#menuSide .here {
  color: #fff;
  background-color: inherit;
  text-decoration:none;
}

<ul>
<?php
if ($thisPage=='speaking') {
  echo '<li><span class="here">&raquo;&nbsp;&nbsp;Speaking Engagements in Jerusalem</span>';
}
else {
  echo '<li><a href="/speaking.php">Speaking Engagements in Jerusalem</a>    </li>';
}?>

<?php
if ($thisPage=='events') {
  echo '<li><span class="here">&raquo;&nbsp;&nbsp;Recent Events</span>';
}
else {
  echo '<li><a href="/events/index.php">Recent Events</a></li>';
}?>
</ul>

Any suggestions?

A:

Removing height: 1.2em; from #menuSide a, #menuSide a:visited will help. By setting 1.2em height for element you fix its height at 120% of a single line of inner text height. That's why the second line doesn't fit. Try to use line-height or padding-top and padding-bottom instead.
P.S.: you've forgotten closing </li> tags here:
if ($thisPage=='speaking') {
  echo '<li><span class="here">&raquo;&nbsp;&nbsp;Speaking Engagements in Jerusalem</span>';
}

and here:
if ($thisPage=='events') {
  echo '<li><span class="here">&raquo;&nbsp;&nbsp;Recent Events</span>';
}

