19 October, 2007

How do you stretch a background image?

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

< html>
< head>
< title>Background to fit screen</title>

<style type="text/css">

html {height:100%;}

body {height:100%; margin:0; padding:0;}

/* set the background image to full capacity of the viewing area */

#bg {position:fixed; top:0; left:0; width:100%; height:100%;}

/* places the content on top of the background image */

#content {position:relative; z-index:1;}

<!--[if IE 6]>
<style type="text/css">

/* some css fixes for IE browsers */
html {overflow-y:hidden;}
body {overflow-y:auto;}
#bg {position:absolute; z-index:-1;}
#content {position:static;}



<div id="bg"><img height="100%" alt="" src="yourimage.jpg" width="100%" /></div>
<div id="content"><p>Enter your content here.</p></div>

17 October, 2007

Div height problem in IE

The following, as the only content in a file, is the requested 5px high in Mozilla and Opera, but 12px high in IE (5.0, 6.0 & 7.o):

<div class="dot" style="height:1px; border:1px solid red;"></div>

Divs in IE have a minimum height when the <div> is empty. There is a couple of ways to solve this:
1) Put a comment tag inside the div:
<div class="dot" style="height:1px; border:1px solid red;"><!-- --></div>

2) Add this to its style inside the div:
<div class="dot" style="font-size:2px; height:2px; border:1px solid red;"></div>