[Resolved] Image positioning issue between browsers

[Piotr]

Hi,

I am trying to position an icon within search input. I managed to do in in Firefox, but IE shows it differently. I know it may not be directly connected to the theme, but maybe it results from the theme css however?

https://1drv.ms/u/s!Ajkoo-gGVQk2htkulJRAJSsT_92zqw

GeneratePress 2.0.2

GP Premium 1.5.6

[Piotr]

hmm, I added screen image, but it’s not showing upon ticket submission. Let me know if you can’t access it.

[Tom]

Hi there,

Try this for the button:

.your-button-class {
    background-color: transparent;
    background-image: url(URL TO ICON);
    background-repeat: no-repeat;
    background-position: center;
    width: 50px;
    height: 50px;
    padding: 0;
    display: inline-block;
    vertical-align: middle;
    position: relative;
    left: -50px;
}

And this for the input:

.your-input-class {
    padding-right: 50px;
    display: inline-block;
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Piotr]

Works, cheers 🙂

[Tom]

Glad I could help 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Author]

Posts