Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Page 1 of 2 12 LastLast
Results 1 to 15 of 23

Thread: IE7 CSS Bug

  1. #1
    Regular Coder
    Join Date
    Jul 2004
    Location
    Lebanon
    Posts
    223
    Thanks
    6
    Thanked 0 Times in 0 Posts

    Exclamation IE7 CSS Bug

    Hello guys,

    I'm using a joomla template and I'm facing a problem when viewing it with IE7. Please have a look at the 2 attached screenshots of Firefox and IE7. The menu isn't displaying in its correct position under the "el-slide" ID.

    I've tried literally everything to solve it out but no luck so far.

    Here is the div tags of index.php

    Code:
    <div id="el-wrapper">
    
    <!-- BEGIN: HEADER -->
    <div id="el-header" class="clearfix">
    
    	<?php 
    		$siteName = $tmpTools->sitename(); 
    		if ($tmpTools->getParam('logoType')=='image') { ?>
    		<h1 class="logo">
    			<a href="index.php" title="<?php echo $siteName; ?>"><span><?php echo $siteName; ?></span></a>
    		</h1>
    	<?php } else { 
    		$logoText = (trim($tmpTools->getParam('logoText'))=='') ? $config->sitename : $tmpTools->getParam('logoText');
    		$sloganText = (trim($tmpTools->getParam('sloganText'))=='') ? JText::_('SITE SLOGAN') : $tmpTools->getParam('sloganText');	?>
    		<h1 class="logo-text">
    			<a href="index.php" title="<?php echo $siteName; ?>"><span><?php echo $logoText; ?></span></a>	
    		</h1>
    		<p class="site-slogan"><?php echo $sloganText;?></p>
    	<?php } ?>
        	<?php if ($this->countModules('top')) { ?>
    	<div id="el-slide" style="height:500px;">
    		<jdoc:include type="modules" name="top" style="raw" />
    	</div>
    	<?php } ?>
    </div>
    <!-- END: HEADER -->
    
    <!-- BEGIN: MAIN NAVIGATION -->
    <div id="el-mainnavwrap">
    
    	<div id="el-mainnav">
    		<?php $elmenu->genMenu (0); ?>
    	</div>
    
    	<?php if ($this->countModules('user4')) { ?>
    	<div id="el-search">
    		<jdoc:include type="modules" name="user4" style="raw" />
    	</div>
    	<?php } ?>
    
    </div>
    
    <?php if ($hasSubnav) { ?>
    <div id="el-subnav" class="clearfix">
    	<?php $elmenu->genMenu (1,1); ?>
    </div>
    <?php } ?>
    <!-- END: MAIN NAVIGATION -->
    
    <div id="el-containerwrap<?php echo $divid; ?>">
    <div id="el-container">
    <div id="el-container2" class="clearfix">
    
      <div id="el-mainbody" class="clearfix">
    	<!-- BEGIN: CONTENT -->
    	<div id="el-content" class="clearfix">
    
    		<jdoc:include type="message" />
    and here is the CSS code of template.css

    Code:
    /* HEADER
    --------------------------------------------------------- */
    #el-header {
    	height: 120px;
    	line-height: normal;
    	position: relative;
    	background:#FFFFFF;
    	
    }
    
    #el-header a {
    }
    
    h1.logo, h1.logo-text {
    	margin: 0;
    	padding: 0;
    	font-size: 200%;
    }
    
    h1.logo a {
    	width: 400px;
    	display: block;
    	background: url(../images/medica.jpg) no-repeat;
    	position: absolute;
    	height: 120px;
    }
    
    h1.logo a span {
    	position: absolute;
    	top: -1000px;
    }
    
    h1.logo-text a {
    	text-decoration: none;
    	outline: none;
    	position: absolute;
    	bottom: 35px;
    	left: 15px;
    }
    
    p.site-slogan {
    	margin: 0;
    	padding: 0;
    	color: #858783;
    	position: relative;
    	bottom: 20px;
    	left: 15px;
    }
    
    /* MAIN NAVIGATION
    --------------------------------------------------------- */
    #el-mainnavwrap {
    	background: url(../images/shadow.gif) repeat-x bottom;
    	height: 37px;
    	position: relative;
    	float:none;
    	width:950px;
    }
    
    #el-mainnav {
    	background: url(../images/grad2.gif) repeat-x top #2C79B3;
    	height: 32px;
    }
    
    #el-mainnav a, #el-subnav a {
    	outline: none;
    }
    
    #el-subnav {
    	display: block;
    	font-size: 92%;
    	border-bottom: 1px solid #E7E8E6;
    	height: 28px;
    }
    
    #el-subnav ul {
    	margin: 0;
    	padding: 0;
    }
    
    #el-subnav li {
    	background: none;
    	display: inline;
    	margin: 0;
    	padding: 0;
    }
    
    #el-subnav li a {
    	display: block;
    	float: left;
    	padding: 0 15px;
    	line-height: 28px;
    	background: url(../images/vline.gif) no-repeat center left;
    }
    
    #el-subnav li.active a,
    #el-subnav li.active a:hover,
    #el-subnav li.active a:active,
    #el-subnav li.active a:focus {
    	font-weight: bold;
    	color: #8BAB32;
    }
    
    #el-subnav li a.first-item {
    	background: none;
    }
    
    /* breadcrumbs */
    #el-pathway {
    	padding: 5px 15px;
    	color: #626A69;
    	font-weight: bold;
    	background: #F8F8F7;
    }
    
    #el-pathway strong {
    	margin-right: 5px;
    }
    
    #el-pathway a {
    	color: #626A69;
    	font-weight: normal;
    }
    
    #el-pathway img {
    	margin: 1px 5px;
    }
    Firefox screenshot


    IE7 Screenshot


    I've been trying to solve this problem for 2 weeks now, please help me

  • #2
    Regular Coder
    Join Date
    Jul 2004
    Location
    Lebanon
    Posts
    223
    Thanks
    6
    Thanked 0 Times in 0 Posts
    I was just testing with firebug on Firefox the "el-slide" ID. Whenever I remove the "float: left;" from it, the menu begins to act just as on IE7. Could this be the key problem?

    Code:
    #el-slide {template.css (line 1016)
    background:#FFFFFF url(../images/background.jpg) no-repeat scroll 0 0;
    float:left;
    height:500px;
    min-height:500px;
    width:950px;
    }

  • #3
    Regular Coder
    Join Date
    Apr 2008
    Posts
    685
    Thanks
    15
    Thanked 105 Times in 104 Posts
    Try adding overflow:auto; to the problem DIV, or clear:both; to the next thing after this problem DIV

  • #4
    Regular Coder
    Join Date
    Jul 2004
    Location
    Lebanon
    Posts
    223
    Thanks
    6
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Scriptet View Post
    Try adding overflow:auto; to the problem DIV, or clear:both; to the next thing after this problem DIV
    Are you talking about #el-slide DIV?
    Anyway, I added "overflow: auto;" and that didn't work, I even added "clear: both;" to the DIV after it which it #el-login and still that didn't work.

  • #5
    New Coder
    Join Date
    Mar 2009
    Posts
    28
    Thanks
    3
    Thanked 4 Times in 4 Posts
    Can you view source the output and post that? Have you validated it?

  • #6
    Regular Coder
    Join Date
    Jul 2004
    Location
    Lebanon
    Posts
    223
    Thanks
    6
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by F-b0mb View Post
    Can you view source the output and post that? Have you validated it?
    this is the source of IE7

    Code:
    <!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="en-gb" lang="en-gb">
    
    <head>
      <meta http-equiv="content-type" content="text/html; charset=utf-8" />
      <meta name="robots" content="index, follow" />
      <meta name="keywords" content="joomla, Joomla" />
      <meta name="description" content="Joomla! - the dynamic portal engine and content management system" />
      <meta name="generator" content="Joomla! 1.5 - Open Source Content Management" />
      <title>Medica</title>
      <link href="/index.php?format=feed&amp;type=rss" rel="alternate" type="application/rss+xml" title="RSS 2.0" />
      <link href="/index.php?format=feed&amp;type=atom" rel="alternate" type="application/atom+xml" title="Atom 1.0" />
      <link href="/templates/el-medica/favicon.ico" rel="shortcut icon" type="image/x-icon" />
      <script type="text/javascript" src="/media/system/js/mootools.js"></script>
      <script type="text/javascript" src="/media/system/js/caption.js"></script>
      <!-- JoomlaWorks "Frontpage Slideshow" v2.0.0 starts here -->
    <style type="text/css" media="all">
    <!--
    	@import "http://medica.seomena.com/modules/mod_fpss/mod_fpss/templates/Default/template_css.php?w=550&h=250&sw=200";
    //-->	
    </style>
    	<style type="text/css" media="all">#navi-outer {display:none;}</style>
    <script type="text/javascript" src="http://medica.seomena.com/modules/mod_fpss/mod_fpss/engines/mootools-comp.js"></script>
    	
    <script type="text/javascript" src="http://medica.seomena.com/modules/mod_fpss/mod_fpss/engines/mootools-fpss-comp.js"></script>
    	
    <script type="text/javascript">
    <!--
    	var fpssPlayText = "Play";
    	var fpssPauseText = "Pause";
    	var crossFadeDelay = 6000;
    	var crossFadeSpeed = 1000;
    	var fpssLoaderDelay = 800;
    	var navTrigger = "click";
    	var autoslide = true;
    	
    	var CTRtransitionText = 1000;	
    	var CTRtext_effect = false;
    	
    //-->
    </script>	
    <!-- JoomlaWorks "Frontpage Slideshow" v2.0.0 ends here -->
    
    
    <link rel="stylesheet" href="http://medica.seomena.com/templates/system/css/system.css" type="text/css" />
    <link rel="stylesheet" href="http://medica.seomena.com/templates/system/css/general.css" type="text/css" />
    <link rel="stylesheet" href="http://medica.seomena.com/templates/el-medica/css/editor.css" type="text/css" />
    <link rel="stylesheet" href="http://medica.seomena.com/templates/el-medica/css/template.css" type="text/css" />
    <link rel="stylesheet" href="http://medica.seomena.com/templates/el-medica/css/typo.css" type="text/css" />
    
    <script language="javascript" type="text/javascript" src="http://medica.seomena.com/templates/el-medica/js/el.script.js"></script>
    
    <!-- Menu head -->
    			<link href="http://medica.seomena.com/templates/el-medica/el_menus/el_moomenu/el.moomenu.css" rel="stylesheet" type="text/css" />
    			<script src="http://medica.seomena.com/templates/el-medica/el_menus/el_moomenu/el.moomenu.js" language="javascript" type="text/javascript" ></script>
    			
    <link href="http://medica.seomena.com/templates/el-medica/css/colors/default.css" rel="stylesheet" type="text/css" />
    
    <!--[if lte IE 6]>
    <style type="text/css">
    .clearfix {height: 1%;}
    img {border: none;}
    </style>
    <![endif]-->
    
    <!--[if gte IE 7.0]>
    <style type="text/css">
    .clearfix {display: inline-block;}
    </style>
    <![endif]-->
    
    </head>
    
    <body id="bd" class="wide fs3" >
    <a name="Top" id="Top"></a>
    <ul class="accessibility">
    	<li><a href="/#el-content" title="Skip to content">Skip to content</a></li>
    	<li><a href="/#el-mainnav" title="Skip to main navigation">Skip to main navigation</a></li>
    	<li><a href="/#el-col1" title="Skip to 1st column">Skip to 1st column</a></li>
    	<li><a href="/#el-col2" title="Skip to 2nd column">Skip to 2nd column</a></li>
    </ul>
    
    <div id="el-wrapper">
    
    <!-- BEGIN: HEADER -->
    <div id="el-header" class="clearfix">
    
    			<h1 class="logo">
    			<a href="/index.php" title="Medica"><span>Medica</span></a>
    		</h1>
    	    		<div id="el-slide" style="height:500px;">
    		    
    <!-- JoomlaWorks "Frontpage Slideshow" v2.0.0 starts here -->
    <div id="fpss-outer-container">
        <div id="fpss-container">
            <div id="fpss-slider">
                <div id="slide-loading"></div>
                <div id="slide-wrapper">
                    <div id="slide-outer">
    					
    	<div class="slide">
    		<div class="slide-inner">
    			<a href="/index.php?option=com_content&amp;view=article&amp;id=38&amp;Itemid=76" class="fpss_img">
    				<span>
    					<span style="background:url(http://medica.seomena.com/components/com_fpss/images/newlife.jpg) no-repeat;">
    						<span>
    							<img src="http://medica.seomena.com/components/com_fpss/images/newlife.jpg" alt="Click on the slide!" />
    						</span>
    					</span>
    				</span>
    			</a>
    			<div class="fpss-introtext" style="display:none;">
    				<div class="slidetext"></div>
    			</div>
    		</div>
    	</div>
    		
    	<div class="slide">
    		<div class="slide-inner">
    			<a href="/index.php?option=com_content&amp;view=article&amp;id=15&amp;Itemid=65" class="fpss_img">
    				<span>
    					<span style="background:url(http://medica.seomena.com/components/com_fpss/images/velashape_1.jpg) no-repeat;">
    						<span>
    							<img src="http://medica.seomena.com/components/com_fpss/images/velashape_1.jpg" alt="Click on the slide!" />
    						</span>
    					</span>
    				</span>
    			</a>
    			<div class="fpss-introtext" style="display:none;">
    				<div class="slidetext"></div>
    			</div>
    		</div>
    	</div>
    		
    	<div class="slide">
    		<div class="slide-inner">
    			<a href="/index.php?option=com_content&amp;view=article&amp;id=44&amp;Itemid=82" class="fpss_img">
    				<span>
    					<span style="background:url(http://medica.seomena.com/components/com_fpss/images/yingyang.jpg) no-repeat;">
    						<span>
    							<img src="http://medica.seomena.com/components/com_fpss/images/yingyang.jpg" alt="Click on the slide!" />
    						</span>
    					</span>
    				</span>
    			</a>
    			<div class="fpss-introtext" style="display:none;">
    				<div class="slidetext"></div>
    			</div>
    		</div>
    	</div>
    		
    	<div class="slide">
    		<div class="slide-inner">
    			<a href="/index.php?option=com_content&amp;view=article&amp;id=39&amp;Itemid=77" class="fpss_img">
    				<span>
    					<span style="background:url(http://medica.seomena.com/components/com_fpss/images/revage_1.jpg) no-repeat;">
    						<span>
    							<img src="http://medica.seomena.com/components/com_fpss/images/revage_1.jpg" alt="Click on the slide!" />
    						</span>
    					</span>
    				</span>
    			</a>
    			<div class="fpss-introtext" style="display:none;">
    				<div class="slidetext"></div>
    			</div>
    		</div>
    	</div>
    		                </div>
                </div>
            </div>        
            <div id="navi-outer">
                <div id="pseudobox"></div>
                <div class="ul_container">
                    <ul>        
                            
                        <li class="noimages"><a id="fpss-container_prev" href="javascript:void(0);" onclick="showPrev();clearSlide();" title="Previous">&laquo;</a></li>
                        
    			<li>
    				<a class="navbutton off navi" href="javascript:void(0);" title="Click to navigate!">
    					<span class="navbar-img"><img src="http://medica.seomena.com/components/com_fpss/images/thumbs/newlife.jpg" alt="Click to navigate!" /></span>
    					<span class="navbar-key">01</span>
    					<span class="navbar-title">New-Life™</span>
    					<span class="navbar-tagline"></span>
    					<span class="navbar-clr"></span>
    				</a>
    			</li>
    		
    			<li>
    				<a class="navbutton off navi" href="javascript:void(0);" title="Click to navigate!">
    					<span class="navbar-img"><img src="http://medica.seomena.com/components/com_fpss/images/thumbs/velashape_1.jpg" alt="Click to navigate!" /></span>
    					<span class="navbar-key">02</span>
    					<span class="navbar-title">VelaShape</span>
    					<span class="navbar-tagline"></span>
    					<span class="navbar-clr"></span>
    				</a>
    			</li>
    		
    			<li>
    				<a class="navbutton off navi" href="javascript:void(0);" title="Click to navigate!">
    					<span class="navbar-img"><img src="http://medica.seomena.com/components/com_fpss/images/thumbs/yingyang.jpg" alt="Click to navigate!" /></span>
    					<span class="navbar-key">03</span>
    					<span class="navbar-title">Ying Yang</span>
    					<span class="navbar-tagline"></span>
    					<span class="navbar-clr"></span>
    				</a>
    			</li>
    		
    			<li>
    				<a class="navbutton off navi" href="javascript:void(0);" title="Click to navigate!">
    					<span class="navbar-img"><img src="http://medica.seomena.com/components/com_fpss/images/thumbs/revage_1.jpg" alt="Click to navigate!" /></span>
    					<span class="navbar-key">04</span>
    					<span class="navbar-title">Revage 670</span>
    					<span class="navbar-tagline"></span>
    					<span class="navbar-clr"></span>
    				</a>
    			</li>
    		                    <li class="noimages"><a id="fpss-container_next" href="javascript:void(0);" onclick="showNext();clearSlide();" title="Next">&raquo;</a></li>
                        <li class="noimages"><a id="fpss-container_playButton" href="javascript:void(0);" onclick="ppButtonClicked();return false;" title="Play/Pause Slide">Pause</a></li>
                    
                            
                    </ul>
                </div>
            </div> 
            <div class="fpss-clr"></div>
        </div>
        <div class="fpss-clr"></div> 
    </div>
    <div style="display:none;">Frontpage Slideshow (version 2.0.0) - Copyright &copy; 2006-2008 by JoomlaWorks</div>
    <!-- JoomlaWorks "Frontpage Slideshow" v2.0.0 ends here -->
    
    
    	</div>
    	</div>
    <!-- END: HEADER -->
    
    <!-- BEGIN: MAIN NAVIGATION -->
    <div id="el-mainnavwrap">
    
    	<div id="el-mainnav">
    		<ul id="el-cssmenu" class="clearfix">
    <li class="active"><a href="http://medica.seomena.com/" class="menu-item0 active first-item" id="menu1" title="Home"><span class="menu-title">Home</span></a></li> 
    <li class="havechild"><a href="/index.php?option=com_content&amp;view=article&amp;id=3&amp;Itemid=2" class="menu-item1" id="menu2" title="Who We Are"><span class="menu-title">Who We Are</span></a><ul><li ><a href="/index.php?option=com_content&amp;view=article&amp;id=5&amp;Itemid=4" class=" first-item" id="menu4" title="Mission & Vision"><span class="menu-title">Mission & Vision</span></a></li> 
    <li ><a href="/index.php?option=com_content&amp;view=article&amp;id=6&amp;Itemid=5" class=" last-item" id="menu5" title="Our Values"><span class="menu-title">Our Values</span></a></li> 
    </ul></li> 
    <li class="havechild"><a href="/index.php?option=com_content&amp;view=section&amp;layout=blog&amp;id=2&amp;Itemid=8" class="menu-item2" id="menu8" title="Our Products"><span class="menu-title">Our Products</span></a><ul><li ><a href="/index.php?option=com_content&amp;view=article&amp;id=45&amp;Itemid=22" class=" first-item" id="menu22" title="Doctor Line"><span class="menu-title">Doctor Line</span></a></li> 
    <li ><a href="/index.php?option=com_content&amp;view=article&amp;id=46&amp;Itemid=43"  id="menu43" title="Beauty Line"><span class="menu-title">Beauty Line</span></a></li> 
    <li ><a href="/index.php?option=com_content&amp;view=article&amp;id=47&amp;Itemid=48" class=" last-item" id="menu48" title="Equipment Line"><span class="menu-title">Equipment Line</span></a></li> 
    </ul></li> 
    <li ><a href="/index.php?option=com_content&amp;view=article&amp;id=7&amp;Itemid=9" class="menu-item3" id="menu9" title="Press & Events"><span class="menu-title">Press & Events</span></a></li> 
    <li ><a href="/index.php?option=com_content&amp;view=article&amp;id=8&amp;Itemid=10" class="menu-item4 last-item" id="menu10" title="Contact Us"><span class="menu-title">Contact Us</span></a></li> 
    </ul>
    	</div>
    
    	
    </div>
    
    <!-- END: MAIN NAVIGATION -->
    I didn't validate anything yet... To be honest, my head is about to explode and I can't find the damn bug

  • #7
    New Coder
    Join Date
    Mar 2009
    Posts
    28
    Thanks
    3
    Thanked 4 Times in 4 Posts
    For starters you have no closing tags on body or html but I think there may be another open tag before that. Just too many divs and spans for me to sift through. Go here and fix the errors.

  • #8
    Regular Coder
    Join Date
    Jul 2004
    Location
    Lebanon
    Posts
    223
    Thanks
    6
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by F-b0mb View Post
    For starters you have no closing tags on body or html but I think there may be another open tag before that. Just too many divs and spans for me to sift through. Go here and fix the errors.
    I just tried that and the errors are with the character "&", I don't think that's the problem here :\

    Is there a fix for this problem?

  • #9
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Hello Snitz,
    Can you put this on a test site for us? Would be easy to fix then...
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #10
    Regular Coder
    Join Date
    Jul 2004
    Location
    Lebanon
    Posts
    223
    Thanks
    6
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Excavator View Post
    Hello Snitz,
    Can you put this on a test site for us? Would be easy to fix then...
    Here's my site [LINK]
    It's still on a subdomain, protected with a password

    user: guest
    pass: guest

  • #11
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Your #el-mainnavewrap is bumped up to the bottom of #el-header which you have set at height:120px;

    Inside #el-header is #el-slide which is 500px high. Doesn't fit in #el-header...FF is letting that image push the menu down, IE is not.

    To fix it, change the height on #el-header,
    found in template.css -
    Code:
    /* HEADER
    --------------------------------------------------------- */
    #el-header {
    	/*height: 120px;*/
    	line-height: normal;
    	position: relative;
    	background:#FFFFFF;
    	
    }
    
    #el-header a {
    }
    
    h1.logo, h1.logo-text {
    	margin: 0;
    	padding: 0;
    	font-size: 200%;
    }
    The other way to fix it would be to close #el-header in the right place. You'll need to add a </div> where #el-header ends and #el-slide begins.
    Last edited by Excavator; 04-07-2009 at 09:13 AM.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #12
    Regular Coder
    Join Date
    Jul 2004
    Location
    Lebanon
    Posts
    223
    Thanks
    6
    Thanked 0 Times in 0 Posts
    FINALLY!!!!
    Thank you so much man... and btw I'm such an idiot for missing such a mistake :P
    Seriously, thanks my friend.

  • #13
    Regular Coder
    Join Date
    Jul 2004
    Location
    Lebanon
    Posts
    223
    Thanks
    6
    Thanked 0 Times in 0 Posts
    Now, I'm facing a new different problem :\

    The frontpage slideshow is set to appear only on the mainpage and therefore when visiting other pages the menu should rearrange to be displayed at the top but it's not doing that anymore. The menu is in fixed position and there's a huge blank space above where the slideshow is displayed.

  • #14
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Quote Originally Posted by Snitz View Post
    Now, I'm facing a new different problem :\

    The frontpage slideshow is set to appear only on the mainpage and therefore when visiting other pages the menu should rearrange to be displayed at the top but it's not doing that anymore. The menu is in fixed position and there's a huge blank space above where the slideshow is displayed.
    Because you set #el-header to height:500px;

    If you don't set a height, it will expand/contract according to what's in it (assuming your clearfix works) and your nav bar should follow. That's why I didn't put a height to your header in my last post.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #15
    Regular Coder
    Join Date
    Jul 2004
    Location
    Lebanon
    Posts
    223
    Thanks
    6
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Snitz View Post
    Now, I'm facing a new different problem :\

    The frontpage slideshow is set to appear only on the mainpage and therefore when visiting other pages the menu should rearrange to be displayed at the top but it's not doing that anymore. The menu is in fixed position and there's a huge blank space above where the slideshow is displayed.
    Ok, I got this covered basing on what you last wrote.
    and it worked like a charm... Thanks again


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •