I have been working with your book, I have come across some bugs with these programs IE8 and with windows 7, or shall I say I am not sure. I am also using Microsoft Expression Web 3 as my text editor and posting. I have a basic understanding of web design but not an expert either. I am going through Chapter 11 doing the exercises and was doing the example before the summary, with Headers, footers, content, and left columm. Here is my Style sheet code too, also including the css code for IE6. along with the HTML code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>test_1</title>
<link rel="stylesheet" type="text/css" href="test_1.css"/>
<!--[if]t IE 6]>
<link rel="stylesheet" type="text/css" href="test_1.ie.css"/>
<![endif]-->
</head>
<body>
<div id="heading">
<h1>Heading</h1>
</div>
<div id="container">
<div id="left">
Left Side Column.
</div>
<div id="content">
<h1>Lorem Ipsum</h1>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec eu
massa. Phasellus est eros, malesuada vel, tempus quis, pharetra at,
lacus. Ut sit amet libero. Aliquam erat volutpat. Morbi erat. Nunc et
purus vitae tortor sodales auctor. Nulla molestie. Pellentesque ante
mauris, tristique ac, placerat sit amet, placerat nec, ante. Vestibulum
interdum. Donec vitae tellus. Aliquam erat volutpat. Aenean dictum
dolor ut sem.
</p>
<p>
Ut commodo. Sed non nisi at leo aliquet lobortis. Donec a elit vel
nulla pharetra dignissim. Lorem ipsum dolor sit amet, consectetuer adipiscing
elit. Aliquam cursus tortor eget diam. Pellentesque pellentesque turpis
sed erat. Duis non libero vel metus sollicitudin aliquet. Aenean neque. Nunc
eget quam a mauris vulputate laoreet. Mauris dictum, eros venenatis fringilla
vehicula, tortor augue dignissim ante, id imperdiet risus sapien at odio. Praesent
ligula magna, nonummy vitae, facilisis at, fermentum non, diam. Integer sit
amet ligula quis lectus bibendum porta. Aliquam neque ipsum, aliquet et, semper
vel, blandit ac, massa. Etiam porttitor justo id arcu. Ut ante lacus, rutrum id,
vehicula non, faucibus in, lorem. Integer eu ante ut mauris rhoncus molestie.
Aenean ut est et lectus tempor pharetra. Fusce sed nibh. Class aptent taciti
sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos.
</p>
</div>
</div>
<div id="footer">
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec eu massa. Phasellus
est eros, malesuada vel, tempus quis, pharetra at, lacus.
</p>
</div>
</body>
</html>
==================================================
body {
background: #FFFF66;
font: 12px sans-serif;
margin: 0;
padding: 0 20px;
}
div#heading,
div#container,
div#footer {
border: 1px solid black;
max-width: 1000px;
min-width: 600px;
background: rgb(244, 244, 244);
}
div#container {
position: relative;
margin: 0 auto;
}
div#heading {
margin: 10px auto -1px auto;
}
div#heading h1 {
margin: 5px;
}
div#left {
position: absolute;
top: 0;
bottom: 0;
left: 0;
width: 100px;
background: rgb(244, 244, 244);
padding: 5px;
border-right: 1px solid black;
}
div#content {
margin-left: 211px;
background: white;
border: 1px solid white;
padding: 10px;
}
div#footer {
margin: -1px auto 10px auto;
}
div#footer p {
margin: 5px;
}
==================================================
div#heading,
div#container,
div#footer {
width: expression(
documentElement.clientWidth >= 1000?
1000
:
(documentElement.clientWidth <= 600? 600 : "auto")
);
height: 1px;
}
div#left {
height: expression(
document.getElementById("container").offsetHeight - 12
);
}
==================================================
When I look at the code in IE8 it is all jumbled together. There is something I am doing wrong but then again I am new to this and well see what you think.
Chapter 11 Positioning
Linear Mode
