problem in css with internet explorer 7

Question

I am building a new website. The html and css is verified but i have trouble displaying the correct layout for ie7. You can view a screenshot of the problem here:

http://img.skitch.com/20100911-x2qpb93hd7i2gjkynhabxwqpyu.jpg

How do i prevent ie7 from putting the extra space between the breadcrumbs links?

The links should be like this:

img.skitch.com/20100911-8niw3fxetgxhigf55nks9gp2uw.jpg

url: www.free-ebooks.gr/testing/index.html

Answer 1

There are a few issues with your CSS as it doesn't display correctly in FF either. In ie.css, modify the following classes like this:

#breadcrumbs li a{
    display: block;
    float: left;
    background-image: url(../images/bread-separator.png);
    background-repeat: no-repeat;
    background-position: right;
    height: 34px;
    line-height: 34px;
    padding: 0 20px 0 10px;
}

#breadcrumbs li.sort a{
    background-image: none;
    border-left: 1px solid #d5d3d2;
    padding: 0 10px;
}

I could on test these in FF through FireBug, but it should work on IE as well. Let me know how it goes.