By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
434,960 Members | 2,459 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 434,960 IT Pros & Developers. It's quick & easy.

Explorer (but not Firefox) indents right column text

P: n/a
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>

Aug 4 '06 #1
Share this Question
Share on Google+
1 Reply


P: n/a

"Edward" <ed****@tanguay.infokirjoitti
viestissä:11**********************@s13g2000cwa.goo glegroups.com...

<snip>
View screenshot:
http://www.tanguay.info/web/examples...Compatible.png
It's just IEs 3 pixel jog bug.. Read more about it in
http://www.positioniseverything.net/...reepxtest.html

<snip>
Aug 4 '06 #2

This discussion thread is closed

Replies have been disabled for this discussion.