My form design is flawless and renders perfectly on every browser except for Firefox

Having an issue with the form on my webpage . It seems to be displaying incorrectly in Firefox, while it looks fine everywhere else. Is there a way to apply specific CSS code for Firefox to resolve this? I've tried using -moz-margin-start for horizontal alignment, but what about vertical alignment in Firefox? Thanks, Brian

Here is the CSS code I have:

input, textarea, select {
    vertical-align: middle;
    color: #889291;
    margin-left: 20px;
    margin-top: 50px;
}
.button {
    display: inline-block;
    margin-left: 200px;
    margin-top: -55px;
    color: #fff;
    background-color: #889291;
    -moz-margin-start:67%; 
    -webkit-margin-start:70%;
}

HTML:

<div id="optin">
    <form action="http://fashiondevelopmentgroup.us2.list-manage1.com/subscribe/post?                             u=1eed93a2e1bb3dc00d80e42af&id=25ea8ae595"; method="post" id="mc-embedded-subscribe-form"    name="mc-embedded-subscribe-form" class="validate" target="_blank" style="background-   image:url('HERE IS WHERE YOU WILL PUT THE LINK TO YOUR IMAGE THAT YOU    UPLOADED');background-repeat: no-repeat; width:300px; height:151px;" novalidate>
        <input type="email" size="30" value="Email Address" name="EMAIL" class="required email" id="mce-EMAIL" onfocus="if(this.value==this.defaultValue)this.value='';" onblur="if(this.value=='')this.value=this.defaultValue;">
        <div id="mce-responses" class="clear">
            <div class="response" id="mce-error-response" style="display:none"></div>
            <div class="response" id="mce-success-response" style="display:none"></div>
        </div>
        <div class="clear">
            <input type="submit" value="SIGN UP" name="subscribe" id="mc-embedded-subscribe" class="button">
        </div>
    </form>
</div>

Answer №1

Check your my_style.css line 8 for a 50px margin-top applied to all input, textarea, and select elements. Customize the styling individually for each element as needed. Next, make sure to add position:relative to the parent div of the submit button. Then, include

position:absolute; top:0; right:0;
in your .button class to properly align the button in Firefox.
You can remove the margins in the .button class now. Use the values in top: and right: to position the button precisely where you want it on the page.

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 issue of MUI components overlapping arises during window resizing

I am currently working on a chat component that includes both the chat display and message input fields. function Chat() { const chatBoxStyles = { bgcolor: "red", height: "70vh", mt: "1rem" }; const messageIn ...

increasing the SQL integer value with padding

Is it possible to apply padding to certain INT return values retrieved from an SQL database using CSS within a div tag? I need specific numbers to have padding-left: 20px; while other specific numbers should have padding-right: 20px;. This presents a styl ...

Horizontal scrollbar displayed by CSS Bootstrap

Experimenting with Bootstrap on a small project and encountering an issue that I can't seem to figure out. Here is the snippet of my code: nav{ background-color: lightblue; } section{ background-color: lightgreen; } <link href="http://netd ...

Troubleshooting the challenges with jQuery's next().addClass() and prev().addClass() functions

I am attempting to create a slider feature. I have four different contents that I've positioned consecutively, but made them invisible initially. I defined a class called active-client with the attribute display: flex. Using jQuery's addClass() m ...

How can I format the initial letter in the primary link within the initial list using CSS?

It's no surprise that the CSS isn't cooperating, but I'm hoping you can grasp the concept. There are two lists and my aim is to style the first letter of the first a in the initial ul. In this instance, it would be the B in Beauty Salons. Is ...

Broaden the default className attribute of the component

Greetings! I'm currently using Bootstrap with React and I am trying to figure out how to extend my component by passing className props deeper. Within my atom component, I have two separate files. The first one contains the component declaration. B ...

The JQuery TextNTags plugin eliminates tag formatting once the trigger syntax has been modified

I have incorporated the JQuery TextNTags plugin into my web application. Here is the original code snippet: $.browser = { webkit: true }; $(function () { $('textarea.tagged_text').textntags({ triggers: {'!': { ...

Maintaining the relative position of an SVG while scaling within a div element

I am in the process of incorporating my custom SVG knob icons into an electron application using flexbox. The challenge lies in keeping them centered within the rectangle icon regardless of browser size, as shown here. Ideally, the icons should adjust thei ...

Utilizing multiple class names in Material UI with identical definitions

When working with traditional CSS, it is common to define shared properties between classes like this: .classA,.classB{ background-color: black; } In Material UI and using theming, the equivalent would be: styles = (theme)=>({ classA:{ ba ...

JavaScript exit page trigger

I have successfully implemented a way to exit the page with a confirmation using window.onbeforeunload. However, I am curious about how I can customize the appearance of the exit confirmation box by adding CSS and HTML elements, instead of just displayin ...

JavaScript - Unable to unselect a button without triggering a page refresh

I have a series of buttons in a row that I can select individually. However, I only want to be able to choose one button at a time. Every time I deselect the previously selected button, it causes the page to reload when all I really want is for all the but ...

When the height of the navigation bar is adjusted, the content on the page is shifted

I am facing a challenge that I need help with. I have a button that, when clicked, should expand the navigation bar to cover the entire screen without pushing down the content below it. However, despite setting the height of the navigation bar to 100vh, th ...

Having trouble with my Bootstrap 4 navbar button - what am I doing wrong?

After conducting research online, I found myself unable to resolve my issue due to my lack of proficiency in English. I apologize for any confusion caused and would like to revisit the topic. The problem lies with my navbar toggle that is not functioning ...

Arrange objects to have identical beginning points

Here is how my html code is structured: <div class="text-center"> (bootstrap class) <p>Username</p> <p>Name:</p> <p>Last name:</p> <p>Email:</p> </div> Link to jsfiddle I am attempting ...

Is there a way I can relocate all the blocks to the top?

[I am seeking to elevate the phone icon + numbers block, social media icons block, and callback block to the level of the "tesla logo". I have attempted adjustments with padding and margin, but have been unsuccessful. 1 ...

Vanilla JS method for resetting Bootstrap 5 client-side validation when focused

I'm currently exploring Bootstrap 5's client-side validation feature. However, I've encountered a usability issue with the is-invalid class. After clicking the submit button, this class persists until the correct input is entered. I would li ...

What are the differences in rendering between Almost Standards Mode and Standards mode?

After researching extensively, I have found that the main difference between almost standards mode and standards mode is related to image alignment in table cells. However, a particular question on Internet Explorer 8 and Checkbox CSS Problem, has pointed ...

Animating the height property in Angular 2 with precise timing during data binding

Seeking a way to have a component called information-board that animates away after a few seconds, I decided on making it slide up as an exit animation. My plan is to achieve this using CSS animations as discussed in this thread: Angular 2 Slide Up and Dow ...

problem with aligning horizontally

Visit my website to see the radio form field for bathrooms (1+, 2+, 3+, 4+) located at the top right corner. When viewed in Firefox/Chrome, the bedrooms are all horizontally aligned on a single line. However, when using IE6+, the bedrooms are split over ...

Customized function enabling dynamic menu display based on varying screen dimensions

Looking for assistance with JS and jQuery as I am relatively new to it. Any help would be greatly appreciated... I'm currently working on a responsive header where I want to implement onclick functions for mobile and tablet resolutions only. I' ...