See my sidebar here in firefox: www.tammyhartdesigns.com/blog

It's all done with css, and the links are generated by the php. What's up?

Tammy I'm not entirely sure what the issue is, but I'm guessing it's the extra space between the links in IE. If it is then I think you just need to specify a margin on the links. I see you have padding applied now.

Some of the cross-browser issues are due to each browser having a different defualt value on a lot of properties. I've found margins and paddings being one place where IE and Firefox differ. Usually if you explicitly set both te two browsers get in synch.

Let me know if that works or not or if I completely misunderstood the issue. I have been known to do that.

Okay, here is the css for the list:

#sidebar ul li {
   list-style-type: none;
   list-style-image: none;
   margin: 0px;
   padding:0px;
}

And here's the css for the links :

#sidebar li a {
   display: block;
   text-decoration: none;
   padding: 0 5px 0 0;
   color: #666666;
   margin: 0px;
}
#sidebar li a:hover, #sidebar li a:active {
   background-image: url(images/sidebar_bg_over.jpg);
   background-position:right;
   background-repeat:repeat-y;
  padding: 0 5px 0 0;
   color: #666666;
   margin: 0px;
}

And then, I have the div that the list for the generated links in a div with the id of sidebar.

I can be wierd with lists. I think it has a some defaults that force the height to be larger than you want. One of the hacks I've tried is to give a height to the <li> only for IE as 0.5%. That seems to close up the space. You can guarantee that IE will use that height and other broswers will ignore it by using an underscore in front so:

li {_height:0.5%}

You can do that with any css property as long as the one with the underscore comes after the one without.

See if adding that _height to the <li> closes things up in IE. I've had the same problem myself often and that has usually solved it for me. If not just let me know and I'll take another look.

I found out what it is. It's the display:block. when I comment that out, it goes back right, but then the hovering background is only behind the letters and not the entire span of the div like it's supposed to be.

I don't understand why IE looks at the block diferently. Is there another way I can make the a:hover bg span the entire width of the div without display:block?

(I say we sign a petition that unites all browser programmers and get rid of all these stupid cross compatibility migraines!)

The problem is actually pretty simple.

When you put an anchor to block, IE wants to see dimensions. Or at least a width. Put a width on #sidebar li a and you're fine

Tammy I think it's just that different browsers have different different defaults for a lot of things. Usually when things aren't aligning the same in Firefox and IE I'll explicitly give the element values for margins and paddings and widths and heights, etc. That will usually (though not always) at least get them displaying the same and from there I can play around with the values to get the exact spacing I want.

I know IE has a weird quirk with lists items and I've found that using the 0.5% for the height (or maybe the line-height) seems to close up the lists.

The 0,5% height trick isn't nescesarry here, take a look;

http://home.tiscali.nl/bmshutte/blockwidth.htm

That's interesting. I had never seen that before. Goof to know since I never cared for the 0.5% hack thing. I just knew it worked. Thanks.

Originally Posted by ghettobert

The problem is actually pretty simple.

When you put an anchor to block, IE wants to see dimensions. Or at least a width. Put a width on #sidebar li a and you're fine

block level elements will occupy the entire width of the parent container unless a width is specified.

Originally Posted by chrishirst

block level elements will occupy the entire width of the parent container unless a width is specified.

Indeed. But somehow IE stretches the height of the li tag when there's no width on the anchor. If there's any logical explanation for this I do not know ..

Okay, it worked as far as taking the space out, but it maade the text disappear. Not in Opera or firefox, just in IE. I'm using version 7, btw. I'll leave it that way so you can see.

Tammy I seem to be able to see everything in IE6. Did you fix things?

Perhaps it's a version difference. In IE7, the links in the sidebar have the hovering effect, but the text is not there. I can mouseover where each link is, but there's no text to be seen. I'm glad to know that it's working in version 6, not too many people have switched to 7 yet.

Maybe it is just IE7. I checked again to make sure and I'm still seeing the links in IE6. Version 7 is still in beta too so maybe it's a bug that still needs to be fixed. I can't imagine anything anyone here suggested would have caused that.

What method did you use to close up the space?

I gave the anchors a width.

Yeah I can't imagine that would cause the problem you're seeing in IE7. I thought maybe if you'd gone with my 0.5% height hack IE7 was making things to small to see. Let's hope it's just a bug in IE7.

I tried what you said, and it didn't do anything.

Weird it's worked for me before. Did you apply it to the links or the list-items? I think it only works on the list items. Maybe it's not for all cases though. It's not something I've used a lot, but it has worked on a few sites.

I think I'm going to have to try specifying the width of the link though in the future since I like that better as a solution.