How come the inclusion of a DOCTYPE tag impacts the styling of my CSS?

I am puzzled why the code below renders correctly without any issues until I add a doctype declaration:

<body style="margin:0; padding:0; background-color:#eeeeee"></body>

<div id="HeaderContainer" style="background-color:#eeeeee; color:Black; border-bottom:1px solid #cccccc; height:60px; margin:0px"></div>

<div style="width:100%; background-color:White; margin:0px; padding:0px">

<div style="margin:30px; width:840px; margin:10px auto; margin-top:50px; background-color:#cc0000;">

text

</div>

</div>


</div>

</body>

My intention is to have a header (a grey bar) with a dark grey border at the bottom. Underneath it, there should be content within a large div that takes up 100% of the width and has a white background. The above code appears fine initially, but as soon as I include the following line at the beginning:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

The innermost div's margin changes from white to grey, resulting in a visually incorrect layout.

Can someone clarify this unexpected behavior? This issue was observed in IE8, but it persists in Chrome as well.

Image description:

htmlcss

Answer №1

When you include a DOCTYPE declaration, the browser switches to rendering the page in [nearly] standard mode rather than quirks mode.

Answer №2

You have mistakenly placed the closing body tag on line 1 and then repeated it at the end of the document.

Answer №3

This poorly formatted XHTML needs some serious work.

The issue you're encountering seems to be related to a webkit bug. To avoid this problem, try using padding instead of margin:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
    <head>
        <title></title>
    </head>
    <body style="margin:0; padding:0; background-color:#eee">
        <div id="HeaderContainer" style="background-color:#eee; color:#000; border-bottom:1px solid #ccc; height:60px; margin:0px"></div>
        <div style="width:100%; background-color:#fff; margin:0px; padding:0px">
            <div style="width:840px; margin:0 auto; padding-top:10px; background-color:#c00;">
                text
                <br /><br /><br />
            </div>
        </div>
    </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

Is there a light font that cannot be replicated?

I attempted to replicate the font style used in this website's menu, but after implementing it into my WordPress CSS theme, the text still appears bold. Is there a particular technique I can use to achieve the lighter version of the font? I have loade ...

cssfontswebfontsgoogle-webfonts

Is there a way to modify the size and color of a specific word in a CSS animation?

As a newcomer to CSS, I am exploring ways to change the font size and color of a specific word in my sentence after an animation. My initial attempt was to enclose the word within a span class like this: <h2>I'm <span style = "font-size: ...

htmlcss

Changing the color of text in an HTML input field using CSS and JavaScript depending on the input value

Looking for a solution! // Getting user input values var input1 = parseInt(document.getElementById("input1").value); var input2 = parseInt(document.getElementById("input2").value); var input3 = parseFloat(document.getElementById(" ...

javascripthtmlcssarrays

To ensure proper formatting, I must include a comma operator for numbers while typing and limit the decimal places to two

Could someone assist me in formatting a number to include commas and restrict the decimal places to two using regex? I have attempted the following, but need help making it work properly. Currently, when I enter a number it shows up as 1231244, however I ...

javascriptjqueryhtmlasp.net-mvctwitter-bootstrap

Having troubles with Navbar svg images not loading on certain pages on the express/ejs app?

Hello there, I'm encountering an issue with my navbar in an express app. The navbar is saved as a partial and included in a boilerplate wrapper used on most pages. Here's a snippet of how it looks: <h1>HELLO<h1> Within the boilerplat ...

cssexpressejs

Update the index of each list object and then add them to the Angular controller

