PDA

View Full Version : Disappearing div in Opera & Safari



cfructose
02-20-2007, 03:54 PM
Goal: latest versions of FF, Opera, Safari, as well as IE6 & 7 compatible CSS layout.

Background: I started with the template dubbed the "Holy Grail" from the site "A List Apart", with which no doubt many of you are familiar.
As various frustrated users reported on their experiences with the supposed cross-browser-compatible 3-column liquid layout CSS, certain fixes, hacks and addornments came to light, all of which I incorporated.
Next I added yet MORE non-semantic divs as "text-wrappers" in order fiddle with z-indexes and achieve the illusion of multiple background images for certain divs.
Then, I added conditional comments to solve the IE bug "z-index is reset to zero when objects are floated within relatively positioned divs".
(You'll see all of that in the code below)

The positive: Everything works like a dream in Firefox, IE6 + IE7.
The negative: right column is invisible in Opera and Safari (background image of right column div not displayed, nr any of the content).


"The Lord helps those who help themselves"

Well, substitute "Lord" for "forum members", and there was never a truer word. I hate posts that seek quick solutions when then poster is too lazy to try, and I wrestled with how to make this post so as to show that I've made an extraordinary amount of effort while keeping the post as concise as possible.

Conclusion: if I described even a fraction of the attempts I've made at fixing my problem, it'd be a small book, so I've opted for simply posting some code in the hope that my problem does not lie in the detail but in some silly oversight that the discerning eye will notice immediately.

Apologies for the long post, and I'll be amazed if someone finds the will to dissect the complexities of what follows, but I've spent literally 6 months trying anything and everything to fix this by myself, and have finally hit a brick wall. Any suggestions whatsoever, and you're a saint.

Again, my expectations here (short of a miracle), are simply that someone might say "Ah! - The problem is obviously..." or "....maybe..."

Note: the code all validates; I've read up in detail on Safari and Opera bugs, but don't see any possible conections; I genuflect in anticipation...



CSS:


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; /* used to be 1800, but it extended too far down in non-IE (I think IE ignores it, which is why I didn't notice) Now it's the same as the IE min-height hack below */
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 (ie fullwidth minus 20 for padding) */
padding: 560px 10px 0px 10px; /* LC padding (top, right, bottom, left) */
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;
}

It's hard for me to know which parts of the code are relevant to the problem, so I deleted extraneous CSS info like background colour etc, and have done the same with obviously irrelevant HTML, but erred on the side of caution and left in anything that MIGHT be the culprit. (That includes some php in the section that follows, which, though highly unlikely to be relevant, was better left in than my risking a php-less re-write just for this post where I may have unwittingly 'written round' the problem).

Incidentally, some of the comment tags will make sense only to those familiar with the "A List Apart - Holy Grail" layout, but I doubt they need to be fuly grasped to solve my problem. Equally, the "margin-bottom: -10000px;" in the "#footer-wrapper", and other such peculiraities in the CSS above are best left explained by http://www.alistapart.com/articles/holygrail

STRUCTURAL HTML:


<div id="container">
<div id="centercolumn" class="column"> <!-- CENTER COLUMN -->
<div style="position: relative; top: 0px; left: 0px; z-index: 2;"> <!-- TEXT WRAPPER firefox neg z-index fix to make multiple background images appear -->
<div class="prop"></div> <!-- IE MIN-HEIGHT HACK PART 1 -->


<?php
echo "<h1 class=\"glow\">$page</h1><h1>$page</h1>"; // print title with shading

if (isset($subpage)) {
echo "<table style=\"position: relative; left: 70px; bottom: 30px;\"><tr><td><img src=\"images/subarrow.jpg\" alt=\"\" title=\"\"/></td><td><h2 class=\"child\">$subpage</h2></td></tr></table>";} // print subarrow + subpage title if applicable

if (isset($non_latin)) {
echo "<p class=\"dimindent\">This page contains $non_latin characters. If they appear as gobbledygook, see <a href=\"help.php\">technical help</a></p>";} // print font warning if applicable

$include_name = basename($_SERVER['PHP_SELF']); // set the name of the data file to include as the same as the root file
if ($page == "About") {include ("text/about.php");} //prints main text data for 'about' page coz root filename is index.php, not the same as data file name
else {include ("text/$include_name");} //prints main text data

if (!isset($short)) {
echo "<a href=\"#top\">[Back to top]</a>";}
?>

<div class="clear"></div> <!-- IE MIN-HEIGHT HACK PART 2 -->
</div> <!-- END text-wrapper firefox neg z-index fix -->


