Text wrapping anchor

I have an ol with a li inside and inside of that have an a element. There is a fixed width on the ol and li and in one case, the a element name requires it to wrap to the next line. The issue I am seeing is if I draw a box around the a element, it is either around the first line (when I use no display style or style it with inline-block or block) or the second line (when I style it inline), not both.

Since I am using a hover, I would like the hover to show up over both lines, not just the top or bottom.

The only styling on the li and ol is margin and padding. the styling on the a element is

{display:inline-block; margin: 0; padding: 0 0 3px 0; font-weight: bold; color: blue; border: 1px solid red;}

How can I get it to show the border around the whole element?

Hmmm … intriguing. Can you give us a link to the page?

There is a fixed width on the ol and li and in one case, the a element name requires it to wrap to the next line.

The only styling on the li and ol is margin and padding.

The issue I am seeing is if I draw a box around the a element, it is either around the first line or the second line, not both.

Hi,
After setting up a test case according to the styles you have explained I don’t see the issue you are describing.

(No IE6/7 fixes in place yet)

The only thing the width on th LI would do is trip “haslayout” for IE. Modern browsers do not need a width on the LI, they will set the width according to any margins on it.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
 "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Test List</title>

<style type="text/css">
body {
    margin:0;
    padding:0;
}
#nav {
    width:200px;/*220px total w/ padding*/
    margin:10px;
    padding:0 0 0 20px;
    background:palegreen;
    overflow:hidden;/*uncollapse li margins*/
}
#nav li {
    width:180px;/*200px total w/ margin/padding  (width could be eliminated)*/
    margin:5px;
    padding:5px;
    background:yellow;
    font:bold 90%/1.2 arial,helvetica,sans-serif;
}
#nav li a {
    display:inline-block;/*use display:block; to prevent shrinkwrap if needed*/
    vertical-align:top;/*ignored with display:block*/
    padding:5px 10px;
    border: 1px solid red;
    background:white;
    color:#00F;
    text-decoration:none; 
}
#nav li a:hover {
    color:#000;
    background:wheat;  
}

</style>

</head>
<body>

<ol id="nav">
    <li><a href="#">List item</a></li>
    <li><a href="#">Long list item</a></li>
    <li><a href="#">Longer list item</a></li>
    <li><a href="#">Longer list item with wrapping text</a></li>
    <li><a href="#">List item</a></li>
</ol>

</body>
</html>