[Solved] How to use overflow and z-index styles in FF simultaneously?

4 replies [Last post]

Wed, 2008-07-23 14:57

smk2007

Offline

Enthusiast

Last seen: 12 years 7 weeks ago

Timezone: GMT-8

Joined: 2007-01-04

Posts: 135

Points: 7

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") == <img src="https://csscreator.com/sites/all/modules/smileys/packs/Roving/innocent.png" title="Innocent" alt="Innocent" class="smiley-content" />?"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 -->
        &copy; 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 }

Tags:

Styling CMS and Social Sites

Wed, 2008-07-23 16:53

David Laakso

Offline

Enthusiast

Last seen: 14 years 32 weeks ago

Joined: 2008-07-18

Posts: 265

Points: 0

Have you tried the "easy

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*/

Wed, 2008-07-23 17:09

smk2007

Offline

Enthusiast

Last seen: 12 years 7 weeks ago

Timezone: GMT-8

Joined: 2007-01-04

Posts: 135

Points: 7

Thanks, but doesn't seem to work...

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.

Wed, 2008-07-23 17:18

David Laakso

Offline

Enthusiast

Last seen: 14 years 32 weeks ago

Joined: 2008-07-18

Posts: 265

Points: 0

The only advice I can

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

Wed, 2008-07-23 17:30

smk2007

Offline

Enthusiast

Last seen: 12 years 7 weeks ago

Timezone: GMT-8

Joined: 2007-01-04

Posts: 135

Points: 7

Thanks, I got it working now!

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. :rolleyes:

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*/

[Solved] How to use overflow and z-index styles in FF simultaneously?

Have you tried the "easy

Thanks, but doesn't seem to work...

The only advice I can

Thanks, I got it working now!

User login

Navigation