Maybe someone can check this code out and see what I'm
doing wrong. In IE6 the "container" ID encompasses the
other "sidebar" ID's, however, in NN7 they do not. I
probably am not employing the <div> correctly; any help
(and certainly criticism(s)) is appreciated.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="Content-Script-Type" content="text/javascript">
<title>Sample</title>
<style type="text/css">
#container {
width: 60%;
background-color: #D3D3D3;
text-align: center;
border: 1px solid gray;
margin: 10px;
margin-left: auto;
margin-right: auto;
padding: 10px;
}
#sidebar-l1 {
float: left;
background-color: #FAEBD7;
text-align: center;
border: 1px dashed gray;
width: 40%;
margin-top: 10px;
margin-left: 5px;
padding: 5px;
}
#sidebar-r {
float: right;
background-color: #FAEBD7;
text-align: center;
border: 1px solid gray;
width: 30%;
margin-top: 10px;
margin-right: 5px;
padding: 5px;
}
#sidebar-l2 {
float: left;
background-color: #F0F0F0;
text-align: center;
border: 1px solid gray;
width: 40%;
margin-top: 5px;
margin-left: 5px;
padding: 5px;
}
</style>
<body>
<form action="#">
<div id="container">
<strong>Sample</strong>
<div id="sidebar-l1">
List 1<br>
<select name="list1" size="6">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3" selected>Option 3</option>
<option value="4">Option 4</option>
</select>
</div>
<div id="sidebar-r">
List 2<br>
<select name="list2" size="6" multiple>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
<option value="4">Option 4</option>
</select>
</div>
<div id="sidebar-l2">
<img src=http://www.webdeveloper.com/forum/archive/index.php/"images/up.jpg" width="50" height="25" alt="Up">
<img src=http://www.webdeveloper.com/forum/archive/index.php/"images/down.jpg" width="50" height="25" alt="Down">
</div>
</div>
</form>
<p>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"http://validator.w3.org" target="_blank">
<img src=http://www.webdeveloper.com/forum/archive/index.php/"http://www.w3.org/Icons/valid-html401" alt="Valid HTML 4.01!" height="31" width="88">
</a>
</p>
</body>. . .
<div style="clear:both;"></div>
</div>
</form>
. . .
Was that enough context to tell where it goes? This is weird; it's the second time today this has come up. I really have no idea why it works. Maybe Pyro will enlighten us.Yes sir, that fixed it. I, too, am confused why this extra
<div> is even needed nor did I see it interjected within the
demo's I've been looking at. I'll check the CSS Tutorial
page and see if they've got some info on it.
Thanx alot.
doing wrong. In IE6 the "container" ID encompasses the
other "sidebar" ID's, however, in NN7 they do not. I
probably am not employing the <div> correctly; any help
(and certainly criticism(s)) is appreciated.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="Content-Script-Type" content="text/javascript">
<title>Sample</title>
<style type="text/css">
#container {
width: 60%;
background-color: #D3D3D3;
text-align: center;
border: 1px solid gray;
margin: 10px;
margin-left: auto;
margin-right: auto;
padding: 10px;
}
#sidebar-l1 {
float: left;
background-color: #FAEBD7;
text-align: center;
border: 1px dashed gray;
width: 40%;
margin-top: 10px;
margin-left: 5px;
padding: 5px;
}
#sidebar-r {
float: right;
background-color: #FAEBD7;
text-align: center;
border: 1px solid gray;
width: 30%;
margin-top: 10px;
margin-right: 5px;
padding: 5px;
}
#sidebar-l2 {
float: left;
background-color: #F0F0F0;
text-align: center;
border: 1px solid gray;
width: 40%;
margin-top: 5px;
margin-left: 5px;
padding: 5px;
}
</style>
<body>
<form action="#">
<div id="container">
<strong>Sample</strong>
<div id="sidebar-l1">
List 1<br>
<select name="list1" size="6">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3" selected>Option 3</option>
<option value="4">Option 4</option>
</select>
</div>
<div id="sidebar-r">
List 2<br>
<select name="list2" size="6" multiple>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
<option value="4">Option 4</option>
</select>
</div>
<div id="sidebar-l2">
<img src=http://www.webdeveloper.com/forum/archive/index.php/"images/up.jpg" width="50" height="25" alt="Up">
<img src=http://www.webdeveloper.com/forum/archive/index.php/"images/down.jpg" width="50" height="25" alt="Down">
</div>
</div>
</form>
<p>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"http://validator.w3.org" target="_blank">
<img src=http://www.webdeveloper.com/forum/archive/index.php/"http://www.w3.org/Icons/valid-html401" alt="Valid HTML 4.01!" height="31" width="88">
</a>
</p>
</body>. . .
<div style="clear:both;"></div>
</div>
</form>
. . .
Was that enough context to tell where it goes? This is weird; it's the second time today this has come up. I really have no idea why it works. Maybe Pyro will enlighten us.Yes sir, that fixed it. I, too, am confused why this extra
<div> is even needed nor did I see it interjected within the
demo's I've been looking at. I'll check the CSS Tutorial
page and see if they've got some info on it.
Thanx alot.