How to adapt theme for different browsers?

[fishordog]

I have a theme that i purchased and everything works fine in Chrome and Safari but i have few issues in Firefox and Opera. What's the best way to adapt it for those 2 browsers without breaking it for others?

 

This is how top horizontal mega menu looks in chrome/safari

 

and this is in Firefox/Opera

 

This is footer social links in Chrome/Safari

 

and this is in Firefox/Opera

 

also my logo is much bigger in Firefox than Chrome, i've tried changing size but to make it look fine in Firefox i have to make it tiny in Chrome.

I already emailed to dev of that theme but i doubt they will reply on weekend. My store is already live so if someone can give me an advice on how to fix it that would be great.

Edited January 18, 2014 by SeVi (see edit history)

[fishordog]

Just downloaded Opera and store looks fine in it. So i guess it looks bad only in FIrefox and IE

Edited January 18, 2014 by SeVi (see edit history)

[fishordog]

bump

[fishordog]

Here is code. Firefox for some reason doesn't recognize "background: url". It displays the link but not an icon

.footer-social {
    overflow: hidden;
    float: right;
    text-align: left;
}
.footer-social li {
    float: left;
    width: 33px;
    height: 33px;
    margin: 0 4px;
    padding: 0;
    -webkit-transition: 0.5s; -moz-transition: 0.5s; transition: 0.5s;
}
.footer-social .facebook {
    background: url(../../img/icon-f.png) 50% 50% no-repeat ;
}
.footer-social .twitter {
    background: url(../../img/icon-t.png) 50% 50% no-repeat;
}
.footer-social .pinit {
    background: url(../../img/icon-p.png) 50% 50% no-repeat;
}
.footer-social .email {
    background: url(../../img/icon-e.png) 50% 50% no-repeat;
}
.footer-social .gplus {
    background: url(../../img/icon-g.png) 50% 50% no-repeat;
}
.footer-social li:hover {
    -moz-opacity:.8; -webkit-opacity:.8; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";/*IE8*/ opacity:.8;
}
.footer-social a {
    float: left;
    width: 33px;
    height: 33px;
    text-indent: -9999px;
}

Edited January 19, 2014 by SeVi (see edit history)

[vekia]

without url it's almost impossible to help, due to the fact that it's non default theme and i suppose that no one here knows it

[fishordog]

without url it's almost impossible to help, due to the fact that it's non default theme and i suppose that no one here knows it

Can i pm you a link to take  quick look? i think it's just another FO module causing this somehow. Maybe you ca point me in the right direction

Edited January 20, 2014 by SeVi (see edit history)

[fishordog]

Replaced themes CSS and everything looks fine now. I have to start writing down what files i edit from now on