So I ran into another issue with current website I am trying to style. From what I have read there’s no way I could make it look the same to all browsers just because there’s too many of them. But it seems on 3 of them I have check it all looks different,so how to I apply different css rules to different browsers and so one would not interact with each other ?
http://screencast.com/t/P1Jbk9kB iron browser
So the reason that image moves around is because it’s positioned to the bottom of the window - depending on the window size it will move around.
Remove the bottom value and make it top: 445px; instead.
The big button is in exactly the same place in those screenshots of yours. Its the window that you are viewing it through that is different. You just have the browser’s window open at a different size in each browser.
The problem is that you have absolutely positioned that button from the viewport so its position will never match the layout unless you just happen to have the window open at the right point. What you need to do is to tie the absolute element to #page by creating a local stacking context by adding position:relative to #page and then the absolute element will take its position from the page and not the viewport.
Thanks,it solved some of it,but still on smaller screen laptops i get button floating somewhere in the middle of data imput fields maybe there’s a way to position that image to certain area like a locker. Or I see some code in css style sheet that is for IE or FireFox. Sorry if the question is dumb
That’s what the position:relative on the parent does. It creates a local stacking context fro the absolute element and the absolute element is then tied to that starting point
The problem on smaller screens (which I didn’t notice earlier) is that you have a fluid width page and therefore as the page gets smaller the absolute element still stays in exactly the place it was put but will then overlap anything in the way because absolute elements are removed from the flow and in a fluid environment you don;t want absolute elements.
Instead you should float the button and let it take part in the flow but you will need to adjust the html.
First you will need to add a class to the form inputs and float the block.