input:text varying placement across various browsers

When I have two textfields inside a div, I noticed that in Chrome, Opera, and Safari, the second textfield is positioned slightly more to the left than the first one. However, in Safari and IE, it appears to be positioned correctly.

If you want to try it out yourself, here is the codepen link: http://codepen.io/anon/pen/PwoKZr

I have provided a simple image demonstrating the issue:

Below is the relevant part of the code snippet:

<body style="

    font-size: 14px;">
    <div id="container" class="container_16">
        <div id="mainSection" class="grid_16">
            <div id="newUserBox" style="
    text-align: center;
">

                <input id="userEmail" type="text" style="
    /* text-align: center; */
    width: 300px;

    padding: 8px 10px;
    font-size: 18px;
" placeholder="E-Mail"><br>

    <input id="userPass" type="text" style="
    /* text-align: center; */
    width: 300px;
    /* margin-right: 5px; */
    margin-top: 10px;

    padding: 8px 10px;
    font-size: 18px;
" placeholder="Password">

    <br>
        <button style="
                width: 324px;
                margin-top: 10px;
                border-radius: 0px;      clear: both;      
                padding: 8px 10px;      border: none;      background-color: #3FC66F;      

                font-size: 20px;      color: #fff;
            ">Log In</button>

            </div>
        </div>
    </div>
    </body>

Answer №1

Avoid using br to adjust the position of the textboxes

Instead of using br, implement the following CSS styles:

#newUserBox{
    text-align: center;
    width: 300px; 
    margin: 0 auto;
}

Additionally, strive to avoid using inline styles whenever possible.

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

The header and footer are not extending across the entire width of the page

While testing on a responsive screen, I noticed that the header and footer both decrease in width instead of maintaining 100% width as intended. The issue only occurs when I reduce the width of the screen. body{ margin: 0; padding: 0; box-si ...

JavaScript: Implementing Array Declarations within Objects Using Loops

I'm currently in the process of developing a Pixel RPG game, and I'm facing a bit of confusion. Here's what I am trying to accomplish: var mainCharacter = { gender: "male", age: 18, action: "walking", direction: "left", ...

Guide to designing a Bootstrap footer that appears only at the bottom of the page and not at the top

I am facing a challenge with my website where some pages have a lot of elements causing scrolling, while others have only a few elements without scrolling. My goal is to have a footer that stays at the bottom of the page regardless of the page size. The f ...

Steps for setting up a Subnav within a Subnav Code. In this article,

Looking to enhance the bootstrap 4 navbar with multiple subnavs? Check out this code example from W3Schools <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> .... ...

The method for transforming all headers into permalinks with jquery/javascript

I am looking for a way to transform all headers on a page into clickable permalinks using jQuery or JavaScript. Here is the HTML code: $('h3').each(function() { var id = $(this).attr('id'); if (id) { //Check if the element has a ...

What is the method for retrieving the destination URL of a dropdown item using Puppeteer?

My challenge is to identify the destination URL for the "Edit" option in a dropdown menu using Puppeteer. Is there a specific method to obtain this URL through Puppeteer? <div _ngcontent-c34="" class="dropdown-menu" ngbdropdownmenu ...

How to make a line stand out in an HTML table using <td> tag: **Bold a

I have written the code below to create a table, and I only want the text XYZ to be bold and all other text to remain unbold within the < td > tag. However, when I implemented this code, the entire < td > content became bold. I would prefer not ...

Accessing content from a different HTML document

I'm currently working on a project using node.js where I need to take input from a text box in an HTML file and store it in an array. However, I'm struggling with how to achieve this. My ultimate aim is to create a chat application, and I believe ...

Styling with CSS: Aligning Text with ":"

Here is the text I am working with: I'm looking to align the colons so they are in a neat, straight line - for better readability. For example: topic: domain: origin: date: Is there a simple method to achieve this alignment? Thank you ...

Upload Request Failure Due to Drag and Drop Functionality in HTML5

Recently, I implemented a drag and drop upload form on a webpage. The 'normal' file input functioned perfectly as expected when prompting for a file to be selected. However, I encountered an issue where the POST request was missing the file infor ...

Load the flexslider once the fancybox container is opened

In my experience, I have found flexslider and fancybox to be very useful plugins. Individually, they work perfectly fine on a website that I am currently working on. However, when I tried placing a flexslider gallery inside a fancybox div, I encountered a ...

Is there a way to transfer data back and forth between Django and HTML within the same user request?

I am developing a model object picker that activates when a user sends a post request through HTML forms. More specifically, once the user clicks a specific submit button and sends a post request to the website, a variable is returned which is then utilize ...

Utilize Flexbox and Material UI to position Item at the bottom of the layout

I'm attempting to include Unassigned Text at the bottom of my Container, following the layout shown in this mockup:https://i.sstatic.net/863cl.png Here is the code I currently have. I'm facing difficulty in getting the border between the play bu ...

Jumping panel.css transition

I'm trying to create a simple bounce card animation, but I've run into an issue where the animation resets and doesn't flow smoothly. Could you take a look at this code snippet: div{ width: 110px; height: 50px; back ...

filtering out specific sections of HTML using xPath

I am currently attempting to scrape information from this page My approach involves using xPath to select specific elements. Here is a snippet of my code: $safeFlag = true ; //*[@id="tabset_productPage"]/dd[1]/div/div //HAVE TRIED THIS TOO //*[@id="tab ...

An easy guide to scrape CSS styles using Scrapy

When it comes to web scraping, I am skilled in using both scrapy and selenium webdrivers. However, I have noticed that selenium webdriver tends to be quite slow. Despite this, I find it convenient for extracting CSS properties of a webelement, such as: we ...

An instructional guide on seamlessly incorporating a TypeScript variable into an HTML element submission method

A problem arises in my Angular 8/Django 3 app as I attempt to incorporate a server-side variable called client_secret into the stripe.confirmCardPayment() method. The error message that keeps popping up is Property 'client_secret' does not exist ...

Achieving Vertical Alignment in a Bootstrap 4 Image Overlay Card

I am facing a challenge in trying to vertically center a FontAwesome icon within an Image Overlay Card. Despite attempting various methods like using d-flex and justify-content-center, none of them seem to be effective. What could I be overlooking? < ...

Offsets of elements once the animation is finished

Having issues with CSS animation. I am trying to get the small plus icon to rotate/spin in the center and stop once it is completed. Currently, the animation works fine but after it finishes, the icon shifts to the bottom and right. .link { position: ...

`Unable to locate the servicenow search bar in order to input text`

I am currently utilizing a testing instance on ServiceNow, attempting to locate the element for the search box. Despite trying various methods such as ID and XPath, I continuously encounter the NoElementException error. The HTML snippet can be viewed here: ...