My current situation is incredibly puzzling, as I am at a loss for what is happening. I developed a Firefox add-on using jQuery and CSS to revamp a website. When attempting to transfer the add-on to Chrome (which was relatively straightforward due to the similarity of features in each SDK), everything functioned except for one crucial design component:
The issue lies with a menu containing position: fixed; positioned on the left side of the page, with margin-left: 150px; set on the main container element. Strangely, the margin seems to disappear completely when viewed in Chrome, while it functions perfectly in Firefox.
To troubleshoot, I replicated all HTML, CSS, and JavaScript on a jsFiddle where the margin worked flawlessly. Given that everything was identical between the two versions, it remains a mystery why it behaves differently on the website compared to jsFiddle.
Although utilizing left: 150px does solve the problem, it causes the page to extend by 150px to the right, resulting in unwanted horizontal scrollbars.
For reference, here are some useful links:
Extension File (CRX): https://docs.google.com/open?id=0B3k3BjZD2YfiTWNzTlhsa0t5STg
Demo Website: (Username: demo, Password: demo)
jsFiddle (Some images may not load, but the code is identical): http://jsfiddle.net/CjSXA/