Why is it that in this two-column example that (only) in explorer, the
text in the right-column moves a couple pixels over to the right
whereever there is text across from it in the left hand column? I
pasted the code below.
View screenshot:
http://www.tanguay.info/web/examples...Compatible.png
Download complete code:
http://www.tanguay.info/web/download...Compatible.zip
Thanks,
Edward Tanguay
All my projects:
http://www.tanguay.info
=====================================
<html>
<head>
<style type="text/css">
body {
margin: 0px;
background-color:#dddddd;
font-family: Verdana, Geneva, Lucida, Helvetica, Arial, sans-serif;
}
#header {
background-color: beige;
border-bottom: 1px solid #888;
margin-bottom: 0px;
padding: 10px;
}
#leftColumn {
float: left;
width:200px;
}
#content {
position: relative;
padding: 10px;
margin-left: 200px;
text-align:left;
}
#footer {
background-color: #333;
color: ivory;
font-size: 11px;
padding: 3px;
text-align: right;
clear: both;
}
p {
padding: 0;
margin: 0px;
}
#leftColumnPaddingFix {
padding:10px;
}
#leftColumnBackgroundColor {
position:relative;
width:100%;
background:url("images/leftBackground.png") repeat-y top left;
z-index: 100;
}
#rightColumnBackgroundColor {
position:relative;
width:100%;
background:url("images/rightBackground.png") repeat top right;
z-index: 200;
}
#leftColumn p {
font-size:11;
color:green;
}
</style>
</head>
<body>
<div id="header">
<p>This is the header</p>
</div>
<div id="rightColumnBackgroundColor">
<div id="leftColumnBackgroundColor">
<div id="leftColumn">
<div id="leftColumnPaddingFix">
<ul>
<li>one</li>
<li>two</li>
<li>three</li>
<li>four</li>
</ul>
</div>
</div>
<div id="content">
<p>This is the Content DIV. This is the Content DIV. This is
theThis is the Content DIV. This is theThis is the Content DIV. This is
theThis is the Content DIV. This is theThis is the Content DIV. This is
theThis is the Content DIV. This is theThis is the Content DIV. This is
theThis is the Content DIV. This is theThis is the Content DIV. This is
theThis is the Content DIV. This is theThis is the Content DIV. This is
theThis is the Content DIV. This is theThis is the Content DIV. This is
theThis is the Content DIV. This is theThis is the Content DIV. This is
theThis is the Content DIV. This is theThis is the Content DIV. This is
theThis is the Content DIV. This is theThis is the Content DIV. This is
theThis is the Content DIV. This is theThis is the Content DIV. This is
theThis is the Content DIV. This is theThis is the Content DIV. This is
theThis is the Content DIV. This is theThis is the Content DIV. This is
theThis is the Content DIV. This is theThis is the Content DIV. This is
theThis is the Content DIV. This is theThis is the Content DIV. This is
theThis is the Content DIV. This is theThis is the Content DIV. This is
theThis is the Content DIV. This is theThis is the Content DIV. This is
theThis is the Content DIV. This is theThis is the Content DIV. This is
theThis is the Content DIV. This is theThis is the Content DIV. This is
theThis is the Content DIV. This is theThis is the Content DIV. This is
the IV. Thihe Content DIV.</p>
</div>
<div id="footer">
<p>This is the footer</p>
</div>
</div>
</div>
</body>
</html>
Explorer (but not Firefox) indents right column text
