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 (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;
padding: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 {
color:#444;
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;
padding:6px;
width:380px;
height:250px;
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 12px;
}
.button {
border:0px dashed #fff;
padding:5px 10px;
line-height:10px;
margin-top:10px;
color:#fff; background:#000000;
cursor:pointer;
font-size:13px;
}
.button:hover, .button:focus { border:0px dashed #fff; background:#000; color:#fff; }
.button_spacer { margin-left:422px; margin-right:5px; }
a.close {
height:30px;
width:30px;
position:absolute;
right:-8px;
top:-8px;
background-image: url(http://www.projectdisobey.com/disobeyclothing/wp-content/themes/eCommerce3/images/closebox.png);
background-repeat: no-repeat;
color:transparent;
cursor:pointer;
text-decoration:none;
display:block;
}
</style>
<?php
$pid = $_REQUEST['pid'];
query_posts("p=$pid");
if(have_posts())
{
while(have_posts())
{
the_post();
}
}
?>
<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>
<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>
<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>
<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>
<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>
<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!'); ?>
</textarea>
</div>
<div class="row">
<input type="submit" name="Send" value="<?php _e('Send Email'); ?>" onclick="return check_frm()" class="button button_spacer" />
</div>
<a href="#" onClick="hideform()" class="close" ></a> </div>
<!--tellafriend #end -->
</form>
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?
2. 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:
HTML:
<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&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" />
</form>
</div>
CSS:
.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 {
color:transparent;
background-color:transparent;
background-image: url(../images/getnewpassword.png);
background-repeat: no-repeat;
background-position: center center;
height: 31px;
width: 191px;
}Thanks a lot guys!