Through experimentation with the most basic HTML setup, I made a startling discovery. It seems that the wrapping of the top <html> tag is malfunctioning in EVERY browser.
In my setup, I have applied a yellow background color to the <html> element. Following that, I set the <body> element to have a width of 1000px, a height of 100px, and a red background color.
If you view the page and resize the viewport (causing the horizontal scrollbar to appear), scroll all the way to the right and observe the metrics using your preferred web developer tool.
The body tag displays correctly with a width of 1000px. However, when you hover over the HTML element, it gets cut off precisely at the size of the viewport resolution. In simple terms, the <html> element fails to wrap properly. Despite this, the background color of the <html> tag still covers the entire page.
You may wonder why this issue matters given that the color appears fine as it is. But the problem becomes evident even on this very site! Scroll to the bottom of this page, resize your browser window, and then scroll to the right to see what happens to the footer background img.
This can be quite frustrating especially when working with background images/colors.
I came across a solution online to address this problem, but I must say it's not the most elegant fix.
/* Wrap Fix! */
/*set min-width for ie*/
min-width: 1000px;
/*force horizontal scroll for widths <1000*/
width:expression(document.body.clientWidth < 1000 ? "998px" : "auto" );
My questions are:
Is this behavior expected from browsers? How else could this issue be resolved?
For further information, discussion, and demos, visit this forum
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Weird html wrap..</title>
<style>
* {
margin: 0;
padding: 0;
}
html {
background-color: yellow;
}
body {
background-color: red;
height: 100px;
width: 1000px;
}
</style>
</head>
<body>
</body>
</html>