PDA

Click to See Complete Forum and Search --> : Display inconsistencies between browsers

olerag
02-19-2004, 03:35 PM
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="images/up.jpg" width="50" height="25" alt="Up">
<img src="images/down.jpg" width="50" height="25" alt="Down">
</div>
</div>
</form>

<p>
<a href="http://validator.w3.org" target="_blank">
<img src="http://www.w3.org/Icons/valid-html401" alt="Valid HTML 4.01!" height="31" width="88">
</a>
</p>
</body>
ray326
02-19-2004, 08:44 PM
. . .
<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.
olerag
02-19-2004, 09:10 PM
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.