Forum Moderators: not2easy
I have an issue with some code that I just know someone has an answer for.
I am developing a site design for a client, the test site can be found at raptor-development dot com.
My issue is if you click the feed icon in the left of the footer you will see a popup div which contains an unordered list.
Now, the list-style-image is positioned correctly, and if you hover over an item you will see the background is in line with the image, but the text is not.
Now this must be an intrinsic issue with the unordered list because it looks the same in IE8, FF3.5 and Safari4.
This is vertical align I am referring to.
My CSS for the whole block looks like this:
#footer #feedProvider {
position: absolute;
display: none;
width: 96px;
border-width: 1px;
border-style: outset;
background: #DDDDDD;
margin-top: -84px;
left: 26px;
padding: 10px;
}
#footer #feedProvider ul {
margin: 0 0 0 4px;
padding: 0;
}
#footer #feedProvider li {
list-style-image: url('../img/Feed_18x18.png');
color: #006699;
text-align: left;
}
#footer #feedProvider li:hover {
cursor: pointer;
color: #FFFFFF;
background: transparent url('../img/bookmark-hover.gif') no-repeat;
padding-left: 8px;
}
feedProvider is the outer DIV.
Why does the text not appear in-line with both the image and the background? I have tried various padding and margin but I just cannot position the text in-line.
I have never thought about it before because my CSS skills where not as good, but now I am trying to keep everything MVC and that has forced my to look more closely at my CSS.
Any help here would be greatly appreciated. I might even send you a shrunken head for xmas...just pick a politician ;)
Thanks,
Paul.
Ok, I fixed the issue by setting the height of the li to match that of the background hover, 18px, then enclosing the text in a span and setting it's vertical-align to "top".
This brought the vertical alignment of the list-style-image, the hover background and the text all into the same :)
Gotta hate what you love, just a little.
Thanks.
