Forum Moderators: not2easy
BUT
Opera 9.0 (all platforms), Mac Safari 1.3 & 2.0, and Linux Konqueror 3.4.0, all share the same problem: the right column is completly missing - just a blank space.
I've never come across something like this before, where these three disparate browsers behave in EXACTLY the same way. I'm guessing that FF is getting it right, but the chances of Op, Saf & Konq all having the bug seems more than remote.
Does anyone know of some z-index / relative positioning / overflow etc feature that these browsers (and ONLY these browsers) share, that could be causing this?
Any suggestions, no matter how unlikely, would be most gratefully received, as I've run out of things to try.
Here's the CSS (based on A List Apart's "Holy Grail"):
body {
min-width: 930px;
margin: 0px;
padding: 0px;
width: 100%;
}#header { z-index: 5; position: absolute; left: 0px; top: 0px; width: 100%; }
#headerprop {
height: 120px;
float: right;
width: 1px;
}
#container {
position: relative;/* fix to IE7 10000px padding-bottom spill over footer */
overflow: hidden;
padding-left: 140px; /* LC fullwidth */
padding-right: 225px; /* RC fullwidth + CC padding */
}
#container .column {
position: relative;
float: left;
padding-bottom: 20010px; /* X + padding-bottom */
margin-bottom: -20000px; /* X */
}
#centercolumn {
min-height: 900px;
padding: 10px 20px; /* CC padding */
width: 100%;
z-index: 4; margin-top: 108px; /* header graphic height */
}
/* IE min-height hack */
.prop { height: 900px; float: right; width: 1px; }
/* IE min-height hack: Part II */
.clear { clear: both; height: 1px; overflow: hidden; }
#leftcolumn {
width: 141px; /* LC width (i.e. fullwidth minus 20 for padding) */
padding: 560px 10px 0px 10px; /* LC padding */
left: 185px; /* RC fullwidth */
margin-left: -100%;
margin-top: 0px;
z-index: 2;
top: 108px;/* header graphic height */
}
/* A List Apart "Holy Grail" IE6 hack to stop the negative margin pulling the left column too far to the left combined with "left column disappearing in IE7" fix */
#container > #leftcolumn {
left: -180px; /* Negative of (LC fullwidth + CC padding) = width for all browers other than IE7 */
margin-left: expression(
document.all.center.offsetWidth * -1 +
parseFloat(document.all.centercolumn.currentStyle.paddingLeft) +
parseFloat(document.all.leftcolumn.currentStyle.paddingLeft) +
parseFloat(document.all.leftcolumn.currentStyle.paddingRight)
); /* Fix for IE7 */
}
#rightcolumn {
width: 196px; /* RC width (ie fullwidth minus 20 for padding) */
padding: 264px 0px 0px 0px; /* RC padding top padding is big so that smallmenu is positioned beneath AP mainmenu */
margin-right: -225px; /* Negative of RC fullwidth + CC padding */
z-index: 3;
top: 108px; /* header graphic height */
background-color: #f0e9e4; border-right: 1px solid #000000; border-bottom: solid #000000;
background-image: url('images/rc.jpg'); background-repeat: no-repeat; background-position: -12px 0px;
}
#footer { clear: both; position: relative; z-index: 10; }
/* IE6 Fix for spill over footer */
* html body {
overflow: hidden;
}
* html #footer-wrapper {
float: left;
position: relative;
z-index: 10;
clear: both;
width: 100%;
padding-bottom: 10010px;
margin-bottom: -10000px;
}
I haven't actually looked at or analysed the "holy grail" code. one glimpse at all those workarounds puts me off somewhat, but maybe someone will come along later and just "know" the answer
some questions/random thoughts for you though which may or may not help
something is not ringing true as you say, as far as I know FF had a problem with overflow but it is fixed, and I'm not sure what you mean about FF unusual behaviour regarding z-index. I know IE has unusual z-index behaviour but if FF does too then this would be news to me and would I be interested to hear more.
Opera, Safari and Konqueror have very advanced CSS support as does FF so if it's not working in them I'd say there is a fundamental flaw somewhere in the code and I'm surprised that FF is working
did the original incarnation of the holy grail work for you in Opera, Safari and Konqueror? and if so what changes have you made. I'm under the (possibly mistaken?) impression that The "Grail" and "Piefecta" type layouts are very sensitive to even minor changes as they have been very precisely put together.
I faintly remember hearing rumblings about Opera needing something different in the "Grail" because it didn't do the bottom padding(either that or the neg margin) so it needed something else (perhaps S & K are the same if that's still true)
probably no help.. if you post the HTML that goes with the CSS above (just the framework should do) someone might be able to help further
Suzy
[edited by: SuzyUK at 6:44 pm (utc) on Feb. 21, 2007]
