Round Corner (css and javascript)

Question

Please go to: http://jlecologia.com/page1c.html to see the problem

The top box look fine but in IE6 there is a double top and bottom border.

can somebody point me ut what i have done wrong ?

Or can anybody tell me a javascript rounded box that accept to do that effect with the border that is unequal. I have test some and they all fail, so i have done the picture round box but i like the jQuery javascript approach better.

Answer 1

看一下JQuery的圆角插件 ， 这是一个演示

Answer 2

The default for background images to to have them repeat.

Try: background: transparent url(../images/roundbox-top.jpg) 0 0 no-repeat;

---

Edited after comment to provide full solution:

IE6 sets the height of empty divs to your font-size if the height specified in the css is less than the font-size.

On #roundbox .top and #roundbox .bottom, put

font-size:0;
line-height:0;

That will collapse the div to the right height.

Answer 3

除了对底部边框进行的更改之外，将“ top”类的元素的字体大小设置为7px可以在我的IE6中对其进行修复。

Answer 4

Try using the web developer toolbar in Firefox to validate the CSS and HTML. I did a quick check and there are multiple errors in each. The rendering difference, I suspect, is because IE does not handle malformed content as well as FF. In particular, even small errors in CSS files tend to snowball in IE and melt down an otherwise good layout. Not sure if IE7 and IE8 have made any improvements in this regard.