What could be causing this issue where the input button displays perfectly centered in Chrome, but not in IE and Firefox?

Have you noticed that this input button appears perfectly centered in Chrome, but in IE or Firefox it seems to be off to the right? You can see it as the second button on the right side of this page:

Site :

HTML :

<div style="float:center;text-align:center;">
<form action="http://linkhidden" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
<input type="email" value="" name="EMAIL" class="email" id="mce-EMAIL" placeholder="email address" required>
<br /><input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button" style="text-align:center;float:center;" >
</form>
</div>

This is the CSS:

input.button {
    background: -moz-linear-gradient(center top , #E8E8E8 0%, #D1D1D1 100%) repeat scroll 0 0 transparent;
    border: 1px solid #9D9D9D;
    border-radius: 15px 15px 15px 15px;
    box-shadow: 0 1px 0 #F5F5F5 inset;
    color: #656464;
    display: inline-block;
    padding: 6px 12px;
    text-shadow: 1px 1px 0 white;
}

Answer №1

Using float: center is not a valid CSS property. Instead, update your style to include the following:

float: none;
margin: 0 auto;

Make sure your input tag looks like this:

<input 
    type="submit" 
    value="Submit" 
    name="submitForm" 
    id="submit-button"
    class="submit-btn" 
    style="float:none; margin: 0 auto;" 
/>

Answer №2

In the CSS code for a button, there is a selector 'input.button' with float:right specified. This is the relevant snippet of code discovered using firebug:

input.button {
    background: -moz-linear-gradient(center top , #E8E8E8 0%, #D1D1D1 100%) repeat scroll 0 0 transparent;
    border: 1px solid #9D9D9D;
    border-radius: 15px 15px 15px 15px;
    box-shadow: 0 1px 0 #F5F5F5 inset;
    color: #656464;
    display: inline-block;
    float: right;
    padding: 6px 12px;
    text-shadow: 1px 1px 0 white;
}

If the 'float: right;' property is removed, the button will be centered in Firefox and possibly Chrome and Explorer as well. Alternatively, in HTML:

<div style="float:none; text-align:center;">

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Issues arise when using ng-repeat in conjunction with ng-click

I am facing some new challenges in my spa project with angularjs. This is the HTML snippet causing issues: <a ng-repeat="friend in chat.friendlist" ng-click="loadChat('{{friend.friend_username}}')" data-toggle="modal" data-target="#chat" d ...

Lines are showing up on the screen, but their origin within the html or css remains a

While creating my website, I encountered a minor issue. Some elements like div or text element are showing lines when hovered over with the mouse, but they disappear once clicked elsewhere. Surprisingly, there is no border defined for them. I am stuck at ...

Tips for retrieving the count from HTML using JavaScript:

I need to determine the count of list items in an unordered list within dir-pagination-controls. How can I achieve this using JavaScript? <dir-pagination-controls min-size="1" direction-links="true" boundary-links="true" class="pull-right ng-isolate- ...

Stopping the spread of popup alerts: A comprehensive guide

I'm having trouble explaining this in English;-) Whenever I select an option, an alert pops up for each choice and I don't know how to stop it. Step 1: Choose the "aaaa" option, for example 1111 alert ... Step 2: Choose the "bbbb" option, for ...

Is the appearance of the Select Box altered when using Opera browser?

Here is the outcome I am hoping for. It displays correctly in Chrome, IE and FF: However, this is what I see when using Opera: Check out the demo site: Can anyone offer assistance? ...

What is the best way to extract the text from a <div> tag and show it in a different div when clicked on using ng click in AngularJS?

When the button is clicked, the text in ng-model=name should be displayed in the <h2> tag. <div ng-model="name">This is a text</div> <button ng-click="getname()">Click</button> <h2>{{name}}</h2> ...

Are there any methods to create a circular z-index?

Is there a way in CSS to arrange #element-one above #element-two, then #element-two above #element-three, and finally #element-three above #element-one? Are there alternative methods to achieve this layout? ...

What are some best practices for utilizing `element.offsetParent` in HTML SVG elements?

I'm currently updating some JavaScript code that relies on the .offsetParent property. The recent changes in the application involve the use of SVG elements, which are causing issues with the JavaScript as mySvgElement.offsetParent always returns unde ...

Exploring the possibilities of NodeJs by analyzing an HTML form

I'm facing an issue while evaluating an HTML Form using NodeJs and Express. Here's my JavaScript Code My aim is to manage HTML Forms in NodeJs using Express. const express = require('express'); const http = require('http'); ...

The Spring Boot application is having trouble retrieving static files

I started a fresh springboot project and organized the directory structure as follows: view image description here The yml configuration is outlined below: server: port: 8783 servlet: context-path: /spring-demo spring: scan : com.example appli ...

jQuery UI Datepicker Display Issue

I'm encountering an issue with a jQuery UI Datepicker object that is supposed to appear when I click inside a textbox. Below is the HTML code: <tr> <td class="label-td"><label for="dateOpen_add">Date Opened</label></td& ...

Display an HTML5 canvas element on a live webpage

Recently I was given a task to create an HTML page that allows users to interact and generate templates on a web application. Users can use the web browser to design a template and save it. Seems simple, right? The challenge came when I needed to let user ...

Vanilla JavaScript - Conceal all remaining div elements

I have a situation where multiple divs are only visible after clicking a link. How can I ensure that when one div is clicked, all others are closed so that only the clicked one remains visible? Currently, I am using the following JavaScript: functio ...

Interact with various contenteditable sections by navigating with the arrow keys

I have a challenge with multiple <p contenteditable="true"></p> elements on my page. I am seeking a solution to enable the use of arrow keys to navigate seamlessly across these separate elements as if they were one cohesive editable element. F ...

Tips for customizing the selection tip of a custom cursor using CSS

I have integrated a color picker jquery plugin on my website to allow users to pick colors from an image. I made a modification in the CSS to change the cursor to an eyedropper icon. However, currently when clicking on the image, the color pointed by the u ...

After trying out the demonstration on the website, I am unable to get my submit button to work

Having trouble with my Formsubmit feature. Despite following the example on the website, my submit button doesn't send anything and the verification isn't reaching my email. Currently working with Angular. <form action="https://formsubmi ...

Looking to duplicate the elements with the click of a button?

I am in need of assistance with my registration form. My goal is to move the elements contained within the <fieldset> tags to the end of a row when the user clicks the + button. The result you see initially has been recreated. Thank you for your s ...

Issues with script execution on Ajax tab

I'm currently using JQuery UI tabs to load content through Ajax. I have a situation where two tabs are supposed to load HTML content and execute a script to hide or show certain elements in the loaded content. However, I encountered an issue where the ...

Is there a way to alter the text color upon touching it?

I'm attempting to modify the background color of a button and also change the text color inside the button. While I was successful in changing the button's color, the text color remained the same. Even after adding a hover effect to the text, the ...

Is there a way to prevent my smartchatbox from covering my fixed top navbar?

Click here for more information I am seeking assistance. Your help is greatly appreciated. The question's heading reveals all you need to know. All you have to do is resize your browser, scroll down, and the answer will become apparent. ...