Forum Moderators: not2easy
I am styling sidebar links like this:
#links ul {
list-style-type: none;
width: 152px;
margin: 0; padding: 0;}
.
#links li a {
display: block;
border-bottom: 1px solid #ddd;
line-height: 18px;
margin-bottom: -1px;
}
.
#links li a:hover {
background: #222;}
.
html:
<ul id="links">
<li><a href="...">Some link text</a></li>
...
</ul>Why am I setting line-height to 18px and a 1-pixel negative bottom margin? Because I want every line of the sidebar material to line up horizontally across the page with every line of the main content, on a simulated "baseline" at 18px spacing. I can't just set line-height to 17px (to take account of the 1px border), because some of the list-items span two or more lines of text.
So anyway, this is b0rked in IE7 in that on hover, the li background doesn't completely fill the space, but leaves what looks like a 1px stripe of the original background at the top (just under the previous li's border) - and, weirdly, it also breaks the whole li being the link target - ie, you have to actually hover over the text, not just anywhere in the block li, to invoke the hover style.
On IE6 it's even more horrible: on hover the neg margin seems to be turned off, pushing everything down one pixel. (Setting a neg margin on the hover style as well doesn't change this.)
Is there any way to do what I want to do and have IE do it too? At the moment I am just serving conditional styles to IE saying forget about the neg margin. But my lines don't line up then. :(
Many thanks for any help!
what about not using a bottom border, instead use a 1px bottom repeating graphic as a background image to the link instead, that way your line height can be 18px without a negative margin and shouldn't matter how many lines wrap
would that work?
