Make valid font size in all browsers.
body { font-size: small; }
* html>body {
font-size: x-small; /* for IE5 / Win */
f\ont-size: small; /* fro other browsers */
}
Showing posts with label xhtml. Show all posts
Showing posts with label xhtml. Show all posts
Tuesday, July 3, 2007
DIV layout with height 100% solution
Index.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns=http://www.w3.org/1999/xhtml>
<head>
<title>Rich Page</title>
<link rel="stylesheet" type="text/css" href="Styles.css" />
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
</head>
<body>
<form>
<div id="outer">
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
<div id="footer_guarantor"></div>
</div>
<div id="footer">© 2007 RichBrains - Cusrom Web Development Company</div>
</form>
</body>
</html>
Styles.css
* { margin: 0; padding: 0; border: 0; }
html { height: 100%; }
body, form { min-height:100%; height: 100%; }
#outer { width: 100%; margin: auto; height: auto !important; min-height:100%; height: 100%; }
#footer_guarantor { height: 80px; clear: both; }
#footer { margin: auto; margin-top: -75px; width: 100%; height: 70px; clear: both; }
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns=http://www.w3.org/1999/xhtml>
<head>
<title>Rich Page</title>
<link rel="stylesheet" type="text/css" href="Styles.css" />
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
</head>
<body>
<form>
<div id="outer">
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
<div id="footer_guarantor"></div>
</div>
<div id="footer">© 2007 RichBrains - Cusrom Web Development Company</div>
</form>
</body>
</html>
Styles.css
* { margin: 0; padding: 0; border: 0; }
html { height: 100%; }
body, form { min-height:100%; height: 100%; }
#outer { width: 100%; margin: auto; height: auto !important; min-height:100%; height: 100%; }
#footer_guarantor { height: 80px; clear: both; }
#footer { margin: auto; margin-top: -75px; width: 100%; height: 70px; clear: both; }
Subscribe to:
Posts (Atom)