Search submit button only lines up in Mozilla Firefox?

  • I am the author of https://www.pantophilepanic.com and I using an old version of the Mantra WordPress theme. My knowledge of CSS is fairly minimal.

    In the top of my sidebar I am using the default Search widget for WordPress, but for some reason the Search submit or “OK” button is not lining up with the search box in every browser. It looks perfectly fine in Mozilla Firefox, but in Safari and Google Chrome it seems to be offset vertically by a few pixels.

    Any ideas on how I can fix this?

Viewing 5 replies - 1 through 5 (of 5 total)
  • Thread Starter pantophilepanic

    (@pantophilepanic)

    Additionally, I am having a separate issue where the search submit button (which is supposed to be rectangular) is turning into a circle in IOS browsers such as Safari on the iPhone or iPad. I have no idea what is causing this, and I would really appreciate some help.

    Why are you using an old version of the theme?

    Thread Starter pantophilepanic

    (@pantophilepanic)

    I am using the old version of the theme because I was not aware of how to make a child theme at the time when I started my blog and I would lose all of my changes if I updated it now.

    Thread Starter pantophilepanic

    (@pantophilepanic)

    All I need to know is why the CSS is being interpreted differently in various browsers and how to make it uniform.

    Try adding this to your CSS. Since you’re not using a child theme, I don’t know if you want to continue modifying the theme’s style.css file, but I would recommend using a CSS plugin like Custom CSS Manager when making CSS changes. If you’re just making CSS changes, you can do it through a plugin instead of creating a child theme, and then your CSS changes won’t be lost when the theme gets upgraded.

    .widget_search #s {
   margin: 0;
}

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Search submit button only lines up in Mozilla Firefox?’ is closed to new replies.