margin and padding are causing issues calculating layout

Question

I am having this issue where I am not getting the true offset in IE6. I am using the offset to position a pop-in.

The CSS is something like this:

.container50-50-right-border              { }
.container50-50-right-border .title       {padding: 0px; margin: 0px;
                                           clear: both;}
.container50-50-right-border .leftcolumn  {width: 47%; float: left;
                                           display:inline;}
.container50-50-right-border .rightcolumn {width: 48%; float: left;
                                           display:inline;
                                           border-left: 1px solid #D6D7DE;
                                           padding: 0px 0px 0px 10px;
                                           margin: 0px 0px 0px 10px;}
.container50-50-right-border .description {clear: both;}

when I remove the padding and margin from the

.container50-50-right-border .rightcolumn

it behaves a little better but not perfectly. The positioning code is well tested so I don't think it's that.

Sorry for the sparse amount of code. Any help would be appreciated.

Answer 1

I did a simple test with your CSS, the javascript from your comment, and some made up HTML to test this. I added the showDiv function to test

<script type='text/javascript'>
function getPositionLeft(This){
    var el = This;
    var pL = 0; 
    while(el){pL+=el.offsetLeft;el=el.offsetParent;} 
    return pL;
}

function getPositionTop(This){ 
    var el = This;
    var pT = 0; 
    while(el){pT+=el.offsetTop;el=el.offsetParent;} 
    return pT;
}

function showDiv(c){
    var d3 = document.getElementById('3');
    d3.style.position = 'absolute';
    d3.style.left = (getPositionLeft(document.getElementById('test')) + 10) + 'px';
    d3.style.top = (getPositionTop(document.getElementById('test')) + 20) + 'px';
}
</script>

<style>
.container50-50-right-border {width: 600px;}
.container50-50-right-border .title {padding: 0px; margin: 0px; clear: both;}
.container50-50-right-border .leftcolumn {width: 47%; float: left; display:inline; border: 1px solid blue;}
.container50-50-right-border .rightcolumn {width: 48%; float: left; display:inline; border-left: 1px solid #D6D7DE; padding: 0px 0px 0px 10px; margin: 0px 0px 0px 10px;}
.container50-50-right-border .description {clear: both;}
</style>

<div class="container50-50-right-border">
    <div class="leftcolumn" id="1">1</div>
    <div class="rightcolumn" id="2"><a href="test" id="test" onclick="showDiv(); return false;">test</a></div>
</div>
<span id="3" style="background: black; color: white;">move me</span>

I tested in IE6, it positioned fine. Can you give some more code, perhaps the HTML and JavaScript?

Answer 2

Keep in mind, IE will switch box-models based on what rendering mode it is in (Quirks mode vs Standards mode). Verify that the Doctype you are using is putting IE into Strict mode, else the box model it uses for positioning will not be the standard W3C model.

http://www.quirksmode.org/css/quirksmode.html