<!-- conditional comments for IE "z-index reset of floats within relatively positioned divs" bug -->

<!--[if IE]>
<img style="position: absolute; z-index: -1; left: 0px; top: -9px;" src="images/cc-top-left.jpg" alt="" title=""/>
<img style="position: absolute; z-index: -1; left: 235px; top: -5px;" src="images/cc-top-middle.jpg" alt="" title=""/>
<img style="position: absolute; z-index: -1; right: -2px; top: -2px;" src="images/cc-top-right.jpg" alt="" title=""/>
<img style="position: absolute; z-index: -1; right: -180px; top: 457px;" src="images/cc-rygg.jpg" alt="" title=""/>
<![endif]-->

<!--[if !IE]>-->
<img style="position: absolute; z-index: 0; left: 0px; top: -9px;" src="images/cc-top-left.jpg" alt="" title=""/>
<img style="position: absolute; z-index: 0; left: 235px; top: -5px;" src="images/cc-top-middle.jpg" alt="" title=""/>
<img style="position: absolute; z-index: 0; right: -2px; top: -2px;" src="images/cc-top-right.jpg" alt="" title=""/>
<img style="position: absolute; z-index: 0; right: -180px; top: 457px;" src="images/cc-rygg.jpg" alt="" title=""/>
<!--<![endif]-->

<!-- END conditional comments for IE z-index bug -->


<div id="cc-top-repeat"></div> <!-- z-index for this graphic is 1 in CSS, so doesn't trigger IE z-index bug -->
</div> <!-- END CENTER COLUMN -->



<div id="leftcolumn" class="column"> <!-- LEFT COLUMN -->
<div style="position: relative; top: 0px; left: 0px; z-index: 2;"> <!-- TEXT WRAPPER firefox neg z-index fix to make background images appear -->

<?php
if ($page == "About") {
echo "<div style=\"position: relative; top: 300px; left: 0px;\">"; // 'top' value moves lc menu farther down page
include ("text/lc.php");
echo "</div>";
}
else include ("text/lc.php");
?> </div> <!-- END text-wrapper firefox neg z-index fix -->
<img id="lc-graphic" src="images/lc.jpg" alt="" title=""/> <!-- has z-index of 1 -->
</div> <!-- END LEFT COLUMN -->



<div id="rightcolumn" class="column"> <!-- RIGHT COLUMN -->

<?php
include ("phpinserts/menu.php");
if (!isset($short) && !($page == "About")) { // don't include ads or rc text on About page or short pages
echo "<div style=\"position: relative; top: 380px; left: 0px; z-index: 2;\"> <!-- TEXT WRAPPER to position ads etc beneath rygg img -->";
include ("text/rc.php");
echo "</div> <!-- END text-wrapper -->"; }
?> </div> <!-- END RIGHT COLUMN -->


From the "text/menu.php" included file:



<!-- Apparent divitis of mainmenu is to absolutely position each menu item allowing for different default fonts on different systems which screw up the alignment of important graphics with the menu -->

<div class="menutext" id="page1">
<?php

$unclickable_low_g = "<span class=\"unclickable\">$page</span>";
$clickable_low_g = "<a class=\"menu\" href=\"index.php\"
onmouseover=\"return overlib
('DESCRIPTION OF PAGE blah blah blah');\"
onmouseout=\"return nd();\">
About</a>";


if (substr($page, 0, 5) == "About") {echo $unclickable_low_g;}
else
{echo $clickable_low_g;}

?>
</div>
<div class="menutext" id="page2">
<?php

$unclickable_a = "<span class=\"unclickable\">$page</span>";
$clickable_a = "<a class=\"menu\" href=\"whats_new.php\"
onmouseover=\"return overlib
('DESCRIPTION OF PAGE blah blah blah');\"
onmouseout=\"return nd();\">
What's New?</a>";


if (substr($page, 0, 5) == "What'") {echo $unclickable_a;}
else
{echo $clickable_a;}

?>
</div>

etc etc


<!-- then submenu - semantically correct list of links, as precise positioning doesn't matter -->

<ul id="smallmenutext">
<li>
<?php

$unclickable = "<span class=\"rc-small-unclickable\">$page</span>";
$clickable = "<a href=\"shop.php\"
onmouseover=\"return overlib
('DESCRIPTION OF PAGE blah blah blah');\"
onmouseout=\"return nd();\">
Shop</a>";


if ($page == "Shop") {echo $unclickable;}
else
{echo $clickable;}

?>
</li>
<li>
etc etc

If anyone waded through all of this, you deserve a big 'thank you' already.