Making it compatible with at least few browsers?

HTML & CSS
1

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
http://screencast.com/t/dx2xOzWq2 firefox
http://screencast.com/t/ZmZlgbQE1Nj chrome

Thanks for you help and time.

2

You would need to post the code or a link to your site if you want us to take a look.

It should be possible to position that arrow consistently across browsers, though I’ve never heard of iron browser before…
You only need to care about Chrome, Firefox, Safari, Opera and IE.

And then there’s this…
http://dowebsitesneedtolookexactlythesameineverybrowser.com/

3

LOL, I honestly thought I did posted url :slight_smile:

http://www.supersolarpanels.co.uk/

and that for a link,gives a lot of knowledge :smiley:

4

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.

5

Thank you markbrown4 but still not working out and this is what I see in chrome:

http://screencast.com/t/NirDAi9Gv0Sw

firefox:

http://screencast.com/t/G1xhXUBx6Y
6

Hi,

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.

e.g.



#page{position:relative}


#submit-image {
 left: 700px;
 position: absolute;
 top: 445px;
 z-index: 9;
}
7

Thanks,it solved some of it,but still on smaller screen laptops i get button floating somewhere in the middle of data imput fields :slight_smile: 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

8

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.

e.g.


<p[B] class="forminputs"[/B]><span class="wpcf7-form-control-wrap your-name"><input  etc......

Then you will need css like this:



#submit-image {
position:static;
clear:none;
float:left;
margin-top:-25px;
}
.forminputs{float:left;margin-right:-30px}

Or alternatively move the button before that p element in the html and just float it right (remembering to remove the absolute positioning).

9

Huge thank you Paul for your time. Gonna try to make it happen.