Problem - Menu with Unordered List

I have a problem with a menu made with Unordered List. I want some of the link items to be in 2 lines.

Look here:
http://vav.dk/uno8/

Can this be done with Unordered List ?

Or else how do I do it the easyest way.

 

This is another case of it being a simple thing to do, except that IE does not play well with the other children. This came up about two years ago in another forum and it was an absolute booger to make IE work. Chris Smith, Ingo Chao and myself drew on the experiments of Bruno Fasino to solve the IE problem. It is not intuitive.

This is the solution I published in June, 2006.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xml:lang="en"
      xmlns="http://www.w3.org/1999/xhtml"
      lang="en">
<head>
  <meta name="editor"
        content="Emacs 21" />
  <meta name="author"
        content="Gary Turner" />
  <meta http-equiv="content-type"
        content="text/html; charset=utf-8" />
  <title>vertically centering multiline links in a horizontal
  menu</title>
  <style type="text/css">
/*<![CDATA[*/

  ul {
    border: 1px solid black;
    list-style: none;
    margin: 25px auto;
    overflow: hidden;
    padding: 5px;
    text-align: center;
    }

  li {
  float: left;
  height: 4em;
  border: 1px solid red; /*for clarity*/
  position: relative;
  width: 33%;
  }

  li p {
  margin: 0;
  display: table;
  height: 4em;
  width: 100%;
  }


  ul a {
    position: relative;
    display: table-cell;
    vertical-align: middle;
    height: 100%;
    width: 100%;
    }


</style>

<!--[if lte ie 7]>
<style type="text/css">

  ul {
    display: inline-block;
    }
 
  ul {
    display: block;
    }

  a {
    display: block;
    }

  span {
    display: inline-block;
    vertical-align: middle;
    }

  b.special {
    display: inline-block;
    vertical-align: middle;
    height: 100%;
    /*following is IEMac hack.  Needs width to exist
      margin negates width*/
    width: 1px;
    margin-left: -1px;
    }
</style>
<![endif]-->

</head>

<body>
  <div id="wrapper">
    <h1>Center multi-line links vertically in your menu</h1>

    <ul>
      <li>
        <p><a href="#"><span>link1
        <br />
        line 2 of link 1</span> <b class="special">
        <!----></b></a></p>
      </li>

      <li>
        <p><a href="#"><span>link2</span> <b class="special">
        <!----></b></a></p>
      </li>

      <li>
        <p><a href="#"><span>link3
        <br />
        line2
        <br />
        and line 3 of link 3</span> <b class="special">
        <!----></b></a></p>
      </li>
    </ul>
  </div><!-- end wrapper -->
</body>
</html>

Code (markup):

You may inline the list items with the inline-block display value, by making a few changes in the stylesheets.

  <style type="text/css">
/*<![CDATA[*/

  ul {
    border: 1px solid black;
    list-style: none;
    margin: 25px auto;
    padding: 5px;
    text-align: center;
    }

  li {
  display: -moz-inline-box;  /*for ff<3*/
  display: inline-block;
  border: 1px solid red; /*for clarity*/
  margin: 0 1em;
  position: relative;
  }

  li p {
  margin: 0;
  display: table;
  height: 4em;
  width: 100%;
  }

  ul a {
    position: relative;
    display: table-cell;
    vertical-align: middle;
    height: 100%;
    width: 100%;
    }

  /*]]>*/
  </style>

<!--[if lte ie 7]>
  <style type="text/css">
/*<![CDATA[*/

  li {
    display: inline;
    }

  a {
    display: block;
    }

  span {
    display: inline-block;
    vertical-align: middle;
    }

  b.special {
    display: inline-block;
    vertical-align: middle;
    height: 100%;
    }

  /*]]>*/
  </style>
<![endif]-->

Code (markup):

The first version works in IE6/7, FF2/3, Safari and Opera. The inline block version breaks in Opera—differently for each version! I don't feel like messing with it, since it'll probably break yet another way in the next upgrade.

cheers,

gary