CSS problem with rounded corners

Hi,
I am finalising a student website redesign and have a layout issue which is appearing in Firefox.

In IE the layout of the rounded corner in the main content area is working. In Firefox it adds a vertical bar on the left hand side. I am guessing that IE is working around an issue with the CSS structure.

I am stumped as to why this is happening because the same rounded corner code is working fine on the same page in the top right corner within Firefox

Any help or guidance would be appreciated:

http://www.merlin-helps-students.com/

the CSS can be found at:

http://www.merlin-helps-students.com/common/text.css

Thanks

Vinay

Not 100% sure why it happens but I had the smae problem a while back. I'm sureone will have a better solution but try:

#content[id] {
width: 624px
}

add it in addition to the regular #content in your CSS. You may have to play with the width a little. I just guessed.



It just dawned on me to elaborate a little. IE doesn't read the [id] line (same can be done w/ classes) so it ignores the css. So anything you change in this part will not affect IE. So if the padding is a little off after changing the width, you can tinker with it as well.

I have not seen what happens on IEmac/Safari/Opera when this is done. I have only tried it with FF/MOZ and IE6.