Hi there Sawtooth500,
there is no problem displaying code in a div element as the following example,
which may look familiar to you, will show, although it appears impossible to get
IE6 or IE7 to apply the correct formatting.
I have not installed IE8, as yet, so cannot say whether that browser works any better.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<style type="text/css">
#container {
position:relative;
width:760px;
border:3px double #003;
margin:auto;
}
#fake_background {
position:absolute;
width:100%;
height:100%;
}
#content {
position:relative;
padding:20px 10px;
}
#content h1 {
font-size:18px;
text-align:center;
}
#content img {
float:left;
padding:5px;
margin-right:10px;
border:1px solid #003;
background-color:#fff;
}
#content p {
margin:0;
padding-bottom:10px;
text-indent:20px;
}
#code {
width:740px;
padding:10px;
border:3px double #003;
margin:10px auto;
white-space:pre-line;
font-family:'courier new',monospace;
font-size:12px;
}
</style>
<!--[if lt IE 8]>
<style type="text/css">
#fake_background {
/****** note: the '-6' value represents the total container border width ******/
width:expression(document.getElementById('container').offsetWidth-6+'px');
}
#fake_background {
/****** note: the '-6' value represents the total container border width ******/
height:expression(document.getElementById('container').offsetHeight-6+'px');
}
#content img {
position:relative;
}
</style>
<![endif]-->
<script type="text/javascript">
if(window.addEventListener){
window.addEventListener('load',displayHTML,false);
}
else {
if(window.attachEvent){
window.attachEvent('onload',displayHTML);
}
}
function displayHTML(){
document.getElementById('code').firstChild.nodeValue=
document.getElementById('container').innerHTML.toLowerCase();
}
</script>
</head>
<body>
<div id="container">
<img id="fake_background" src="http://www.coothead.co.uk/images/gradient2.gif" alt="">
<div id="content">
<h1>background image dimensions 448 x 576</h1>
<img src="http://www.coothead.co.uk/images/anim1.gif" alt="">
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras volutpat, purus ac
pellentesque adipiscing, mauris ligula convallis metus, vitae scelerisque nibh
orci quis mi. Cum sociis natoque penatibus et magnis dis parturient montes,
nascetur ridiculus mus. Curabitur porttitor aliquam libero. Quisque molestie ornare
sem. Nam euismod sem lacinia ipsum. In pharetra metus ut dolor cursus aliquam.
Maecenas eu ante quis enim tincidunt laoreet. Pellentesque varius nunc in ipsum
pulvinar sollicitudin. Nunc et mi. Donec auctor dignissim orci. Aliquam sed magna.
Pellentesque in dui. In eget elit. Praesent eu lorem.
</p>
<img src="http://www.coothead.co.uk/images/anim2.gif" alt="">
<p>
Cras cursus varius pede. Cras dolor lorem, convallis sed, venenatis ac, aliquam vitae,
orci. Duis diam massa, adipiscing quis, aliquam eget, ornare eu, lectus. Sed rutrum
augue non purus. Integer vel mauris. Nam suscipit molestie lectus. Fusce laoreet
interdum eros. Pellentesque sit amet enim id nunc adipiscing ultricies. Quisque
lobortis eleifend elit. Sed eu augue sed felis vulputate iaculis. Cras lorem felis,
lobortis id, accumsan vel, facilisis quis, dolor. Curabitur aliquet. Nulla facilisi.
Proin nunc velit, posuere sit amet, porttitor et, volutpat a, massa. Maecenas elementum
volutpat justo. Pellentesque magna neque, dictum id, rhoncus a, fringilla et, nulla.
Phasellus placerat gravida purus. Pellentesque odio. Sed volutpat vehicula nulla. Quisque
metus urna, semper eget, aliquam ac, feugiat nec, massa.
</p>
<img src="http://www.coothead.co.uk/images/anim3.gif" alt="">
<p>
Nullam pharetra quam quis metus. Proin feugiat lacinia mauris. Cum sociis natoque
penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent faucibus erat
quis ante. Suspendisse eu tellus. Donec sit amet ante in nisl dapibus condimentum. Proin
diam. Curabitur egestas felis iaculis lorem. Aliquam sit amet risus ut nulla sollicitudin
scelerisque. Mauris viverra hendrerit augue. Morbi eu sapien sed enim rutrum blandit.
Quisque feugiat. Pellentesque luctus sagittis est. Donec dolor sem, bibendum ac, porta in,
rutrum sit amet, dui. Ut libero turpis, tempus nec, venenatis at, tincidunt ac, sem.
</p>
<img src="http://www.coothead.co.uk/images/anim4.gif" alt="">
<p>
Cras dictum semper ante. Vivamus fermentum, neque non commodo congue, lacus lectus
elementum elit, vitae placerat nisl nibh vitae tortor. In molestie fermentum tellus. Nunc
dolor quam, venenatis vel, gravida sit amet, imperdiet sit amet, mi. Nulla facilisi. Nunc
pede orci, elementum eget, facilisis id, viverra vel, leo. Duis eu mauris eget felis
lobortis iaculis. Etiam elit metus, posuere ut, tempor eget, commodo eget, leo. Vivamus
elementum. Quisque fringilla orci sit amet nulla.
</p>
</div><!-- end #content -->
</div><!-- end #container -->
<div id="code"> </div>
</body>
</html>
I have used onload in the example, which I know is not your final requirement, as it is starting point for
further refinements. :agree: