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

[ulthane]

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>פרטי משתמש</legend>
<div>
<label for="email"><span>*</span> אימייל</label>
<input type="text" id="email" name="email" autocomplete="off" maxlength="50" value="<?php echo $email; ?>" />
</div>
<div>
<label for="pass"><span>*</span> סיסמה</label>
<input type="password" id="pass" name="pass" autocomplete="off" />
</div>
<div>
<label for="repass"><span>*</span> אימות סיסמה</label>
<input type="password" id="repass" name="repass" />
</div>
</fieldset>
<fieldset>
<legend>פרטים כלליים</legend>
<div>
<label for="firstname"><span>*</span> שם פרטי</label>
<input type="text" id="firstname" name="firstname" maxlength="20" value="<?php echo $fname; ?>" />
</div>
<div>
<label for="lastname"><span>*</span> שם משפחה</label>
<input type="text" id="lastname" name="lastname" maxlength="20" value="<?php echo $lname; ?>" />
</div>
<div>
<label for="phone"><span>&nbsp;</span> טלפון</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>אני מסכים לקבל חדשות <a href="#">ועדכונים</a> לאימייל</span>
</div>
<div id="submit">
<label><span>&nbsp;</span></label>
<input type="submit" name="submit" value="שלח" />
</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}

[ronpat]

Hi, ulthane,

Here are a couple of resources that should help:

http://www.sitepoint.com/forums/show...-color-problem

http://stackoverflow.com/questions/5...f-border-in-ie

[HAWK]

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.