Hello,

I have an issue where I have a buttonmade from a two div set. The leftside uses jquery corners as I need to do an !important background-color override. The right side is using pie

<a href="#"><div class="button"><div class="buttonLeft">/<div><div class="buttonRight">text goes here</div></div></a>

the right side uses the following style

width: 380px;
height: 23px;
float:left;
background-color:#FFF;
color: #000000;
border: 1px solid #c4c4c4;
font: normal 12px Arial, Helvetica, sans-serif;
margin: 0px;
padding-left:5px;
-moz-border-radius-topleft:0ex;
-moz-border-radius-bottomleft:0ex;
-moz-border-radius-bottomright:8px;
-moz-border-radius-topright:8px;
-webkit-border-top-left-radius:0ex;
-webkit-border-bottom-left-radius:0ex;
-webkit-border-top-right-radius:8px;
-webkit-border-bottom-right-radius:8px;
behavior: url(/PIE.htc);
border-radius: 0px 8px 8px 0px;
-moz-box-shadow: 2px 2px 2px #c4c4c4;
-webkit-box-shadow: 2px 2px 2px #c4c4c4;
cursor:pointer;


now this div set is used in different locations. on one page the shape shows up 20pixels above buttonRight. On another 5 pixels above.

I have noticed if I have ieDev toolbar open and I move the frame border the button snaps to the correct location. Also the page does have some dynamically hidden elemnts that get a display=none if their contents are empty.

Any ideas why the right side is getting misaligned and what can I add to my css so it corrects the right side in ie only?