Why under IE7,6 the box above on the border?

HTML & CSS
1

test

why under IE7,6 , the box which including the text “code” “book” are above on the border? not joining together. the red part in the image

but ok under firefox.and how to remove the bottom line.when the mouser hover on the text(code or book) and under the default state with text code.

2

i am sorry, the above link is wrong. the right is this:

test

3

The reason for the space is because of the way clear works in IE 6 & 7, unlike in IE 8 and other browsers where it clears but keeps the flow perfect. If you do the following it will work fine in IE 6 & 7…

Change your .ranktitle class to the below

.ranktitle {
    margin-top: 5px;
    overflow: hidden;
}

What this will do is clear the floats before the element below which in your case are the list items as when you use the float property the container wrapping the elements looses the flow it normally has, so if we clear it using overflow: hidden the normal flow of the page gets restored.

4

i am sorry, i added the overflow: hidden;; to the ranktitle class, but it still couldn’t work.

5

anyone helps?

6

I just looked at your second test page in IE7 and it looks great.

I wonder if you still have your old page cached. See if CTRL+F5 shows the gap for you. I don’t see a gap anymore.

7