Rounded Corners with CSS, looking for help/comments on my solution

[lgiuliari]

There are countless ways to achieve this effect and I am trying to come up with a solution that fits my needs and is accessbile. I hope the way I wrote this that things will scale pretty well with changes in text size and amount of information to be placed in this box.

I attached the link below which contains the code and css I used. I'm still messing around with trying to get the bottom corners to line up right but I am still having problems getting them to work. Its seems like things are a pixel off and I can't figure out what I'm doing wrong. If anyone could help me with that problem or have any input on how to achiveve the same effect with more efficient code, please let me know! Thanks!

http://www.judiciary.state.nj.us/layout_test/test4.html

[drhowarddrfine]

Looks very nice in FF3. Are you aware border-radius works in FF, Safari and Chrome?

[lgiuliari]

I'm not to familiar with that. I also forgot to mention the issues with the bottom is in IE of course. Which is suprising to all I'm sure. I always feel I've got something the way I want, and then IE is always good for throwing a wrench in making my design cross browser compatible. Any thoughts on that?

[drhowarddrfine]

Internet Explorer is 11 years behind web standards support and the worst browser on the planet. IE8 will have much better CSS but little of anything else and will continue to be the worst. Those are my facts on that.

[drhowarddrfine]

CSS Border-Radius .

[lgiuliari]

Ah nice I'll have to save that for future reference. My main problem still remains though. I've been fiddling with it and no luck still getting it to work in ie. That is sadly the standard I need to defintely make sure it works in.

Any ideas of where to look or what to ad that might do the trick to get the bottom corners to align properly with my left and right borders? It's like a pixel off. Grrr

[drhowarddrfine]

You must mean IE6? I don't see the problem in IE7. IE6 is your required platform?!

Try setting margins/padding to zero on those elements and see what happens.

[lgiuliari]

Whoops, it probably would have helped if I mentioned which version of IE. Yes, I'm looking at it in IE6. I added in the padding/margins set to 0 on the bottom corners and I didn't have any luck. I double checked it again in other browsers and now don't have either of the bottom corners showing up in Opera, FF, Safari, etc.

I figured the bottom corners would turn out to be the easiest part since they seem like they should be much more simple than how the top is set up. Argh, apparently not.

[drhowarddrfine]

Well, if it's working everywhere but IE6 then you coded it correctly. IE will always be the problem. You can set conditional comments to fix IE6 but I don't support that browser anymore and the only computer I have with IE6 on it I've taken apart for the moment. Sorry.