HTML Alignment of Body and Div Elements

Setting the body and div to have the same height and width in my CSS:

 body {
background-repeat: no-repeat;
background-color: maroon;
width: 1280px;
height: 670px;
margin: 0;

}

div {
background-color: yellow;
width: 1280px;
height: 670px;

}

And here is my HTML:

<body>
<div   id='slider4' class='swipe'>
<div>
<div style='display:block' >1</div>
<div style='display:none'><div>2</div></div>
</div>

</body>

However, when I view it in Firefox, the display doesn't match up. The size of the HTML, body, and divs all seem to be the same, and the red color extends beyond the yellow.

Answer №1

The reason the maroon color is displayed is due to legacy compatibility considerations. By default, the background color of the HTML element is inherited from the body element, and the viewport's background color is inherited from the HTML element.

According to the CSS 2.1 specification:

 

For documents where the root element is an HTML "HTML" element or an   XHTML "html" element that has computed values of 'transparent' for   'background-color' and 'none' for 'background-image', user agents are required instead use the computed value of the background properties from that element's first HTML "BODY" element or XHTML "body" element child when painting backgrounds on the canvas, and should not paint a background for that child element.

Additionally,

 

The background of the root element becomes the background of the canvas and covers the entire canvas

To prevent the maroon area from extending beyond the height of the body element, you can adjust the background color of the html element to something like "white."

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

Emphasize a passage by clicking on a different section of text

Seeking Assistance I am currently customizing this template which incorporates the MixItUp plugin. My query pertains to highlighting the "filter tab" upon clicking on the corresponding text when hovering over each image, a task I find challenging as a new ...

Determine the week number based on a specified starting day for the week

If I have a custom week start day other than Monday, how should the getWeekNumber() prototype for the Date class be modified? Here is the existing code for calculating the ISO Week Number: Date.prototype.getWeekNumber = function() { // Create a dupli ...

Oops! There was an error: Unable to find a solution for all the parameters needed by CountdownComponent: (?)

I'm currently working on creating a simple countdown component for my app but I keep encountering an error when I try to run it using ng serve. I would really appreciate some assistance as I am stuck. app.module.ts import { BrowserModule } from &apo ...

In JavaScript, the gallery feature with Lightbox effect creates a unique touch as only half of the screen fades to black in

Hello everyone, I'm a complete beginner when it comes to programming so please be gentle with me on my first question :) I'm trying to put together a simple website with a lightbox gallery, and you can check out what I have so far here. The prob ...

Ways to create dynamic functionality with JavaScript

I need to iterate through the document.getElementById("b") checked in a loop. Is this achievable? How can I implement it? <img class="img-responsive pic" id="picture" src="images/step1.png"> <?php //get rows query ...

Scrolling seamlessly on websites with a single page

I am developing a single-page website that uses different section IDs instead of multiple pages. It's functioning properly, but I want to implement smooth scrolling to the sections rather than just statically jumping to them on the page. Jsfiddle: ht ...

Styling with CSS Attributes

While conducting research on CSS specifications through W3C, I stumbled upon this document. Although the Wikipedia page claims it is part of level 3. However, I have a couple of questions: The document does not explicitly state that it belongs to level 3 ...

What are some strategies to reduce the frequency of API calls even when a webpage is reloaded?

Imagine I'm utilizing a complimentary API service that has a restriction of c calls per m minutes. My website consists of a simple HTML file with some JavaScript code like the one below: $(function () { //some code function getSomething() { ...

center the radio button with CSS3

I am experiencing difficulty focusing the pointer inside this customized radio button. <div class="radio"> <input id="left" type="radio" name="gender" value="left"> <label for="left">Left</label> <input id="right" ty ...

css: positioning images with overlap in a responsive layout

Two divs have been created with background images, both displaying the same image but in different colors - one grey and the other green. These images are waveforms. Initially, only the grey image (div1) is visible while the green image (div2) remains hid ...

Updating ng-model value in AngularJS controller does does not reflect changes in selection

I'm encountering an issue while trying to upgrade my ng-model within a selection feature. Here is the HTML code I am currently using: <div ng-app> <div ng-controller="Ctrl"> <select ng-model="viewmodel.inputDevice" ...

button that takes you back to the top of a mobile website

I want to customize the Scroll To Top button so that it only appears once the user begins scrolling down, rather than always being visible even when at the top of the page. Just a heads up, I don't have much experience with JavaScript, so I might need ...

How can I create my own custom pagination and sorting features instead of relying on the default ui-bootstrap options?

Can anyone provide assistance with resolving conflicts I am experiencing while using ui-bootstrap? ...

Guide for inserting personalized buttons onto a map with the Bing Maps 6.3 Ajax Control

Looking to enhance a Bing Map with custom buttons for more interactive functionality? I'm interested in creating a custom dashboard on the map that would allow users to toggle different information or colors displayed on specific pins or polygons by s ...

Clicking yields no results

let link = '<a href="javascript:void(0);" (click)="redirectToPage(store)" class="btn grey">' + displayText + '</a>'; Upon clicking the button on the page, nothing seems to be happening. Can you help me figure out what I&apo ...

Creating a dynamic select box that changes based on data in Angular

There is a select box on my page that is populated using ng-repeat with data from an array. The array includes first names, last names, and user names. By default, I want the select box to display the first and last names. However, if these fields are empt ...

Animating the menu's height using CSS when it is being displayed or hidden

Currently, I am in the process of developing a horizontal navigation bar with a collapsible menu. For this project, I am utilizing bootstrap 4 and angular. The collapsing and showing functionality is operating as expected when clicking on the menu icon. Ho ...

Utilizing plane geometry for chunking in THREE.js

My goal is to create a world that generates infinitely, similar to how Minecraft operates, using chunks that appear and disappear based on the player's location. I am utilizing a plane that generates points through a combination of Perlin and Simplex ...

How can I style a div to include a 'bottom tab' using CSS?

I am in the process of designing a series of Bootstrap columns to replicate the layout of a website I have been provided with. https://i.sstatic.net/hVuq1.png These columns feature a blue border with a particularly thick border at the bottom. However, us ...

CSS - Guidelines for Targeting Multiple Elements

My CSS code includes several commands that target similar elements, but the resulting design appears messy. I am seeking advice on a more effective way to select these elements in a conventional manner. Despite consulting documentation, I have resorted to ...