Tuesday, 2 November 2010

Cross-browser minimum-height

Of course, so many things require hacks to work on all browsers. It's been the way of the web world for years. Actually since the emergence of IE. The example also points to a new trend in my designs to use em for sizing things other than just fonts.

See demo.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Cross-browser minimum-height</title>
<style type="text/css">
body
{
font-family:Sans-serif;
}
section
{
margin:0 auto;
width:50em;
background:#FF0000;
color:#FFFFFF;

/* The minimum height stuff */
min-height:10em;
height:auto !important;
height:10em;
}
</style>
</head>
<body>
<section>
<h1>Hello World!</h1>
</section>
</body>
</html>

No comments:

Post a Comment