buttons are not aligned

This has been broken for a long time for me:



"Contact" is partially hidden by the "username" field, "Login" is on the next line, and poor "up" has been forcibly separated from its partner.

Just thought I'd mention it because I must be the only one getting this glitch , probably due to the somewhat larger font size in use on my system.

Hi,

I just tried with two different browsers: Edge and Firefox. I can make Firefox do it at some zoom levels but not Microsoft Edge.

I suggest that you try changing the "zoom level" and see if that improves things. On a PC using Firefox, Ctrl + Scrollwheel works but there will also be a menu options somewhere.

Regards,

I'm at 100% zoom level, firefox 60 ESR browser, but thanks for the suggestion anyway.

Screen resolution makes a difference as well.

I can display the same screen on my laptop and my second screen and one will show the problem and one not.
The Windows text size setting affects it as well.

Clearly, the width setting in Contrebombarde is right on the edge of something.

regards,

I took a brief peek at the html. The problem is that the page is fixed width, but the header at the top does not have enough width to fit everything inside of it horizontally. When the font is a little larger than expected, all those header links at the left use up more width so there is no padding/buffer left over, and the right section with the login buttons ends up floating over the left section.

Making the entire page another 50 to 100 pixels wider would help, but reworking it to not use fixed width is probably the better option.

I think the issue is with the width setting of the "Sign up" button.

Code: Select all

<button class="custom_login" style="width:62px;" onclick="sign_up_page();">Sign up</button>


If you change that 62px to, say, 72px it seems to be OK.

That's got to be worth a day's consultancy plus expenses! Maybe I can afford this upgrade to Version 5 after all.

Regards,

I think the issue is with the width setting of the "Sign up" button.

Code: Select all

<button class="custom_login" style="width:62px;" onclick="sign_up_page();">Sign up</button>


If you change that 62px to, say, 72px it seems to be OK.

That's got to be worth a day's consultancy plus expenses! Maybe I can afford this upgrade to Version 5 after all.

Regards,

Nope, that's not enough! When you do that, that particular button no longer spans two lines, but it is still dropping down the page instead of being at the very top.

The entire page has a width that is too small to fully add the header/menu + the login buttons all on one line. It's a tight fit with most people's font size, and if you happen to use a slightly larger font size (or different font which uses more space) then the width of the header is not wide enough anymore, and the various elements are forced down the page because there is nowhere else to go.

I have to say, changing the width to 72px fixes it for me in both my browsers, both monitors and in all zoom levels with assorted Windows text sizes. However, I do understand that YMMV as we say on the Internet.

If by "page size" you mean the width of #container as 960px then I don't think that is the main issue because if you comment that out it just moves the problem to the far right of the window. (Maybe #container should really be a class because it is used more than once?)

That group of 4 items also has a fixed width of 310px (and a margin of 70px) so after the width of the sign up button has been fixed then that might need changing as well.

I note that the button backgrounds do not keep size with the text on them, either. Basically, there are lots of fixed widths that could do with some relaxing IMHO.


Now I must go and tell them about my organ playing in the web design forum.

Regards,