What considerations should I keep in mind when changing the DOCTYPE from html 4.01 transitional to 'html'?

Firefox is telling me that my pages are being rendered in 'standards compliance mode' based on the doctype...

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

After changing it to <!DOCTYPE html>, I noticed some changes in how the page is displayed. I always believed that the doctype was mostly for validators and as long as the rendering was 'standard' instead of 'quirks', everything should be fine. However, it seems there's more to it than just that.

For example, an <img> with a height of 100px inside an <a> tag used to display as 100px high, but now it's showing up as 105px. If I set the <img> to display:block in the CSS, then it looks correct. But why the difference? The page was supposedly already in standards mode, not quirks (if I remove the 4.01 doctype, everything goes haywire and Firefox indicates quirks mode). Are there multiple types of 'standards' modes? What other factors should I consider? Is there a comprehensive list available somewhere? (I tried searching online for answers, but all I found were outdated resources that didn't address my specific issues).

htmlcss

Answer №1

When using a 4.01 Transitional doctype with a system identifier, it triggers an "almost" standards mode in Firefox.

The main difference in almost-standards mode is that inline boxes without non-whitespace text as a child and no border, padding, or margin:

  • Do not affect the size of the line box (their line-height is ignored)
  • Do not receive a height larger than their descendants, even if their font size is bigger (zero-height if they have no descendents, positioned at their baseline)

Almost standards mode along with the two modes you mentioned are the primary modes to consider.

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

Discover the magic of unlocking XML content with the power of XSL!

Hello, I am currently working on transforming an XML archive using an XSL archive. My goal is to generate a table displaying the content of the XML, but I am encountering difficulties in showing the values of two columns named "complexity" and "subject". B ...

htmlxmlxslt

Even after reaching the bottom of the page, the div for overlay projects continues to scroll

*{ margin: 0; padding: 0; } body{ font-family: helvetica , sans-serif; background-color: #1E1E20; } .parallax-container { /* The image used */ background-image: url("https://i.sstatic.net/BlF.jpg"); animation-name: pixels; animation-durat ...

htmlcss

What is the process for assigning a value to the body in a div element?

Within a div, there is a body element structured like this: <div id = "TextBox1"> <iframe id = "TextBox1_1"> #document <html> <head></head> <body></body> </html> </iframe> </div> I have attempte ...

javascriptjqueryhtmlcss

Eliminate extraneous space with the clearfix:after pseudo-element

Could use some help figuring out how to remove the unwanted whitespace caused by clearing the float (specifically after the tabs). Any suggestions on how to fix this issue? Take a look at the code snippet below (jsfiddle): /* Clearfix */ .clearfix:af ...

jqueryhtmlcss

What is the best way to apply styles to a React component that is passed as a prop?

I'm currently working on a component that is passed as a label prop. In order for me to utilize justify-content: space between within my div, I must ensure it has a width of 100%. You can see how this appears in the developer tools by clicking here. r ...

cssreactjsflexboxstylesreact-props

Ensuring JS consistently monitors changes in value

Is there an equivalent of (void update) in Unity that is called every frame in Web Development (using JavaScript)? "I want it to continuously check if certain values have changed and then update them accordingly." let governmentprice = parseFloat(select ...

javascripthtmlcss

Concealing option value based on ng-if conditions in AngularJS: A guide

I am designing an Input form with two input fields that need to be compared and values displayed if a certain condition is met. The input fields are: <td class="td_label"><label>Client Age :</label></td> <td class="td_input"> ...

javascripthtmlangularjsangular-ng-if

Flipped the dimensions of an image for better responsiveness

Trying to implement this particular design on a responsive website. Wondering if there's a way to establish an inverse resizing technique using jQuery / Javascript so that as the viewport shrinks, the text size increases. Attempted to use jQuery to a ...

javascriptjqueryhtmlcsstwitter-bootstrap

Strange glitch in the Trebuchet MS font

I am currently attempting to utilize the jquery.fullcalendar plugin with jQuery UI theming. Everything seems to be functioning properly, except for an issue where the user's selection of a time range (week or day view) is displaced by approximately on ...

jquerycssjquery-uijquery-pluginsfullcalendar

Having trouble accessing the iframe element in an Angular controller through a directive

My webpage contains an iframe with a frequently changing ng-src attribute. I need to execute a function in my controller each time the iframe's src changes, but only after the iframe is fully loaded. Additionally, I require the iframe DOM element to b ...

javascripthtmlangularjsiframecallback

Overlap caused by padding between two elements

I'm encountering an issue where adding padding to a block element is causing it to overlap with the padding of other elements. Below is the code snippet showcasing this problem. <section class="hero"> <h1>Studying REDEFIN ...

htmlcss

Utilizing Jquery within a Personalized Post Layout

Being a beginner in jquery, I managed to create this functionality - http://jsfiddle.net/t2x9G/3/ Currently working on a Wordpress project and exploring ways to have the dynamic text content pulled from a post rather than hardcoded in the script. $(&apos ...

phpjqueryhtmlwordpress

When hovering over individual links within a set of blocks, ensure that the other links are not affected or disrupted

I need help creating a forum category link guide. Similar to this example... Specifically, I want it to display as Forums > The Financial Roadmap Two issues I am facing are: when hovering over the link, it shifts down one row and how can I add blocks lik ...

htmlcss

I am looking to create a div that can consistently refresh on its own without needing to refresh

I have implemented a comment system using ajax that is functioning well. I am looking to incorporate an ajax/js code to automatically refresh my "time ago" div every 5 seconds so that the time updates while users are viewing the same post. Important note: ...

javascriptcssajax

What are the steps to designing customizable drop-down content menus on websites?

I am looking to implement a feature where I can create content drop-down bars similar to the ones shown in the images. When a user clicks on the bar, the content should be displayed, and if clicked again, the drop-down should hide. I have searched for a so ...

javascripthtml

Is there a way to ensure that my slideshow images maintain their proportions when viewed on various screen sizes?

I came across a code snippet for an image slideshow that I really liked, but it didn't resize properly on different browser sizes. Initially, I attempted to use the vh property to address this issue, but unfortunately, the images wouldn't scale p ...

htmlcssslideshowscaling

Is there a way to set up an automatic pop-up for this?

Experience this code function AutoPopup() { setTimeout(function () { document.getElementById('ac-wrapper').style.display = "block"; }, 5000); } #ac-wrapper { position: fixed; top: 0; left: 0; width: 100%; height: 100%; back ...

javascripthtmlcsspopup

The vertical lines separating the buttons are not evenly centered

I need help to center a vertical line between my buttons in the middle of the header. Currently, the line goes up and my disconnect button is not aligned properly. Can you assist me in creating a responsive design? Thank you. HTML <div class='tab ...

htmlcssangular

Develop a versatile JavaScript or jQuery script that automatically sets the focus on the first input field within a div or tag when the user clicks on it

I am currently working on creating a data entry form using a table layout. The form has two columns - the first column for input titles and the second column mostly for input tags. I styled the inputs in the second column to appear transparent with no bord ...

javascriptjqueryhtmlforms

Is there a way to detect if JavaScript is disabled using a unique CSS selector?

Does anyone know of a CSS selector that can be used when JavaScript is disabled? I'm not referring to the noscript tag, but specifically in CSS. ...

csscss-selectors