alt131 - 1:35 pm on Jul 9, 2011 (gmt 0)

Hi jake74, welcome to WebmasterWorld :) and thanks for providing a code sample so the issue was easy to see. Oh, and don't mind Lucy's jokes - she likes drawing pictures (~waves to Luce'~).

If you aren't familiar with the theory behind the provided link, every element is really a "box", so this is an issue with the box model. In summary, you want the element to be a certain height to get the shorter border effect required by the design spec, but at the same time want the element to be taller to accommodate the background image. As Lucy explained (and the picture at 8.1 of the recommendations shows), that's not possible on default properties alone because the box model for css means the border is drawn around the content plus padding. That is why, on your provided code, the border-left is "about 50px" because that's "about" the height of the 25+25 top and bottom padding.

That's also why both Paul and Lucy have suggested setting the border on another element rather than the link itself. As you already have a list, using the <li>st items avoids adding extra elements that have no semantic meaning just to achieve a design goal.

@Paul, the float on .nav li a means the <li> dimensions to <a>'s border edge. That reproduces the undesired taller border, so I'm wondering if that was an accidental cut/paste from the original code and should be deleted?