Form Fields not aligning

[RussEby]

In Section 7, CSS files are added to style the pages. An issue with alignment is present. Form fields in the 'New post' and 'Add your comment' are not straight. Each field is indented further in then the field above it.

I fixed it by removing the 'margin:7px;' line from the '.user-form label'. After the line is removed, the form fields are aligned vertical.

[halfer]

Thanks for that, Russ! It might be a browser issue, as it sounds like it would be noticeable enough that I'd have spotted it on my system. What OS/browser are you running?

I'm on Firefox/Ubuntu here, but I should do more x-browser testing :smiley:.

Edit: I wonder if clear: left;, whilst maintaining the margin: 7px;, would help.

[RussEby]

I put clear: left; and margin: 7px; inside the .user-form label. The form elements became vertical. So that also works.

As to the OS - I'm on a Windows 8.1 machine; the latest stable release of Chrome, Firefire, IE and Opera (Yeah, Opera my favorite). Using a VM to host Ubuntu via Vagrant.

[halfer]

I checked out the latest branch of the code at the end of Section 7 (rebase3/20fdb82) and took a screenshot. This is what I have:

If you can do a screenshot of what you have, that'd be great.

[halfer]

Aha, crossed posts! Thanks for the browser list - and odd that FF/Win is problematic. I'll fire up a Win 8.1 VM tomorrow and see if I can replicate.

[RussEby]

Here is Firefox. It looks the same in all four browsers. I don't think it's a big deal (since this is supposed to be a demo of PHP not just CSS), just weird since the CSS being used is so simple. I could understand if there was some CSS3 features being used, but it's just margins and floats. Just shows how hard is it to make a site that works across hundreds of brands and versions.

[halfer]

How strange - thanks for the screenshot. Would you zip up your project folder and attach it here? I'll fire it up, there may be a bit of CSS that's accidentally been missed off.

[RussEby]

I don't see a way to upload a ZIP file. When I try dragging it into the comment area, it says it doesn't handle that type of file. Only PNG, GIF or JPG.

[halfer]

Ah, you are quite right - I've never added anything that isn't a screenshot.

There's plenty of free file lockers about though, try this one and paste the link. Or just upload the zip to whatever web host you have to hand. Thanks!

[RussEby]

Here it is.

https://onedrive.live.com/redir?resid=20F5F3136AB5E5DB!132790&authkey=!AERkT9S576MKQWw&ithint=file%2czip

[halfer]

Thanks, most helpful. I've found that Chromium/Linux does indeed exhibit this problem after the tutorial's changes are complete.

The issue is that the labels need to be floated in order to have a width, but in some browsers they are taller than the input they are adjacent to. The result of that is each label creates a low-hanging "ledge" upon which the next label sits (you can add border: 1px dotted red; temporarily to the .user-form label to see what I mean).

The solution therefore is to specify that each row is reset to the left again. This fixes it for me:

form.user-form div {
    clear: left;
}

Would you reset your stylesheet to the latest copy and then try adding the above rule? If that works on the browsers you mention, I'll remerge it in at the appropriate points in the code.

[RussEby]

While it does fix the comment form, it does not fix it on the login screen or the new blog post form. When I remove the margin: 7px; it fixes it in all forms. Or as you mentioned earlier, leave the margin in and add clear: left will also fix all three forms.

[halfer]

Sorry, I edited my suggested CSS shortly after posting it. I had originally written:

form.comment-form div {
    clear: left;
}

I changed it to the following a little while later - think you just saw the first version! Apologies.

form.user-form div {
    clear: left;
}

[RussEby]

Awesome, that works.

Since removing the margin from .user-form label also works, is there an advantage of using clear: left; instead? I'd think removing rules would be preferred?

Also, thank you very much for letting me help.

[halfer]

Since removing the margin from .user-form label also works, is there an advantage of using clear: left; instead?

I think so, yes. The label margin helps vertically centre itself with the adjacent input controls, and without it the label sits rather at the top of the control, and looks a bit out of line.

Without the clear, we're relying on the label having less height that the input controls. This ought to be the case (without the margin anyway) but since we don't have a lot of control over how browsers choose to render things, it's safer to be explicit. Thus, the clear rule says "for each row, please reset your left position".

Also, thank you very much for letting me help.

No problem, your help is much appreciated!

[halfer]

A fix for this is now available in the versions chooser (v4). If no issues are spotted with it, I'll make it the default version.

[halfer]

Looks good here, live! Let me know if you spot any issues. Thanks again for reporting :+1: