Linda Quinn wrote:
> www.lifeonwheels.com/beta2.
> Question - why would removing the border declaration cause the entire
> left column to move? It was my understanding that a border is not
> part of the actual container, only an outline.
Borders affect interaction between elements under certain circumstances,
not only as a visual outline.
There are more than one factor at play here, so I'll try to spell them out.
What the border does across browser-land:
Didn't look deep, but it looks like the border is preventing some
margins on elements from "escaping" #columnwrapper. Visible change in
Opera and Firefox too when the border is removed - without the
disastrous result that IE6 shows.
A simple test shows that a 'padding-top: 1px;' can replace the
'border:0.1em solid white;' and achieve the same effect, and this is a
clear sign that 'collapsing margins'[1] are at play.
You have accidentally found one of the many workarounds for this
standardized but often unwanted effect.
---
IE6 has a bug:
What's bugging IE6 in particular is a bit more complex. It's a real
IE-bug affecting _absolute positioned elements next to floats_, and that
bug is somehow contained along with any collapsing margins in your case.
IE6 is otherwise not affected by 'collapsing margins' in your page,
probably because there are too many elements with default or triggered
'hasLayout'[2] in there. Another reason can be differences in
margin-defaults in IE6 vs. other browsers. No margins = no collapse.
The IE-bug can in itself be cured by placing a non-floating and
non-positioned element between the end-tag of 'leftcolumn' and the
start-tag of 'rightcolumnholder'.
A zero-size element - like a div with nothing but a comment inside - as
separator, will kill the IE-bug...
</div> <!--end leftcolumn-->
<div><!-- --></div>
<div id="rightcolumnholder">
...without affecting other browsers.
I would still keep the 'border' or 'padding' on #columnwrapper though,
as containing those margins will make the line-up more cross-browser
reliable.
---
Now, making that source-code a little more valid and in accordance with
the chosen doctype, wouldn't hurt. The CSS validator can't find the
stylesheet through the page - amongst other things. Fixing the
source-code won't change rendering in any browser - that I know of, but
it sure will help during debugging and maintenance.
regards
Georg
[1]http://www.w3.org/TR/CSS21/box.html#collapsing-margins
[2]http://www.satzansatz.de/cssd/onhavinglayout.html
--
http://www.gunlaug.no
______________________________________________________________________
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
