For some reason, Firefox doesn't want to put a <form> inside a <p>... here's a picture
IE7 shows it correctly
Firefox shifts the form out of the paragraph?
Here's the code:
CODE
<div id="menu">
<p>
<img src="images/login_title.png" width="72" height="28" border="0" alt="" title="Log in" />
<form class="loginform" action="#" method="post">
<input type="text" name="username" class="pillbtn" value="Username" onfocus="this.value=''" /><br />
<input type="password" name="password" class="pillbtn" value="sweatyballsack" onfocus="this.value=''" /><br />
<input name="loginsub" type="image" value="Log in" src="images/login_btn.png" alt="Log in" /><br />
<a href="#forgot">Forget your password?</a><br />
<a href="#register">Not Registered?</a>
</form>
</p>
</div>
And the CSS:
CODE
#menu {
color:#FFFFFF;
margin:0;
padding: 5px;
}
#menu p {
margin:0 0 30px 0;
padding:0 0 30px 0;
background:url(images/menu_sep.jpg) bottom center no-repeat;
border: 1px dashed #FFCC00;
}
#menu form {
display:block;
}
#menu .loginform {
padding:0;
margin:4px;
text-align:right;
}
I've tried everything to get it to show right in Firefox and I just can't get the form to get inside the paragraph. Any ideas?
10 Mar, 2008 - 08:30 PM
| 