CSS issues in IE7 and IE8

Hi all,

I’m in the process of testing my site’s compatibility in different browsers, and as usual, the only problems I have experienced have been in Internet Explorer. I have managed to fix most of the errors myself, but there are a couple that I’m struggling with. If any experts in this area could help point me in the right direction, I would be thoroughly appreciative.

  1. The first error I am having occurs in IE7 and IE8. On product pages of my e-commerce site (Example), there is an ‘Email to a Friend’ button, which when clicked on brings up a popup form (tellafriend_form.php) with embedded CSS. In all browsers except IE7 and IE8, the form appears as it should, but in IE7 and IE8 everything is misaligned and out of place ([URL=“http://i1118.photobucket.com/albums/k616/HarveyLester/Screenshot1.jpg”]Screenshot). Here is ‘tellafriend_form.php’:
<style type="text/css">

input {
	font-family:Georgia, "Times New Roman", Times, serif;

.tellafriend  { position:relative; }

.tellafriend  h3 {
	margin:0 0 10px 0;
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 22px;

.row { min-height:25px; margin-bottom:8px;  }

.row label { width:110px; padding-top:5px; padding-right:10px; text-align:right; margin-right:10px; float:left; }

.indicates { color:#990000; }

.tellafriend {
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 12px;

.textfield { border:1px solid #ccc; padding:6px; font-size:12px; width:380px; }

.textarea {
	border:1px solid #ccc;
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 12px;
.button {
            border:0px dashed #fff;
            padding:5px 10px;
            color:#fff; background:#000000;

.button:hover, .button:focus { border:0px dashed #fff; background:#000; color:#fff; }

.button_spacer { margin-left:422px; margin-right:5px;  }

a.close {
	background-image: url(http://www.projectdisobey.com/disobeyclothing/wp-content/themes/eCommerce3/images/closebox.png);
	background-repeat: no-repeat;

 $pid = $_REQUEST['pid'];

<form name="tellafrnd" action="<?php echo get_option('siteurl')."/?page=tellafriend";?>" method="post" onsubmit="hideform();">
<input type="hidden" name="productid" value="<?php echo $post->ID;?>" />
<div class="tellafriend" >
<h3><?php _e('Email to a Friend'); ?></h3>
<div class="row">
<label class="manda"><?php _e('Your Name'); ?> <span class="indicates">*</span> </label>
<input type="text" name="frnd_yourname" id="frnd_yourname" class="textfield"/>
<div class="row">
<label class="manda"><?php _e('Your Email Address'); ?><span class="indicates">*</span> </label>
<input type="text" name="frnd_youremail" id="frnd_youremail" class="textfield" />
<div class="row">
<label class="manda"><?php _e('Friend Name'); ?> <span class="indicates">*</span> </label>
<input type="text" name="frnd_name" id="frnd_name" class="textfield" />
<div class="row">
<label class="manda"><?php _e('Friend Email Address'); ?> <span class="indicates">*</span> </label>
<input type="text" name="frnd_email" id="frnd_email" class="textfield" />
<div class="row">
<label class="manda"><?php _e('Subject'); ?> <span class="indicates">*</span> </label>
<input type="text" name="frnd_subject" value="<?php _e('DisobeyClothing.com -'); ?> <?php echo the_title();?> (T-Shirt/Hoodie)" id="frnd_subject" class="textfield"  />
<div class="row">
<label class="manda"><?php _e('Your Comments'); ?>  <span class="indicates">*</span> </label>
<textarea name="frnd_comments" id="frnd_comments" cols="20" rows="5" class="textarea"><?php _e('I thought you might like this design from DisobeyClothing.com!'); ?>
<div class="row">
<input type="submit" name="Send" value="<?php _e('Send Email'); ?>" onclick="return check_frm()"  class="button button_spacer" />
<a href="#" onClick="hideform()" class="close" ></a> </div>
<!--tellafriend #end  -->

Can anybody tell me what I need to change to get this form to appear the same in IE7 and IE8 as it does in other browsers (Screenshot)? Also, how do I make these changes specifically to IE7 and IE8 only?

  1. The second error I am having is with a ‘Forgot password’ form on the ‘Login’ section of my site (http://www.projectdisobey.com/disobeyclothing/?page=login#register). For some reason, in IE7 the label tag has unwanted top padding (Screenshot). How might I fix this?

Here is the code:


<div class="lostpassword_form" id="lostpassword_form" style="display:none;">
<h3>Forgot password?</h3>
<form name="lostpasswordform" id="lostpasswordform" action="http://www.projectdisobey.com/disobeyclothing/?page=login&amp;action=lostpassword" method="post">
<label>Username or Email</label>
 <input type="text" name="user_login" id="user_login1" value="" size="20" class="lostpass_textfield" />
<br />
<!-- <a  href="javascript:void(0);" onclick="document.lostpasswordform.submit();" class="highlight_button fl " >Get New Password</a>-->
<input type="submit" name="get_new_password" value="" class="highlight_input_btn forgotpass" />


.lostpassword_form { padding:20px 20px 11px 20px; height:110px; margin-bottom:20px; position:relative;}

#lostpasswordform {	
     padding-left: 112px;	
     margin-top: 13px;

.lostpassword_form label {
     font-size: 13px;
     padding-right: 10px;
     padding-top: 5px;
     text-align: right;
     width: 180px;

.lostpass_textfield { padding:4px; width:250px; margin-bottom:8px;  }

#content input.highlight_input_btn.forgotpass {
     background-image: url(../images/getnewpassword.png);
     background-repeat: no-repeat;
     background-position: center center;
     height: 31px;
     width: 191px;	

Thanks a lot guys!

  1. Add a doctype to the iframe page or all versions of IE will render much like IE5 (although not exact) but will use the broken box model and all manner of bad things as well as forgetting all the enhancements of the newer versions.

This will probably fix the form in one go.

2)This should get it closer:

.lostpassword_form label{padding-top:0}
#lostpasswordform label{vertical-align:middle}

Thanks for your help Paul. I tried what you said for number 1 and it made things better, but unfortunately it still doesn’t look quite right (Screenshot). Is it now just a case of creating new CSS rules specifically for IE7? If so, how do I do that?

Your suggestions for number 2 got it closer to where it should be, so thanks for that. Is it not possible in IE7 to get it completely centred like other browsers?

Thanks once again. I appreciate the help.

Actually, don’t worry about error 1. I managed to work it out.

Try this instead which seems to be the same cross browser.

#lostpasswordform label{vertical-align:top;position:relative;top:5px}

Excellent. Your last suggestion worked perfectly. Thanks Paul!

Pls help me fix it. I have a problem about error 1. Thanks

Please help you fix what?

You’ll need to provide more information that that.