InsaneJournal

Firefox problem
I have discovered an unexpected problem with one of my layouts in Firefox. I'm using a border-radius to shape an element and applying a box-shadow to it to give it some depth. When I pull up the layout in Firefox, most of these elements render properly - they're all coded the same way. But occasionally, one of the elements is shaped properly - but its box-shadow forms a normal rectangle, like it's not being clipped properly by the border-radius property.

I've done some searching to see if I can find a common solution, but nothing's turned up. Here's a tiny screencap, followed by the code producing this effect:



<center><div style="width:300;height:100;padding:10 0 0 0;line-height:15px;"> <!--LEFT WING--> <div style="width:99;margin-top:-4px;float:left;"> <a href="#1" style="display:block;width:100;height:23;border-radius:15% 0% 0% 100%;margin:5 0 0 -4px;border:1px solid #aaa;text-decoration:none;color:#777;-webkit-transform:rotate(12deg);transform:rotate(12deg);background:#fefefe;position:relative;z-index:1;box-shadow:1px 1px 1px #777;"><div style="text-align:right;margin-right:9px;-webkit-transform:rotate(1deg);transform:rotate(1deg);margin-top:3px;">General Info</div></a> <a href="#2" style="display:block;width:90; height:20;border-radius:15% 0% 0% 90%;margin:-2 0 0 11px;border:1px solid #aaa;text-decoration:none;color:#777;-webkit-transform:rotate(9deg);transform:rotate(9deg);background:#fdfdfd;position:relative;z-index:2;box-shadow:1px 1px 1px #777;"><div style="text-align:right;margin:2 9 0 0px;-webkit-transform:rotate(-1deg);transform:rotate(0-1deg);">History</div></a> <a href="#3" style="display:block;width:65;height:18;border-radius:15% 0% 0% 90%;margin:2 0 0 36px;border:1px solid #aaa;text-decoration:none;color:#777;-webkit-transform:rotate(5deg);transform:rotate(5deg);background:#fefefe;position:relative;z-index:3;box-shadow:1px 1px 1px #777;"><div style="text-align:right;margin:2 9 0 0px;-webkit-transform:rotate(1deg);transform:rotate(1deg);">Notes</div></a> <!-- THE FIRST PROBLEM --> <div style="width:35;height:13;border-radius:15% 0% 0% 90%;margin:1 0 0 66px;border:1px solid #aaa;-webkit-transform:rotate(3deg);transform:rotate(3deg);background:#fefefe;position:relative;z-index:4;box-shadow:1px 1px 1px #777;"></div> </div> <!--PICTURE--> <div style="width:10;background:#fefefe;border-top:1px solid #aaa;border-bottom:1px solid #ccc;height:71;position:relative;z-index:5;margin:11 0 0 -5px;float:left;box-shadow:1px 1px 1px #777;"></div> <div style="width:91;float:left;margin:0 0 0 -4px;"> <img src="http://www.insanejournal.com/userpic/31346213/4062071" style="width:90;height:90;border:1px solid #777;position:relative;z-index:6;background:#fff;border-radius:10;box-shadow:0px 2px 2px -1px #444;"> </div> <div style="width:10;background:#fefefe;border-top:1px solid #aaa;border-bottom:1px solid #ccc;height:71;position:relative;z-index:5;margin:11 0 0 -3px;float:left;box-shadow:0px 3px 0px -1px #aaa;"></div> <!--RIGHT WING--> <div style="width:94;float:left;margin-top:-4px;text-align:left;"> <!-- THE SECOND PROBLEM --> <a href="#4" style="display:block;width:100;height:23;border-radius:0% 15% 100% 0%;margin:5 0 0 -5px;border:1px solid #aaa;text-decoration:none;color:#777;-webkit-transform:rotate(-12deg);transform:rotate(-12deg);background:#fefefe;position:relative;z-index:1;box-shadow:1px 1px 1px #777;"> <div style="margin:3 0 0 9px;-webkit-transform:rotate(2deg);transform:rotate(2deg);"> Personality </div></a> <a href="#5" style="display:block;width:90;height:20;border-radius:0% 15% 90% 0%;margin:-2 0 0 -5px;border:1px solid #aaa;text-decoration:none;color:#777;-webkit-transform:rotate(-9deg);transform:rotate(-9deg);background:#fdfdfd;position:relative;z-index:2;box-shadow:1px 1px 1px #777;"><div style="margin:3 0 0 9px;">Abilities</div></a> <a href="#6" style="display:block;width:65;height:18;border-radius:0% 15% 90% 0%;margin:2 0 0 -5px;border:1px solid #aaa;text-decoration:none;color:#777;-webkit-transform:rotate(-5deg);transform:rotate(-5deg);background:#fefefe;position:relative;z-index:3;box-shadow:1px 1px 1px #777;"><div style="margin:2 0 0 9px;-webkit-transform:rotate(-2deg);transform:rotate(-2deg);">OOC</div></a> <div style="width:35;height:13;border-radius:0% 15% 90% 0%;margin:1 0 0 -5px;border:1px solid #aaa;-webkit-transform:rotate(-3deg);transform:rotate(-3deg);background:#fefefe;position:relative;z-index:4;box-shadow:1px 1px 1px #777;"></div> </div> <br style="clear:both;"> <!--CLOSE NAVIGATION--> </div></center>

I would really appreciate some help on figuring this one out. The simple solution is obviously to ditch the box shadows, but it makes the elements look too flat.