Style getting screwed up with hash in URL

Question

I have some pages that are loaded with a hash/anchor in the url. When we do this it screws up the padding/margin of the document. Without it, it works fine.

What's even stranger is if I use the browser tools to get to the css and disable the margin and padding and then reenable it, it looks fine. We are using a third party web site to serve our site which means we're kind of locked into a CMS type of service and our hands are tied to a certain extent as to how much we can customize our pages. So, therefore, we have multiple css files referenced and so forth.

If you look at the two urls below you'll see the issue in the one with the #company_settings appended to the end of the url. If you then use inspect element in chrome to look at the header and disable and reenable the custom.css:2 for margin and padding, you'll see it then fixes the problem. Any idea why this is happening and if there's something I can do in css to fix this? Thanks.

http://www.patriotsoftware.com/patriot-pay-help-center-payroll-settings

vs

http://www.patriotsoftware.com/patriot-pay-help-center-payroll-settings/#company_settings

Answer 1

Using a hash in the URL signals the browser to scroll to a specific location of the document.

And the browser is exactly doing so.

If you can edit skin.css (which sounds so by it's name), go into line 6:

#foxboro_header {width:100%;overflow:hidden;}

Change it, remove the overflow rule:

#foxboro_header {width:100%;}

This should make it work.

BTW if it's a block element, the width is automatically set to 100%. Setting it would be redundant then.

Next to that the code of the page is full of validation errors, deal with them otherwise you might run into more and more problems.