PDA

View Full Version : Username Forms and Submit


Death Dream
09-09-2008, 03:33 PM
So I am getting back to work on my website (long over due). One of the things that was itching me back then is still itching me now and that is the custom forms I am trying to create to work seamlessly with my design.

First I would like to direct you to http://dd.adesadesmoines.com/ (note: most of the page is outdated but the forms are still the same way.) View the page in Firefox and IE. In firefox it looks great, everything did what I wanted it to do. But in IE it draws a box around the form area and makes the box area a little bigger. Basically what is going on here is there is a form with a background image. The form and the background image you can tell apart in IE but in Firefox they look like they are one.

(I took out a lot of the PHP code to make it easier to see what is going on)

<div id="login">
<a href="<?php bloginfo('url'); ?>"><img class="design" src="<?php bloginfo('template_directory'); ?>/Images/design.gif" alt="" width="81" height="14"></a>
<span>
<form action="<?php bloginfo('url') ?>/wp-login.php" method="post">

<div class="forms"><input type="text" name="log" id="log" value="<?php echo wp_specialchars(stripslashes($user_login), 1) ?>" size="9" class="textinput" /></div>

<div class="forms"><input type="password" name="pwd" id="pwd" size="9" class="textinput" /></div>

<input name="rememberme" type="hidden" id="rememberme" value="forever" tabindex="90" />

<div class="bgbutton"><input type="submit" name="submit" value="login" class="button" /></div>

<input type="hidden" name="redirect_to" value="<?php echo $_SERVER['REQUEST_URI']; ?>"/>

</form>
</span>
</div>#login {
width: 775px;
text-align: left;
margin-bottom: 4px;
float: left;
}
#login .design {
width: 81px;
height: 16px;
padding: 0 8px 0 84px;
float: left;
}
#login span {
height: 16px;
font-size: 10px;
float: left;
}
#login .forms {
background:url(Images/formbg.gif);
width: 79px;
height: 14px;
text-align:center;
float:left;
margin: 1px 7px 0 0;
}
.textinput {
border:none;
height:12px;
font-size:9px;
}
#login .bgbutton {
background:url(Images/loginbg.gif) #666666;
float:left;
margin: 1px 7px 0 0;
width: 46px;
height: 15px;
text-align:center;
}I think the first step would to be get rid of that ugly box that appears in IE, but not sure how. Any ideas?

Edit: Forgot to add the submit button prob, but I'll ask that after this one get solved.
Edit2: The Register and Lost password thing in firefox is messed up too. Forgot to mention that. I think that only happens with FF3 though and not FF2. (Wordpress WIP: http://dd.adesadesmoines.com/WP2/ ... Also outdated)

~Death Dream~