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 juery javascript pproch better..

thanks in advance mam

---

i ha ve read the comment, i will validate the code, but the top is still buggy

Answer 1

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.

Answer 2

Take a look at the JQuery's round corner plugin And here is a demo

Answer 3

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 4

In addition to the change you've made for the bottom border, setting the font-size of the element with class "top" to 7px fixes it in my IE6.