Currently, I am working on integrating Spring with AngularJS. In my setup, I have a Spring controller returning a List object to the Angular controller. When I print the List in the Spring controller console, it appears as follows: [org.com.pro.dto.MyDTO ...

htmlangularjsspring-mvc

How does JQuery handle color parsing in text?

Is there a way to automatically parse colors in text and apply them to CSS? For instance, if I type #40464f, I want the color to be caught and included in some CSS styles. I am familiar with how to achieve this by adding markup: <span data-color=""> ...

jquerycsscolors

"Embracing Flexbox for a fully responsive mobile experience

What's the best way to make this flexbox design responsive for mobile devices? I want the layout to look consistent across both desktop and mobile screens. The issue seems to be related to the responsiveness of the flexbox and the smaller size of mobi ...

htmlcssmobileflexboxresponsive

Exploring the distinctions among different material design frameworks

Confirming my grasp of the situation here. Material design is an interface building approach developed by Google. Material lite is Google's public implementation of this concept. serves as an independent open-source adaptation. In addition, Angul ...

cssangularmaterial-design

Is it possible to implement smooth scrolling in HTML without using anchor animation?

Is it feasible to implement a more seamless scrolling experience for a website? I'm referring to the smooth scrolling effect seen in MS Word 2013, but I haven't come across any other instances of this. I've heard that AJAX can make such th ...

javascriptjqueryhtmlcssajax

Convert a two-column layout on the web into a single-column layout for mobile devices, featuring dynamic

Is there a way to style this diagram with CSS that will work on IE11 and all major browsers? It seems like Flexbox doesn't support dynamic height. Do I need separate left and right columns for larger viewports and no columns for smaller viewports? ...

javascripthtmlcssgridflexbox

Inject HTML content with headers using PDO in PHP

With the power of PHP PDO: I want to generate an HTML table (including thead and tbody) by querying a MySQL database using a select statement. This will be done dynamically, only requiring basic credentials and the name of the table. ...

phphtmlpdotableheader

I am experiencing an issue with the interaction between my "label" tag and "summary" tag. The details are not opening when I click on the label. Can someone please provide guidance on how to resolve this

I have reviewed the question here, but it does not provide an answer, and there's also this related question. However, my question has a slightly different angle. I am encountering an issue where adding another element inside the summary tag prevents ...

htmlhtml-tag-detailshtml-tag-summary

What is the best way to link one element to another element?

Apologies for the mismatched title, but here's my issue: I need to create hidden checkboxes for each Polymer's paper-button div in jsp/style related problems. <%int i; %> <form ACTION="Computation.jsp"> <% for(i=0; i<n; ...

javascriptjqueryhtmljsp

Understanding the Hierarchy of CSS and Bootstrap Styles

I have been using a custom CSS file along with bootstrap. Initially, I had my custom CSS written before the Bootstrap CSS. However, I recently discovered that it's recommended to include Bootstrap CSS first before any custom CSS. As a result, I'm ...

htmlcsstwitter-bootstrapbootstrap-4

Developing a unified input element containing numerous fields

After @grateful answered this question, I wanted to elaborate in case it could benefit others... In my project, there's a page called rsetup.php which has some PHP code to access a MySQL database for filling the HTML content of the page. This HTML ge ...

javascriptphpmysqlcss

"Mastering the art of underlining individual components in React with the power of

Hey there, I'm having some issues working with the CSS for my component. I've created a joke component that has joke and punchline props. The issue is that when it appears in the compiler, my joke component (which I call twice) only shows up as t ...

cssreactjscomputer-science

Tips on adjusting the color of a chosen tab using the CSS :target Property, no JavaScript needed!

I am currently attempting to modify the color of the active tab using CSS and the :target property. The issue I am facing is that I am unable to identify the clicked tab when using the :target property. Therefore, I would like the active tab to be visible ...

htmlcss

Is the Site Header displayed depending on the scroll position and direction of scrolling?

On my website, I have a header that I want to hide when the user scrolls down 100px and show again when they scroll up 50px. I attempted to write a script for this functionality, but it doesn't seem to be working as expected. CSS /* This CSS rule w ...

javascriptjquerycsselementor

Jquery and Ajax failing to function properly with multiple dropdown selections

I've been working on creating a functionality to have multiple dropdown menus using Bootstrap, JQuery, and AJAX. The goal is to select multiple countries from these dropdowns and store the selected values in CSV format in my database. Initially, I had ...

phphtmlajax