Sudden background-container movement

Dear coders,

I was working on my wikiviewer page (see link). For some reason, when I prompt the search, it moves the total page a few pixels to the left and I can’t figure out why. Some help here would be awesome! :smiley:

link

Thanks in advance.

Happy Coding!

Bas

First of all add some padding between search input and random article link. I can’t even click on search input (in Firefox), since random article link covers it.

I changed it, should be a margin between the searchbox and the random article.

Change .container-results and .container-search position to ‘fixed’.

Why is absolute positioning causing this 1px jump I really don’t know, but if you are not planning to use a relative parent container for the absolute positioned element, just use position: fixed.

Also I noticed some of non standard html tags like <random></random>, or <result></result>. It’s usually best to avoid them, since they might cause some problems with older browsers. Use <div> or <section> instead.

1 Like

Thank you GreatDanton!

Something as simple as a position decleration can really screw up the layout. It should work now! Your help is really appreciated. Now I can start working on the Jquery part of this project! Thanks again :smile: :smile:

Happy coding,
Bas

By the way, in case you’re wondering why it’s shifting. Check the scroll-bar on the right. :stuck_out_tongue:
Sometimes I am such an idiot. :smiley:

Hahahaha yeah it makes sense now :D.

Happy coding!