Hello:
First, let me congratulate Richard York for the great book. I’m trying hard to not buy the other book (that seems more advanced, because the comments) until not finish this satisfactorily.
Seems than nobody have the same problem because I check, at glace, in the forum and nobody asked for the same.
I can’t make IE 7, Mozilla Firefox, or Opera 2 behave like the example in figure 2-9.
The same code, without the Strict XHTML DOCTYPE (quirk mode), behave like figure 2-8 in IE7.
What happened (the output) in standard mode is that the table goes centralized above the div element, and the div elements, in two rows (not by side: div1 width: 30%; and div2 margin-left: 34%; width: auto;), occupied all the windows width one (div1) over the other (div2).
I recheck my code and try different things but can’t make the browsers behave like Figure 2-9. So I will appreciate any help.
The code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Doctype Sniffing</title>
<style type='text/css' media='all'>
table {
margin: auto;
}
td {
background: green;
margin: 10%;
border: 5px solid black;
padding: 10%;
width: 100%;
color: black;
font-size: 200%;
text-align: center;
}
div {
background: green;
border: 5px solid black;
font-size: 200%;
padding: 1%;
#div1 {
float: left;
width: 30%;
}
#div2 {
margin-left: 34%%;
width: auto%;
}
</style>
</head>
<body>
<table>
<tr>
<td>
Some content.
</td>
</tr>
</table>
<div id='div1'>
This div smells funny.
</div>
<div id='div2'>
This div has <em>strange</em> and rather pleasing odor about it.
</div>
</body>
</html>
Chap 2 Figure 2-9
Linear Mode
