Problem moving whole html-page down! margin-top to html element doesn't work on all pages

i have a strange css, JS problem. My chrome-extension sh开发者_Go百科ould move the hole website some pixels down, so i can display a toolbar on top of it.

This works for most pages, but doesn't work for a few. And i can't find out what's the problem. The code for moving the page down is really simple. Just this line, which adds a margin-top to the html-element:

document.getElementsByTagName('html')[0].style.marginTop = '36px !important';

It's easiest explained and seen if you install the addon and browse to www(dot)interspar(dot)at (here it works) and to www(dot)weinwelt(dot)at (here it doesn't work). The addon is found here https://chrome.google.com/webstore/detail/pilobbegphefikcgjpajnneiiahhejam

Please don't consider this as spam, as this addon is only useful for german speaking people and i think there aren't many around here ;)

It doesn't work on that site because its whole content is positioned absolutely (look at <div class="parent">). You need to loop through the whole DOM looking for absolutely positioned elements that have top property and increase its value accordingly as well.

That's only a tip of the iceberg though, as some sites would be adding absolutely positioned elements to the page dynamically, so you would need to listen to dom changes (DOMSubtreeModified event) as well and do all repositioning again.

Try it on the BODY instead;

document.getElementsByTagName('body')[0].style.marginTop = '36px !important';

HTML tag can't have a margin on it.

According to following link "!important" is only supported by safari.

http://hungred.com/how-to/jquery-javascript-css-important/