Is the form background color displaying correctly only in Internet Explorer 8?

Typically, I struggle with IE8, but in this situation it's the only browser that displays the form background color correctly. It's interesting how the CSS only works as intended in IE8, while Firefox and Safari don't show any background color on the forms.

#defaultform {

width: 500px;
padding: 20px;
background: #f0f0f0;
overflow:auto;

/* Border style */
border: 1px solid #cccccc;
-moz-border-radius: 7px;
-webkit-border-radius: 7px;
border-radius: 7px;

/* Border Shadow */
-moz-box-shadow: 2px 2px 2px #cccccc;
-webkit-box-shadow: 2px 2px 2px #cccccc;
box-shadow: 2px 2px 2px #cccccc;

}
htmlcss

Answer №1

Is this the right doctype for your project? It seems to work well on Firefox and Safari with this setup:

<!DOCTYPE html>
<html>
<head>
<style>
#defaultform {

width: 500px;
padding: 20px;
background: #f0f0f0;
overflow:auto;

/* Border style */
border: 1px solid #cccccc;
-moz-border-radius: 7px;
-webkit-border-radius: 7px;
border-radius: 7px;

/* Border Shadow */
-moz-box-shadow: 2px 2px 2px #cccccc;
-webkit-box-shadow: 2px 2px 2px #cccccc;
box-shadow: 2px 2px 2px #cccccc; 

}
</style>
</head>
<body>

<form id="defaultform" name="myform">
    <label>Input 1</label>
    <input type="text" name="input1" value="" />
</form>
</body>
</html>

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

Guide to implementing CSS3 transitions with prefixes using JavaScript

Is there a way to apply CSS styles using JavaScript when I don't have access to the CSS file? #fade div { -webkit-transition: opacity 1s; -moz-transition: opacity 1s; -o-transition: opacity 1s; -ms-transition: opacity 1s; transition: ...

javascriptcss

Difficulty encountered when trying to obtain div height automatically

For a while now, I've been attempting to dynamically determine the height of an image as the browser window is adjusted. Despite using console.log() to verify my results, I keep getting a value of 0. What could be causing this discrepancy? $(functio ...

htmlheightdynamically-generated

Using Thymeleaf to display <TR> elements according to specific conditions

Is there a cleaner way to show content only if one object is not null? No annotations found in this block of code. Here is the template: <div th:if="${currentSkills != null}"> <tr ><!-- Data File --> <td class="col_id"> ...

htmlthymeleaf

Submitting a form using jQuery and processing the response

Can a form be submitted using jQuery without utilizing json, ajax, or other methods for handling the result? For example: <form id="loginform"> //some input fields and a submit button. </form> And then with jQuery: $("#loginform").sub ...

javascriptphpjqueryhtmlforms

Is it feasible to adjust the width of a character?

Is there a way to determine the width of each character in a text area, either through setting or retrieval? <Field style={{ width: "60ch", height ...

cssreactjs

Struggling to retrieve the image URL from a TypeScript file

I'm currently developing a basic app in Ionic that will include a feature to display a list of registered users along with their profile pictures. These profile images are stored in Firebase storage. Although I have successfully retrieved the URLs fo ...

htmlangulartypescriptfirebaseionic-framework

Ben Kamens has developed a new feature in jQuery Menu Aim where the sub menu will not reappear once it

While exploring Ben Kemens’ jquery-menu-aim, I came across a demonstration on codepen. The code on codepen allows smooth transition from the main menu to the sub menu, but if you move away completely, the submenu remains visible and doesn't disappe ...

javascriptjqueryhtmlmenu

Design layout in Angular Material that wraps the content within it

Is there a way to achieve this specific layout with the "plus" icon positioned below the card layout? https://i.sstatic.net/W5ZRM.png I have attempted the code below: <section layout="column" style="background-color: black;"> <md-c ...

angularjscssangular-material

Placing a collection of <a> anchor tags inside a div and making them float

I've been experimenting with building a website from scratch, opting for a simple and blocky design. I placed the navigation at the top of the page in an unordered list format containing <a> elements within list tags, all enclosed within a <n ...

htmlcss

What is the best way to relocate the box within this HTML/CSS document?

Looking at this specific HTML webpage <html> <head> <title>CSS Structure</title> <link href="layout.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="header">Header 900x100 px</div> ...

csshtml

Troubleshooting issue: Failure in proper functionality of Jquery's slideDown

My form is divided into 3 sections, with the latter two initially hidden using CSS. When users click the next button in the first section, the second section is supposed to slide down into view. However, I'm experiencing an issue where the animation s ...

javascriptjqueryhtmlcss

Is there a way to asynchronously load image src URLs in Vue.js?

Why is the image URL printing in console but not rendering to src attribute? Is there a way to achieve this using async and await in Vue.js? <div v-for="(data, key) in imgURL" :key="key"> <img :src= "fetchImage(data)" /> </div> The i ...

javascripthtmlwebpackvue.jsasync-await

Improving the functionality of the JavaScript key press function

I have a small javascript snippet on my website that allows me to navigate the site using the arrow keys on my keyboard. document.onkeydown = function(evt) { evt = evt || window.event; switch (evt.keyCode) { case 37: ...

javascriptphpjqueryhtmlhttp-redirect

Interactive Text Transformation on Mouse Over

My goal is to create a sleek and clean Index page featuring a simple white background with text centered in the middle. The initial text will be: USEStudio Upon hovering the mouse, the text will transform into: ...

jqueryhtmlcss

Overflow of dropdown menus in HTML CSS

Hello, I am new to both html and stack overflow. Please forgive me if this question has already been asked, as I couldn't find anything (but maybe I didn't search enough?). I have tried using overflow and clear properties, but I am struggling to ...

htmlcssoverflow

Effortlessly glide to a specific div ID upon page load using the URL address

One way to implement smooth scrolling to an anchor on page load is by using jQuery. Here's an example code snippet: $(function(){ $('html, body').animate({ scrollTop: $( $('#anchor1').attr('href') ).offset(). ...

javascriptjquerycss

CSS overflow property determines whether to display or hide the parts of an element

Is it possible to create HTML text that will automatically hide itself entirely if it exceeds the container size, instead of clipping with the overflow: hidden property? ...

htmlcss

How to Build a Custom Toolbar with Left and Right Aligned Elements using React.js and Material UI

Struggling with updating the toolbar on my website. Wanting the site name and logo on the left side, while login/sign-up buttons fixed to the right. Logo and title are in place, but can't get buttons to stay on right margin. Here's the code: func ...

javascripthtmlreactjsmaterial-ui

Unable to alter or eliminate the grey background using material-ui

Struggling with a React application that incorporates material-ui. Despite my efforts, I can't seem to get rid of an unwanted grey background in one section of the app. Attempted solutions: body { background-color: #ffffff !important; } * { b ...

cssreactjsmaterial-ui

ShadowBox replacement for IE8

After much experimentation, I am on the verge of achieving an inset box shadow for IE8 without relying on JavaScript. Take a look at the screenshot below: https://i.sstatic.net/2kM3R.png Since Internet Explorer versions 5.5 through 8 only support Micros ...

htmlcssinternet-explorer-8box-shadow