fixed alignment problem on wp-members login/registration form

DonaldScott
(@donaldscott)

10 years, 11 months ago
Hi –

There was an ongoing problem with the vertical aligmnent of the field labels on WP-Members login/registration form using certain themes, where the field labels were displaying too low, which had been reported reported a year ago:

http://wordpress.org/support/topic/plugin-wp-members-login-page-not-aligned?replies=11

I don’t know much about CSS, but after inspecting the page with Firefox Developer Tools, I decided to try deleting a single character in wp-members-2012.css – and it fixed the problem!

Here’s the original CSS rule, before I edited it:
```
#wpmem_reg label.text, #wpmem_reg label.checkbox,
#wpmem_reg label.textarea , #wpmem_reg label.select,
#wpmem_login label {
	left:4px;
	top: 40px;
	color:#555;
	width:210px;
	margin-top:8px;
	padding-top:5px;
	padding-bottom:5px;
	padding-left:5px;
	float:left;
	display: block;
	font-family: inherit;
	font-size: inherit;
	line-height: 2.2;
	height: 43px;
	display: block;

}
```
I changed line 126 of this file, from:
```
top: 40px;
```
to:
```
top: 0px;
```
and this corrected the alignment.

http://wordpress.org/extend/plugins/wp-members/

Viewing 2 replies - 1 through 2 (of 2 total)

Thread Starter DonaldScott
(@donaldscott)

10 years, 11 months ago

Actually, this fix does not work all the time.

It works with the theme RTTheme17.

However, it does not work with the theme VibeCom – the field labels are still mis-aligned vertically.

I wish this plugin were more robust.

It seems that the problem may be due to collisions and overrides between the class names used in the CSS file supplied with the WP-Members plugin, and the class names used in the various themes.

Careful programmers adopt a convention of prefixing their identifiers with an abbreviation representing the name of the plugin or theme, thus providing a sort of “namespace” or “package” system (in languages such as PHP or CSS or HTML which lack this), in order to avoid this sort of problem.

I have noticed while reading the CSS files for the WP-Members plugin that this convention was not always adopted.
Thread Starter DonaldScott
(@donaldscott)

10 years, 11 months ago
OK, I tweaked the CSS again (using Firefox Developer Tools) and now the vertical alignment of the field labels is displaying correctly in Chrome 27, Firefox 21 and IE 9.

Here is the current rule, at line 122 in the (modified) CSS file wp-members-2012.css:
```
#wpmem_reg label.textarea , #wpmem_reg label.select,
#wpmem_login label {
        left:4px;
        top: 4px;
        color:#555;
        width:210px;
        margin-top:4px;
        margin-bottom:4px;
        padding-top:4px;
        padding-bottom:4px;
        padding-left:4px;
        float:left;
        display: block;
        font-family: inherit;
        font-size: inherit;
        line-height: 2.2;
        height: 42px;
        display: block;

}
```
This makes the field labels vertically align correctly – at least when using the themes RTTheme17 and VibeCom.

Your mileage may vary!

PS – It would also be nice if the text which says:
```
*Required field
```
were slightly lower on the page.

However, this text is without a tag in the current HTML file, so it is probably not possible to change its position by modifying the associated CSS file.

Viewing 2 replies - 1 through 2 (of 2 total)

The topic ‘fixed alignment problem on wp-members login/registration form’ is closed to new replies.

Tags