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> </span> טלפון</label>
<input type="text" id="phone" name="phone" maxlength="20" value="<?php echo $phone; ?>" />
</div>
</fieldset>
<fieldset>
<legend> </legend>
<div class="freetext">
<input type="checkbox" name="subscribe" class="checkbox" checked="checked" />
<span>אני מסכים לקבל חדשות <a href="#">ועדכונים</a> לאימייל</span>
</div>
<div id="submit">
<label><span> </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}