Mozilla Firefox does not support the use of an input text box

I have developed a stopwatch using JavaScript and customized it with a table using HTML and CSS.

Upon testing in Chrome, the UI looked great. However, when I tested it in Mozilla Firefox, I noticed that the input text box appeared smaller than expected.

 <script type="text/javascript">
var c = 0;
var t;
var timer_is_on = 0;

function timedCount()
{
document.getElementById('txt').value = c;
c = c + 1;
t = setTimeout("timedCount()", 1000);
}

function doTimer()
{
if (!timer_is_on)
{
timer_is_on = 1;
timedCount();
}
}
function resetCount() {
     document.getElementById('txt').value = 0;
    c = 0;
}
function stopCount()
{
clearTimeout(t);
timer_is_on = 0;
}
</script>
</head>

<body>
<form>
<center><table bgcolor="#000000">
<tr><td><center><h3 class="css">STOP WATCH</h3></center></td></tr>
<tr><td>
<input type="text" id="txt" size="50">
</td></tr><tr><td>
<input type="button" value="START COUNT" onClick="doTimer()" id="start" >

<input type="button" value="STOP COUNT" onClick="stopCount()" id="stop">
<input type="button" value="RESET COUNT" onClick="resetCount()" id="reset"> </td></tr></table></center>
</form>
</body>
</html>
<style>
#start
{
border-bottom-color: #006600;
background-color: #00FF33;
}
#stop
{
border-bottom-color: #006600;
background-color: #FF0000;
}
#reset
{
border-bottom-color: #006600;
background-color: #FFFF00;
}
.css
{
color: #FFFFFF;
}
</style>

Answer №1

To make sure your code is valid, use this tool: http://validator.w3.org.

For consistent appearance across all browsers, include the following snippet at the beginning of your .css file to reset the css styling. Your code seems to be in good shape otherwise.

/* This resets CSS styles for consistency - adapted from Eric Meyer's Reset CSS v2.0 */
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{border:0;font-size:100%;font:inherit;vertical-align:baseline;margin:0;padding:0}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:none}table{border-collapse:collapse;border-spacing:0}

Answer №2

In case you notice that the input text is not taking up the full width in Firefox, you can try incorporating the following CSS rule:

input[type='text'] {
    width: 100%;
}

It's possible that there was a mistake during copying and pasting, so remember to place the style within the head tag. Additionally, make sure that the opening html tag is included as well.

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

"Bootstrap4 - Troubleshooting the Issue of Multiple Carousels Not Function

I attempted to incorporate 2 Bootstrap 4 carousels onto a single page, but encountered issues with the functionality. I utilized this code on my page, however, the last element in the carousel does not cycle correctly. There is a delay of 3 transactions be ...

Utilizing the :before pseudo-element in input fields

I'm looking to insert some additional content before the first input field in the provided HTML markup without making any changes to the existing structure. I want to achieve this using the :before pseudo-element. Although I've attempted to do s ...

Adjust the height of a div using jQuery animate based on the amount of text within

I have created a basic animation feature where users can click on an expanding box. I am looking for a solution that does not involve using a plugin. Currently, the code looks like this: $('#one').css("height", "22"); $('#t1').cli ...

The EJS is causing a problem with linking the style sheet

Currently, I am in the process of familiarizing myself with ejs, express, and node js. Facing an issue while trying to link my style sheet to my header, below is the code snippet and here is a https://i.stack.imgur.com/0BEIn.png. Utilizing include for bo ...

Using R Markdown and Hugo to Style Blog Titles

I am currently utilizing Hugo and Blogdown to craft a blog following the guidelines outlined here. The title of my blog is specified at the beginning of each post, resembling the example below: --- title: One Two Three author: First Last date: '2019- ...

Position the image, text, and header within a box in uniform alignment

Currently, I am working on a design that includes an image, a header, and some text inside a box. However, I am facing an issue with aligning the header so that it appears above the rest of the text. The layout is not turning out as expected. https://i.ss ...

Having trouble using CSS to darken a background image in React?

My website (React.js) is giving me trouble with darkening the background image. I have attempted to darken the background image without success, even after trying the solution found here. I am utilizing the latest version of the Google Chrome browser for ...

In MUI React, the opacity of the placeholder is customizable and can be easily adjusted. This allows for the placeholder to be hidden

Currently, I am facing an issue with a filled variant TextField from Mui React. I have tried to modify it using theme components, but the placeholder text becomes hidden when the field is not focused. See here for Before Focus And here for On Focus I hav ...

Spacing Issue with Material UI Gap Placement

Currently, I am implementing Material UI 5 within a React project using the following code snippet: <Stack> <Stack flexDirection="row" justifyContent="center" padding={4} spacing={{ xs: 4 }} ...

Developing a trivia game using HTML and JavaScript

I'm in need of some serious assistance with creating a quiz using HTML. My goal is to have a web page where users can visit, take a quiz, and have their responses stored. Unfortunately, I don't have the knowledge or skills required to do this on ...

Using JavaFX to showcase FontAwesome icons

I've been working on a project to create a custom icon class that can load FontAwesome icons, but I'm facing issues with reading the fontawesome-webfont.ttf file. Here is the code for creating an icon: import javafx.scene.control.Label; import ...

Why isn't the externally loaded JS file executing properly?

My javascript code functions properly when it's embedded within the HTML file. However, I encounter issues when I try to import it externally. The Google Developer Tools indicate that the file has been loaded successfully, but there seems to be no vis ...

Obtain the title of the text generated by clicking the button using a script function

I am working on a piece of code that generates a text box within a button's onclick function. My goal is to retrieve the name value of each text box using PHP. <script language="javascript"> var i = 1; function changeIt() ...

Html content overlapping div rather than being stacked vertically

My goal is to arrange a group of divs inside another div in a vertical stack. However, I am facing an issue where the text from the last div is overlapping with the second div instead of following a proper vertical alignment where the text in the third div ...

Tips for showcasing cards in a horizontal inline layout

Hello everyone! I'm currently working on creating dynamic cards, but I'm having trouble displaying them inline. I'd like to arrange the cards horizontally with a scroll bar. I want to make them display in horizontal line <div className=& ...

Adjusting the height of content in Angular Material 2 md-tab

I've recently started working with angular material and I'm facing an issue while trying to implement md-tab into my application. The problem is that I can't seem to style my tab content to take up the remaining height of the screen. Could s ...

The color of the element remains unchanged even when hovering the cursor over it

Below is an example of HTML code: <h1 class="one">Hello</h1> Here is the corresponding CSS style sheet applied to it: h1:hover { color: red; } h1.one { color: blue; } When this code runs, the h1 element should turn blue. Ho ...

Top-notch java tool for caching and minifying dojo, jquery JavaScript, and CSS files

In our project, we have downloaded the Dojo and jQuery libraries from Google CDNs. I am currently seeking a Java tool that can both cache and minify these libraries. The caching process should take place within the ROOT project of Tomcat. While I am awar ...

Clicking on links will open them in a separate tab, ensuring that only the new tab

Is there a way to open a new tab or popup window, and have it update the existing tab or window whenever the original source link is clicked again? The current behavior of continuously opening new tabs isn't what I was hoping for. ...

What is the best method for sending the styled and checked option via email?

Just finished customizing the checkboxes on my contact form at cleaners.se/home. Here's my question: If I select "telefon," how can I ensure that this option is sent to my email? In Contact Form 7, I used to simply type a shortcode. Is there a simila ...