BG color gets out of fieldset's border in IE7/8

I’m trying to give a background color to a fieldset but when i do the background gets out of the fieldset’s top border in IE7/8 only as in the image below:

In any other browser it works just fine, I think its because of the legend tag but i cant seem to find a solution, any ideas?

HTML:

<form id="general-form" action="/register" method="post">
<fieldset>
<legend>&#1508;&#1512;&#1496;&#1497; &#1502;&#1513;&#1514;&#1502;&#1513;</legend>
<div>
<label for="email"><span>*</span> &#1488;&#1497;&#1502;&#1497;&#1497;&#1500;</label>
<input type="text" id="email" name="email" autocomplete="off" maxlength="50" value="<?php echo $email; ?>" />
</div>
<div>
<label for="pass"><span>*</span> &#1505;&#1497;&#1505;&#1502;&#1492;</label>
<input type="password" id="pass" name="pass" autocomplete="off" />
</div>
<div>
<label for="repass"><span>*</span> &#1488;&#1497;&#1502;&#1493;&#1514; &#1505;&#1497;&#1505;&#1502;&#1492;</label>
<input type="password" id="repass" name="repass" />
</div>
</fieldset>
<fieldset>
<legend>&#1508;&#1512;&#1496;&#1497;&#1501; &#1499;&#1500;&#1500;&#1497;&#1497;&#1501;</legend>
<div>
<label for="firstname"><span>*</span> &#1513;&#1501; &#1508;&#1512;&#1496;&#1497;</label>
<input type="text" id="firstname" name="firstname" maxlength="20" value="<?php echo $fname; ?>" />
</div>
<div>
<label for="lastname"><span>*</span> &#1513;&#1501; &#1502;&#1513;&#1508;&#1495;&#1492;</label>
<input type="text" id="lastname" name="lastname" maxlength="20" value="<?php echo $lname; ?>" />
</div>
<div>
<label for="phone"><span>&nbsp;</span> &#1496;&#1500;&#1508;&#1493;&#1503;</label>
<input type="text" id="phone" name="phone" maxlength="20" value="<?php echo $phone; ?>" />
</div>
</fieldset>
<fieldset>
<legend>&nbsp;</legend>
<div class="freetext">
<input type="checkbox" name="subscribe" class="checkbox" checked="checked" />
<span>&#1488;&#1504;&#1497; &#1502;&#1505;&#1499;&#1497;&#1501; &#1500;&#1511;&#1489;&#1500; &#1495;&#1491;&#1513;&#1493;&#1514; <a href="#">&#1493;&#1506;&#1491;&#1499;&#1493;&#1504;&#1497;&#1501;</a> &#1500;&#1488;&#1497;&#1502;&#1497;&#1497;&#1500;</span>
</div>
<div id="submit">
<label><span>&nbsp;</span></label>
<input type="submit" name="submit" value="&#1513;&#1500;&#1495;" />
</div>
</fieldset>
</form>

CSS:

#general-form {margin-right:10px}
#general-form fieldset {padding:10px 0;background-color:#dee6e8;width:360px;margin-bottom:10px;border:1px solid #B6C9CD}
#general-form legend {font-size:20px;color:#5b6e77;font-weight:bold;margin-right:10px}
#general-form div {margin-bottom:10px;position:relative;width:100%}
#general-form label {float:right;width:150px;font-weight:bold;font-size:15px;margin-right:10px;line-height:25px}
#general-form label span {color:#F00;font-size:17px;padding-left:5px}
#general-form input, #general-form textarea, #general-form select {width:170px;height:25px;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;padding:3px 5px;border:1px solid #B6C9CD;font-size:15px}
#general-form select {padding:0}
#general-form textarea {height:150px;resize:none}
#general-form #submit input {width:170px !important;font-size:15px !important;height:25px !important}
#general-form .freetext {margin-bottom:5px}
#general-form .freetext span {margin-right:3px;color:#336c83;font-size:15px;vertical-align:top}
#general-form .freetext a {vertical-align:top}
#submit:hover:before, #submit:hover:after {display:none}
#general-form .checkbox {width:auto;height:auto;margin-right:15px;padding:0}

Hi, ulthane,

Here are a couple of resources that should help:

http://stackoverflow.com/questions/5667259/the-fieldsets-background-color-gets-out-of-border-in-ie

Hi @ulthane ;
We’re testing a new product that we’ve built at SitePoint to help people fix broken CSS live. Your problem looks like one that we could easily help you fix on the spot.
One of our CSS experts is online now and ready to help if you’re keen to give it a go.

Edit: I’m removing the link to the product while we fine tune and develop further. Will keep you posted.