Horizontal rules not working

Get Started
1

Okey hi eveyone, i found a really cool problem when using HTML5 (<!DOCTYPE HTML>) vs. the regular <html>. When you have an image with a <hr /> below it, the lines distance differs between html, and html5. Why is this, and what are my solution to restore it to it’s default.

Look
plain html


<html>
	<head>
		<title>I'm not HTML 5</title>
	</head>
	<body>
  <hr />
  <img src="http://imgcash1.imageshack.us/img21/212/pinkbw.png" alt="text image"/>
  <hr />
  <img src="http://imgcash1.imageshack.us/img21/212/pinkbw.png" alt="text image"/>		
  <hr />
  <img src="http://imgcash1.imageshack.us/img21/212/pinkbw.png" alt="text image"/>
   <hr />
  <img src="http://imgcash1.imageshack.us/img21/212/pinkbw.png" alt="text image"/>
   <hr />
  <img src="http://imgcash1.imageshack.us/img21/212/pinkbw.png" alt="text image"/>
	</body>
	
</html>

and HTML5


<!DOCTYPE html>
<head>
<title>I am HTML5</title>
</head>
<style>
 /* solutions? */
</style>
<body>
  <hr />
  <img src="http://imgcash1.imageshack.us/img21/212/pinkbw.png" alt="text image"/>
  <hr />
  <img src="http://imgcash1.imageshack.us/img21/212/pinkbw.png" alt="text image"/>		
  <hr />
  <img src="http://imgcash1.imageshack.us/img21/212/pinkbw.png" alt="text image"/>
   <hr />
  <img src="http://imgcash1.imageshack.us/img21/212/pinkbw.png" alt="text image"/>
   <hr />
  <img src="http://imgcash1.imageshack.us/img21/212/pinkbw.png" alt="text image"/>
</body>
</html>
2

The problem is that the first example has no doctype, so it’s being rendered in “quirks mode”, which is a historically incorrect version of the CSS box-model that Internet Explorer used to use.

Use an appropriate doctype for the non-html5 one, such as this:


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

or as you are using XHTML, this:


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

and you will find that the problem no longer exists.

3