I've redone my left navigation menu in CSS here:
http://www.icdmeister.com/test/

It's laying out perfectly in FF but in IE7 there's extra space between the bullet (which is a background image) and the text of the list item.

What do I need to do to get this to look right in all browsers?

Andrew

P.S. After getting feedback from this forum on several related CSS issues, before posting I made sure I had my doctype declared and validated my XHTML and CSS. Thanks to all who've gently (and not so gently) helped me come along. -A.

Why don't you use the list-style-image property to accomplish the bullet instead of making it a background image?

http://www.w3schools.com/css/css_list.asp

I've tried it both ways and neither comes out looking good in both FF and IE7

Here's screenshots of the menu when I use the image as the bullet. I'm pretty happy with this in IE7 (although I'd prefer a little more space between the bullet and the text) but it's no good in FF because of the margin-left: -10px (CSS follows):

IE7

Firefox


ul.leftnavul
{
list-style: url(http://www.icdmeister.com/images/nav_bullet.jpg) inside;
margin: 3px 0 0 3px;
padding: 0px;}

li.lnavli
{
padding-left: 0px;
margin-left: -10px;
margin-bottom: 7px;
position
}

When I use the bullet image as a background, in contrast, all looks well in FF but I can't get rid of the space between the bullet and the text in IE7.

Here's how it looks:

FF


IE7


And here's the CSS for that:

ul.leftnavul
{
list-style: none inside;
margin: 3px 0 0 3px;
padding: 0px;
}

li.lnavli
{
background-image: url(http://www.icdmeister.com/images/nav_bullet.jpg);
background-repeat: no-repeat;
padding-left: 6px;
margin-bottom: 7px;
background-position: 0px;
}

Any suggestions are welcome.

Andrew

No one has any suggestions or potential solutions?

A.

I'm going to take a look at it, just didn't have any time yesterday. I'll see if I can get it fixed.

Ok, found the problem. You have this:

ul.leftnavul
{
list-style: none inside;
margin: 3px 0 0 3px;
padding: 0;
}

REMOVE the 'inside' and the gap will go away. If you're not using the default list image, it's pointless, and problematic, to specify a position for a non-existent bullet.

I would also suggest that you can vastly simplify your CSS and your coding by using the cascade and specificity. I changed your list to this:

ul.leftnavul li
{
background: url(nav_bullet.jpg) no-repeat;
padding-left: 6px;
margin-bottom: 7px;

}

ul.leftnavul li a:link {
color: #006378;
text-decoration: none;
padding: 0;
margin: 0;
}
ul.leftnavul li a:visited {
color: #006378;
text-decoration: none;
}
ul.leftnavul li a:hover {
color: #E3EEF1;
background-color: #15AFCB;
}
ul.leftnavul li.last{
margin-bottom: 3px;
}

The .last class gets the inline styling out of your html. All that simplifies your HTML to this:

<li><a href="#">Metabolic</a></li>
<li><a href="#">Musculoskel</a></li>

Much cleaner, and less work for you.

Now, you need to clean up the float drop problems you have with IE6.

If all else fails, you could use a conditional statement for IE. I am sure LadynRed will figure out a better solution though!

I am on a Mac right now, but if I get access to IE later, I will take a look at it too.

Originally Posted by LadynRed

Ok, found the problem. You have this:
REMOVE the 'inside' and the gap will go away. If you're not using the default list image, it's pointless, and problematic, to specify a position for a non-existent bullet.

You are my hero! I could have sworn I had tried it with and without the "inside" attribute but I guess not. I knew there had to be a small change like this that I was missing. You rock, LnR!

Your suggestion to simplify the CSS is well-taken. When I was doing it I knew it was inelegant and messy to apply the class to each li for instance but I'm still not clear on inheritance, cascading, and specificity. I'm going to study your revision of my code then do some general reading about this because it looks like something well worth understanding clearly.

I just saw the IE6 issue, I think it has something to do with things not fitting within defined widths once margins/padding are added and then dropping down to the next level. I'll take a stab at this today.

Thanks a ton!

Andrew