I've been trying to solve this issue for about a week though no luck. I cannot understand what is causing the menu to change lengths at a) different resolutions and b) different zoom levels.
http://www.aplustutoring.com.au/JoomlaInstall/index.php/about
You can clearly see the menu does not equal the length of the body text which it should (if not try one level different zoom). I've made a lot of changes the menu and I'm beginning to think that this has caused the issue.
Any ideas on what css properties I should change? Thanks.
This is being causes by using percentages for margins. Why these are being used I do not know. To fix this isue, open the template.css file within your template folder.
On line 8, change this:
margin: -0.2% 0 0;
to this
margin: 0;
And on line 114, change this
margin-top: -1.9%;
to this:
margin-top: 0;
On line 114 you can change 0 to a value that suits your needs, however please stick to using pixels as a unit of measure.
Hope this helps
I would remove padding-left and padding-right on "rt-container", also remove all padding on "rt-containerInner" and remove margin-left. Basically there are a lot of containers and some have different values for padding left and right. I would simplify everything by removing any left-right padding and margin and adding only to individual items that need it if any.
Also the menu container is not fully filled up with the menu items hence the discrepancy. I can help tidy this up, if you have the full .css file
Hope this helps.