Here is my current HTML markup:
<div id="content">
<img src="some_content.jpg">
<form action="...">
<input type="text" ... >
<input type="submit" ...>
</form>
<div id="forgotyourpassword">
<a href="somelink.com">Forgot your password?</a>
</div>
</div>
The form structure is generated by a CMS, hence it cannot be modified.
The styling for the children within the content div allows for centering both vertically and horizontally. The forgot your password link positioning is currently set as follows:
Below is the CSS code specifically for the forgot your password link:
#forgot-password{
float: right;
margin: 0; /* reset some stuff inherited from parent */
padding: 0; /* reset some stuff inherited from parent */
margin-right: 171px;
margin-top: -20px;
}
Below are some relevant CSS styles being applied:
#content{
position:absolute;
width: 650px;
left:50%;
top:50%;
height:242px;
margin-top:-126px;
margin-left: -325px;
text-align: center;
}
#content > *{
vertical-align: middle;
display: inline-block;
zoom:1;
*display:inline;
margin-left: 20px;
margin-right: 20px;
}
While this setup works in general, issues arise when an error message is appended to the form after submission. In such cases, I want the link alignment to adjust dynamically relative to the form changes.
The challenge lies in aligning the link with respect to the button rather than its parent container.
I initially planned to position the forgotyourpassword div directly under the form so that any change in form size adjusts the link position accordingly.
Adjusting margin-top should theoretically realign the forgotyourpassword div with the submit button regardless of form height variations.
However, testing reveals:
- In Firefox 10, the
forgotyourpassworddiv fails to shift as intended once overlapping with the form content area. - In IE9, the
forgotyourpasswordappears above the form.
Is there a CSS-only solution compatible with IE7+ and Firefox to address this alignment dilemma?