It's due to the border styling being set to ridge, they both make an attempt to make it look 3D ... try this instead:

[code]border: 6px solid #be88b4;[/code]

:-)

This is definitely a weird one. The problem is basically because you're using the ridge border. Neither IE or FF seem to use the specified colour in either of the ridge colours, but try and make up a composite that they see as appropriate. Obviously they use two different methods. I tried to google the issue, but I can't seem to find any discussion on this. The same problem exists for inset/outset borders and the like....

My only suggestions would be to use actual images in the background, but it makes the code pretty clunky. If the colour difference is a problem, I would go with solid borders.

If anyone finds a discussion on this one, I would be really interested! Sorry I couldn't be of more help!

Pureform,
Yeah, I tried the solid border, but 6px solid just looks like cr@p.

Subsomatic,
Can't realy use an image as a background, because it is a fluid layout. The only alternative, I think, is to overlay divs and and create the 3d effect from two 3px borders. Super clunky, and a coding nightmare. Either that or some kind of IE hack. Also clunky and very very ugly.

CSS3 has a 'colour render' attribute which should fix the problem, but who kows how long it will be before CSS3 is supported by all browsers.

thanks for taking the time to look and help

You could also try "nifty corners" code. It's not exactly what you intend I guess but it's a nice way to lively up your website and get some low maintenance fluid borders going. Look up nifty+corners in the search engine of your liking.

and how long until all people use up to date browsers...

the background image (repeat-x/y) would work pretty well with a table, but I know how much ppl hate using them so I won't bother :) The overlaying div idea is a good one, but you're right, it gets pretty clunky pretty fast.

best of luck!