[Solved] How to use overflow and z-index styles in FF simultaneously?
Enthusiast
Posted: Wed, 2008-07-23 14:57
Working with Joomla. I have a drop menu that at times needs to extend my template parameters (outside the wrapper). I need my outer wrap (#outWrap class) background to extend all the way down the page and not get cut off. But, by applying the "overflow:hidden" class I'm not able to utilize my drop menu properly.
So my problem is I can't seem to have both the z-index and overflow:hidden working together! But I need them too. 
Is there a work around for this? Please advise, thanks...
Here is my "index.php" code:
<?php
/**
* @copyright Copyright (C) 2005 - 2007 Open Source Matters. All rights reserved.
* @license GNU/GPL, see LICENSE.php
* Joomla! is free software. This version may have been modified pursuant
* to the GNU General Public License, and as distributed it includes or
* is derivative of works licensed under the GNU General Public License or
* other free or open source software licenses.
* See COPYRIGHT.php for copyright notices and details.
*/
$live_site = $mainframe->getCfg('live_site');
$path = $this->baseurl.'/templates/'.$this->template;
$menu_name_top = "topmenu";
$menu_name_left = "keyconcepts";
$menu_name_right = "topmenu";
$mtype = "moomenu";
$moo_bgiframe = ($this->params->get("moo_bgiframe'","0") == 0)?"false":"true";
$moo_delay = $this->params->get("moo_delay", "500");
$moo_duration = $this->params->get("moo_duration", "700");
$moo_fps = $this->params->get("moo_fps", "300");
$moo_transition = $this->params->get("moo_transition", "Back.easeOut");
defined( '_JEXEC' ) or die ( 'Restricted access' );
define( 'YOURBASEPATH', dirname(__FILE__) );
JHTML::_( 'behavior.mootools' );
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php echo $this->language; ?>" lang="<?php echo $this->language; ?>" dir="<?php echo $this->direction; ?>">
<head>
<jdoc:include type="head" />
<?php
require(YOURBASEPATH .DS."menu_tools.php");
?>
<link rel="stylesheet" href="<?php echo $this->baseurl; ?>/templates/<?php echo $this->template; ?>/css/template.css" type="text/css" />
<link rel="stylesheet" href="<?php echo $this->baseurl; ?>/templates/<?php echo $this->template; ?>/css/moomenu.css" type="text/css" />
<link rel="stylesheet" href="<?php echo $this->baseurl; ?>/templates/<?php echo $this->template; ?>/css/horiz-menu.css" type="text/css" />
<!--[if lte IE 6]>
<link href="<?php echo $this->baseurl; ?>/templates/<?php echo $this->template; ?>/css/ie6.css" rel="stylesheet" type="text/css" />
<![endif]-->
<!--[if lte IE 7]>
<link href="<?php echo $this->baseurl; ?>/templates/<?php echo $this->template; ?>/css/ie.css" rel="stylesheet" type="text/css" />
<![endif]-->
<?php if($this->params->get('show_effects')) : ?>
<script type="text/javascript" src="<?php echo $this->baseurl; ?>/templates/<?php echo $this->template; ?>/js/<?php echo $this->params->get('color_variation'); ?>.js"></script>
<?php if( $this->params->get( 'modules_start') == 'open' ) :?>
<script type="text/javascript" src="<?php echo $this->baseurl; ?>/templates/<?php echo $this->template; ?>/js/site.js"></script>
<?php endif; ?>
<?php endif; ?>
</head>
<body>
<div id="outerWrap" style="z-index:1">
<div id="wrapper" style="z-index:1;">
<!-- TOP MENU -->
<div id="navBar">
<!-- SEARCH -->
<jdoc:include type="modules" name="user4" />
<div id="horiz-menu" class="<?php echo $mtype; ?>">
<?php if($mtype != "module") : ?>
<?php echo $topnav; ?>
<?php else: ?>
<jdoc:include type="modules" name="dropmenu" style="fx" />
<?php endif; ?>
</div>
</div>
<div class="clear"></div>
<div id="logo" style="z-index:1"><a href="index.php"><img src="<?php echo $path ?>/images/logo.jpg" alt="" /></a></div>
<div id="topRight" style="z-index:1">
<!-- Newcomers Banner -->
<jdoc:include type="modules" name="user7" style="fx" />
<!-- Get Connect Banner -->
<jdoc:include type="modules" name="user8" style="fx" />
<!-- Events Banner -->
<jdoc:include type="modules" name="user9" style="fx" />
<jdoc:include type="modules" name="user5" style="fx" />
</div>
<div class="clear"></div>
<div id="pathBar">
<!-- BREADCRUMBS -->
<div id="breadcrumb"><jdoc:include type="module" name="breadcrumbs" /></div>
</div>
<jdoc:include type="modules" name="user6" />
<div class="clear"></div>
<?php if ($this->countModules ('left')) { ?>
<div id="leftColumn"><jdoc:include type="modules" name="left" style="fx" /></div>
<div id="mainRight">
<div id="contTp"></div>
<div class="clear"></div>
<div id="mainContent"><jdoc:include type="message" /><jdoc:include type="component" /></div>
<div id="contBt"></div>
</div><!--END RIGHT CONTENT -->
<?php }else{ ?>
<div id="mainFull"><jdoc:include type="message" /><jdoc:include type="component" /></div>
<?php } ?>
</div><!--END TEMPLATE WRAPPER-->
</div> <!--END OUTER WRAP-->
<div class="clear"></div>
<jdoc:include type="modules" name="user11" style="fx" />
<div class="clear"></div>
<div id="footer">
<!-- FOOTER INFO -->
© 2008 | <a href="http://www.joomla.org" target="new">Joomla</a> is Free Software released under the GNU/GPL License.
</div>
<jdoc:include type="modules" name="debug" />
</body>
</html>
And here is my "template.css" [We are just looking at the #outerWrap" class code:
@import url(reset.css);
/*_______________GENERAL SETUP________________*/
body { font-size:76%; font-family:Tahoma, Arial, sans-serif; background:#5D705A url(../images/background.jpg) top repeat-x fixed; color:#4D380F }
html { height:100.1% }
body, td { line-height:130% }
a { color:#0A77AA }
a:hover { color:#0A5172 }
/*___________________MAIN LAYOUT________________*/
#outerWrap { background:url(../images/outer-wrap.png) repeat-y; overflow:hidden; width:938px; margin:0 auto }
#wrapper { width:920px; margin:0 auto; }
#logo { width:320px; height:200px; float:left; position:relative; border:0; }
#topRight { height:200px; width:600px; float:right; position:relative; background:url(../images/top-right.jpg) no-repeat top; }
#randomBanner {float:left; position:relative; width:625px; margin:30px 18px 20px 20px !important; margin:30px 18px 20px 10px }
#navBar { background:#191410; height:40px; width:100%; padding:5px 0 }
#pathBar { background:#191410; height:20px; width:100%; }
#breadcrumb { float:right; position:relative; font-size:0.9em; color:#fff; margin-right:15px }
#mainRight { width:670px; float:right; position:relative }
#mainFull { width:890px; padding:15px; }
#mainContent { margin:0 auto; width:90%; background:#fff; padding:12px }
#contTp { background:url(../images/content-tp.gif) repeat-x top; height:30px; margin:10px auto 0 auto; width:627px; }
#contBt { background:url(../images/content-bt.gif) repeat-x; height:37px; margin:0 auto 15px auto; width:627px; }
#leftColumn { width:250px; float:left; position:relative; background:#191410 }
#footer { width:920px; height:82px; margin:10px auto; text-align:center; font-size:0.9em; color:#fff }
#footer a { color:#F0EBD2 }
/*__________VERTICAL SIDE MENU STYLES________*/
ul.menu { margin:0; padding:0; z-index:50 !important }
ul.menu li { list-style:none; margin:0; padding:0; z-index:50 !important }
ul.menu span { display:block; height:18px; line-height:18px; padding-left:0 }
ul.menu a { display:block; background:url(../images/menu-list.gif) left no-repeat; font-weight:bold; margin:0 0 0 3px; text-decoration:none; cursor:pointer }
ul.menu a:hover { background:url(../images/menu-list.gif) left no-repeat }
ul.menu ul { margin-left:15px; padding:0 }
ul.menu ul a { text-indent:0; z-index:50 !important; cursor:pointer }
ul.menu ul li a { text-align:left; margin:0 }
ul.menu li.active li a:hover { cursor:pointer }
ul.menu li li { padding:0; margin:0; z-index:50 !important }
ul.menu li a { padding-left:10px; z-index:50 !important }
ul.menu li.active a { text-decoration: none; z-index:50 !important }
ul.menu li a:hover, ul.menu li.active a:hover, ul.menu li.active li a:hover { text-decoration:underline }
ul.menu li.active li a { background:url(../images/menu-list.gif) left no-repeat; margin-left:5px; padding-left:10px; z-index:50 !important; text-decoration:inherit; font-weight:normal } /* submenu link color */
/*_________END VERTICAL SIDE MENU STYLES________*/
/*__________MODULE STYLES________*/
/* DEFAULT MODULES (position- right) */
.moduletable, .moduletable_menu, .moduletable_text { padding:0 0 14px 0; margin:0 0 1px 0; width:100%; color:#fff }
.moduletable h3, .moduletable_menu h3, .moduletable_text h3 { padding:10px 0 5px 15px; color:#fff; font-size:1.2em; font-weight:bold }
.moduletable a, .moduletable_menu a, .moduletable_text a { color:#DFD87A }
.moduletable div div, .moduletable_menu div div, .moduletable_text div div { background:none; padding:0 13px;}
.pollstableborder, .poll { text-align:left; width:auto }
.poll td { margin:0; padding:0 }
.moduletable .bannergroup, .moduletable_text .bannergroup_text { padding:0; margin:0; width:100% }
#latest_events_content div { text-indent:0; margin:0; padding:0; width:100% } /* Extra class for "mod_gcalendar_latest", if installed */
/*SERVICE TIMES MODULE (user 5) */
.moduletable_services { /* module class code for position "user 5" */
width:230px;
background:url(../images/services.gif) no-repeat;
color:#fff;
float:right;
position:relative;
margin:30px 20px 20px 0;
height:222px;
display:inline
}
.moduletable_services h3 { padding:20px 0 0 14px }
.moduletable_services a { color:#fff }
.moduletable_services .cont { height:160px; width:85%; overflow:auto; color:#fff; padding:0 5px 0 15px }
/*GREY MODULE (right) */
.moduletable_grey { padding:0 0 15px 0; margin:0 0 1px 0; background:#000 url(../images/module-bg.gif) left repeat-y; width:100%; color:#fff }
.moduletable_grey div div { background:none; padding:0 13px;}
.moduletable_grey a { color:#DFD87A }
.moduletable_grey h3 { padding:10px 0 5px 15px; color:#fff; font-size:1.2em; font-weight:bold }
/*GREEN MODULE (right) */
.moduletable_green { padding:0 0 15px 0; margin:0 0 1px 0; background:#000 url(../images/mod-green-bg.gif) left repeat-y; width:100%; color:#fff }
.moduletable_green div div { background:none; padding:0 13px;}
.moduletable_green a { color:#DFD87A }
.moduletable_green h3 { padding:10px 0 5px 15px; color:#fff; font-size:1.2em; font-weight:bold }
/*WELCOME BANNER MODULE (user 7) */
.moduletable_welcome { background:none; padding:0; margin:0; width:670px; height:155px; float:left }
.moduletable_welcome div div { background:none; padding:0;}
.moduletable_welcome .cont { margin:0; padding:0 }
/*WELCOME BANNER ALTERATION MODULE (user 7) - This banner you can type your own text on top of verses the other that is graphical */
.moduletable_welcome2 { background:#000 url(../images/welcome2.jpg) no-repeat; padding:0; margin:0; width:670px; height:155px; float:left; color:#fff; font-size:1.2em }
.moduletable_welcome2 h3 { padding:20px 0 0 14px }
.moduletable_welcome2 a { color:#fff }
.moduletable_welcome2 div div { height:80px; width:90%; overflow:auto; color:#fff; padding:0 20px }
.moduletable_welcome2 div {margin-top:60px}
/*NEWCOMERS BANNER MODULE */
.moduletable_newcomers { padding:0; margin:0; width:220px; float:left; position:relative; height:157px; background:none }
.moduletable_newcomers div div { background:none; padding:0;}
.moduletable_newcomers .cont { margin:0; padding:0 }
/*EVENTS BANNER MODULE */
.moduletable_calendar { padding:0; margin:0; width:225px; float:left; position:relative; height:157px; background:none }
.moduletable_calendar div div { background:none; padding:0;}
.moduletable_calendar .cont { margin:0; padding:0 }
/*CONNECT BANNER MODULE */
.moduletable_connect { padding:0; margin:0; width:225px; float:left; position:relative; height:157px; background:none }
.moduletable_connect div div { background:none; padding:0;}
.moduletable_connect .cont { margin:0; padding:0 }
/*LOGIN MODULE */
.moduletable_login { padding:0; margin:1px auto; height:100px; width:934px; background:url(../images/login.gif) center no-repeat; color:#fff; font-size:0.9em }
.moduletable_login div div { background:none; padding:0; float:right; display:inline }
.moduletable_login .cont { padding:15px 45px 0 0; margin:0; display:inline }
.moduletable_login li, .moduletable_login p { list-style:none; float:left; margin:0 7px 0 0 }
.moduletable_login a { color:#fff }
/* Note: If positioned in the right column, remove the margin from these styles */
#modlgn_remember { width:20px; border:none; margin:15px 0 0 0 }
#form-login .button { margin:15px 0 0 0 }
/*____________END MODULE STYLES______________ */
/*________________GENERAL STYLES_________________*/
.left { float:left; position:relative }
.right { float:right; position:relative }
.clear { clear:both }
.clear-l { clear:left }
.clear-r { clear:right }
.spacer { height:10px }
hr { height:1px; color:#D1C0A0 }
/* Use imgRight and imgLeft classes for spacing, alignment, and image borders. */
/*Image Styles*/
.contentpaneopen img { margin:10px; border:3px double #ccc }
.contentpaneopen .buttonheading img { padding:0; margin:0 }
.buttonheading a { margin:0 2px }
td.buttonheading img { border:none; margin:0 2px; padding: 0 }
.imgRight { float:right; position:relative; border:3px double #ccc }
.imgLeft { float:left; position:relative; border:3px double #ccc }
.img { border:3px double #ccc }
/*End Image Styless*/
.createdate, .small, .modifydate, .pagenavcounter { font-size:0.9em; padding:2px 0; color:#236C8C }
table.contentpaneopen, table.contentpane { width:99%; margin:auto }
table.contentpaneopen fieldset { margin-top:15px; border-bottom:1px dotted #ccc; padding-bottom:7px; width:98% }
.contentpane li { margin-bottom:8px; border-bottom:1px solid #ccc; padding-bottom:5px }
td.contentdescription { padding:8px; }
.componentheading, .contentheading, .contentheading td { font-size:1.5em; color:#115546; padding:0; margin:0 }
.componentheading { margin:0; padding:0 0 7px 0; border-bottom:1px dotted #115546 }
.button { width:68px; height:20px; border:none; padding:0; margin:5px 0 0 0; color:#342618; font-size:0.9em; background:url(../images/button.png) no-repeat }
a.readon { color:#fff; background:url(../images/read.gif) no-repeat; display:block; width:100px; height:40px; padding:2px 0 4px 0; font-weight:bold; text-decoration:none; text-align:center; float:right }
a.readon:hover { color:#fff; background:url(../images/read-h.gif) no-repeat }
.article_separator { display:block; height:2px; margin:3px 0; width:100% }
.article_column { }
.column_separator { border-left:1px dotted #E7DECD; padding-left:10px; }
.pagenav { font-size:1em }
#searchForm .button { margin-left:10px }
.inputbox { border:1px solid #ccc; width:auto }
#modlgn_remember { width:20px; border:none }
.search .inputbox { background:#231409; border:none; color:#fff; display:block !important; display:inline; width:200px; height:20px; padding:2px 9px; margin:7px 5px 0 5px; float:left; position:relative; font-size:0.9em}
h1 { font-size:1.4em }
h2 { font-size:1.3em }
h3 { font-size:1.2em }
h4 { font-size:1.1em }
/*___________________Table View______________*/
td.sectiontableheader { background:#D8DCB0; border-right:1px dotted #fff; padding:5px 10px; font-weight:bold; }
td.sectiontableheader a { text-decoration:none; }
tr.sectiontableentry1 td { padding:5px; }
tr.sectiontableentry2 td { padding:5px; }
tr.sectiontableentry2 { }
/*_______________EXTRAS __________________*/
#upcoming_events_content { padding:0 0 15px 0 }
/* System Standard Messages */
#system-message { margin-bottom:20px; }
#system-message dd.message { background:#C3D2E5 url(../../system/images/notice-info.png) 4px center no-repeat;}
/* System Error Messages */
#system-message dd.error { color: #c00; background: #E6C0C0 url(../../system/images/notice-alert.png) 4px center no-repeat; border-top: 3px solid #DE7A7B; border-bottom: 3px solid #DE7A7B; margin:0px; padding:10px 10px 10px 30px; text-indent:0px;}
/* System Notice Messages */
#system-message dd.notice { color: #c00; background: #EFE7B8 url(../../system/images/notice-note.png) 4px center no-repeat; border-top: 3px solid #F0DC7E; border-bottom: 3px solid #F0DC7E; margin:0px; padding:10px 10px 10px 30px; text-indent:0px;}
#system-message dd.notice ul li, #system-message dd.error ul li, #system-message dd.message ul li { background:none }
/* Component Specific Fixes */
#component-contact table td { padding: 2px 10px }
#component-contact img { border:none; margin:0; padding:0 }
Enthusiast
Posts: 248
Joined: 2008-07-18
Location: US
Have you tried the "easy
Posted: Wed, 2008-07-23 16:53
Have you tried the "easy clearing" method rather than overflow:hidden?
#outerWrap:after { content:"."; display:block; height:0; clear:both; visibility:hidden; } #outerWrap {display:inline-block;} /* Hide from IE Mac \*/ #outerWrap {display:block;} /* End hide from IE Mac */ * html #outerWrap {height:1px;}/*for IE6 and down*/Enthusiast
Posts: 123
Joined: 2007-01-04
Thanks, but doesn't seem to work...
Posted: Wed, 2008-07-23 17:09
When I tried using your code sample (including my background image repeat-y in it) the background completely dissappears.
Am I missing something?
For now, I have placed my outerWrap background in a table. This works, but I'd rather stick to a div layer. Please advise.
Enthusiast
Posts: 248
Joined: 2008-07-18
Location: US
The only advice I can
Posted: Wed, 2008-07-23 17:18
The only advice I can provide is to wait awhile and see if another member of the forum has a working solution for you...
Not my code, btw:
http://www.positioniseverything.net/easyclearing.html
Enthusiast
Posts: 123
Joined: 2007-01-04
Thanks, I got it working now!
Posted: Wed, 2008-07-23 17:30
After reviewing the link you provided, I realized I needed to add my background image in a separate #outerWrap code. The first time I tried it, I had placed my bg in the #outerWrap:after... Duh.
Sorry about that. Thank for your help!
NEW CODE:
#outerWrap { background:url(../images/outer-wrap.png) repeat-y; width:938px; margin:0 auto; } #outerWrap:after { content:"."; display:block; height:0; clear:both; visibility:hidden; } #outerWrap {display:inline-block;} /* Hide from IE Mac \*/ #outerWrap {display:block;} /* End hide from IE Mac */ * html #outerWrap {height:1px;}/*for IE6 and down*/