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.
- 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;
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?
- 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!
