Web Analytics Made Easy -
StatCounter IE7 CSS Bug - CodingForum

Announcement

Collapse
No announcement yet.

IE7 CSS Bug

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • 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
    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;
    }

    Comment


    • #3
      Try adding overflow:auto; to the problem DIV, or clear:both; to the next thing after this problem DIV

      Comment


      • #4
        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.

        Comment


        • #5
          Can you view source the output and post that? Have you validated it?

          Comment


          • #6
            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

            Comment


            • #7
              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.

              Comment


              • #8
                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?

                Comment


                • #9
                  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 a DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

                  Comment


                  • #10
                    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

                    Comment


                    • #11
                      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 {
                      	[COLOR="Red"]/*height: 120px;*/[/COLOR]
                      	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; Apr 7, 2009, 04:13 AM.
                      Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
                      Use a DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

                      Comment


                      • #12
                        FINALLY!!!!
                        Thank you so much man... and btw I'm such an idiot for missing such a mistake :P
                        Seriously, thanks my friend.

                        Comment


                        • #13
                          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.

                          Comment


                          • #14
                            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 a DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

                            Comment


                            • #15
                              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

                              Comment

                              Working...
                              X