Increasing line height

[Robert Paulson]

I’m trying to create a derivative to the css styling of the nav bar links here, but I’m struggling with IE’s rendering of the background image.

I’ve set up five horizontal links, each with it’s own background image, each with a replacement image when you hover over that div/link. But wanting to keep the text in the links for seo purposes, the links are as they are here, in an unordered list, display: inline.

The problem is this – IE won’t show any more of the background than what the line height tells it to. So for an 11 point font, I get about 15 pixels-worth of my 23 pixel background images. And it doesn’t seem to matter what I do, I can’t get IE(7) to show any more than that. Firefox was showing the full image just fine (until I started messing with the css to adjust for IE).

Any ideas as to what I might be doing wrong or what I can do to make this work?

If you need to see this in action (and see how I’ve stolen, err, used the nifty jquery elements used here), you can see it at [skippinghearts.com].

Thanks in advance!

[apostrophe]

This should do it:

Code:

#headnav li {
display:inline;
float:left;
line-height:150%;
padding: 0;
}
#headnav li a {
color:#000000;
display:block;
height:23px;
padding:0 12px;
text-decoration:none;
}

[TheDoc]

Remember that you can still keep the text in there but replace it with an image using the ol’ text-indent:-9999px;

[Author]

Posts