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.
Results 1 to 9 of 9
  1. #1
    Regular Coder
    Join Date
    Jul 2004
    Location
    Lebanon
    Posts
    223
    Thanks
    6
    Thanked 0 Times in 0 Posts

    Exclamation IE7 css compatibility

    Hello guys,

    I'm having another css compatibility issue with IE7. If you look at the screenshots attached below, you'll notice that the top menu is working fine in FF and IE8 (without clicking the comp. button) and when click the compatibility button, the whole header goes crazy (check ie7.gif). I know there is something wrong in my css code but I can't just figure out it out.

    Anyway, here is the code and I really appreciate your help.
    Code:
    #ja-search {
    	padding-left: 20px;
    	padding-top: 40px;
    	position: absolute;
    	bottom: 30px;
    	right: 0;
    	overflow: visible;
    
    }
    #ja-search2 {
    	padding-left: 0px;
    	background: none;
    	position: absolute;
    	top: 40px;
    	right: 0;
    	height: 100px;
    	border-top: #332C7A solid 3px;
    }
    #ja-search .inputbox {
    	width: 120px;
    	border: 1px solid #333333;
    	padding: 3px 5px;
    	color: #999999;
    	background: #444444;
    	font-size: 92%;
    }
    And these are the tags:
    Code:
    <div id="ja-headerwrap">
    	<div id="ja-header" class="clearfix" style="display: block;">
    
    	
    
    	<?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 endif; ?>
    
    	<?php $tmpTools->genToolMenu(JA_TOOL_FONT, 'png'); ?>
    
    	<?php if($this->countModules('user4')) : ?>
        
    		<div id="ja-search2">
    			<jdoc:include type="modules" name="user4" />
    		</div>
            
    	<?php endif; ?>
        
        <?php if($this->countModules('user6')) : ?>
    		<div id="ja-search">
    			<jdoc:include type="modules" name="user6" />
    		</div>
    	<?php endif; ?>
    	</div>
    </div>
    Attached Thumbnails Attached Thumbnails IE7 css compatibility-ie8-ff.gif   IE7 css compatibility-ie7.gif  
    Last edited by Snitz; 07-15-2009 at 12:08 PM.

  • #2
    Regular Coder
    Join Date
    Sep 2008
    Posts
    106
    Thanks
    27
    Thanked 3 Times in 3 Posts
    I suppose it's a joomla website, right? I'd like to help you but because of the dynamic content I don't understand which div contains each element in your page. It would be better if you post a link of the website.
    Last edited by ktsixit; 07-15-2009 at 11:55 AM.

  • #3
    Regular Coder
    Join Date
    Jul 2004
    Location
    Lebanon
    Posts
    223
    Thanks
    6
    Thanked 0 Times in 0 Posts
    Unfortunately, I don't have any link to provide as I'm working on localhost.

    it's very easy actually: #ja-search2 is for the bottom menu with it's top border (home, services...) and #ja-search is for the upper menu (contact us, newsletter...)

    These are the only 2 divs that are causing the problem, or at least that's what I think.

    And thanks for your reply

  • #4
    Kor
    Kor is offline
    Red Devil Mod Kor's Avatar
    Join Date
    Apr 2003
    Location
    Bucharest, ROMANIA
    Posts
    8,478
    Thanks
    58
    Thanked 379 Times in 375 Posts
    Quote Originally Posted by Snitz View Post
    Unfortunately, I don't have any link to provide as I'm working on localhost.
    At least you should have posted the HTML generated code (the one you may see when opening the View Source / or Page Source)
    KOR
    Offshore programming
    -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*

  • #5
    Regular Coder
    Join Date
    Jul 2004
    Location
    Lebanon
    Posts
    223
    Thanks
    6
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Kor View Post
    At least you should have posted the HTML generated code (the one you may see when opening the View Source / or Page Source)
    I did post the tags of index.php but here is the source code:

    Code:
    <!-- BEGIN: HEADER -->
    <div id="ja-headerwrap">
    	<div id="ja-header" class="clearfix" style="display: block;">
    
    	
    
    			<h1 class="logo">
    			<a href="/gezairi/index.php" title="Gezairi"><span>Gezairi</span></a>
    		</h1>
    	
    			<ul class="ja-usertools-font">
    
    	      <li><img style="cursor: pointer;" title="Increase font size" src="http://localhost/gezairi/templates/ja_purity/images/user-increase.png" alt="Increase font size" id="ja-tool-increase" onclick="switchFontSize('ja_purity_ja_font','inc'); return false;" /></li>
    		  <li><img style="cursor: pointer;" title="Default font size" src="http://localhost/gezairi/templates/ja_purity/images/user-reset.png" alt="Default font size" id="ja-tool-reset" onclick="switchFontSize('ja_purity_ja_font',3); return false;" /></li>
    		  <li><img style="cursor: pointer;" title="Decrease font size" src="http://localhost/gezairi/templates/ja_purity/images/user-decrease.png" alt="Decrease font size" id="ja-tool-decrease" onclick="switchFontSize('ja_purity_ja_font','dec'); return false;" /></li>
    		</ul>
    		<script type="text/javascript">var CurrentFontSize=parseInt('3');</script>
    		
    	    
    		<div id="ja-search2">
    			<ul class="menu sf-menu sf-horizontal"><li id="current" class="active item1"><a href="http://localhost/gezairi/"><span>Home</span></a></li><li class="item68"><span class="separator"><span>|</span></span></li><li class="parent item27"><a href="/gezairi/index.php?option=com_content&amp;view=article&amp;id=19&amp;Itemid=27"><span>Services</span></a><ul><li class="item34"><a href="/gezairi/index.php?option=com_content&amp;view=article&amp;id=22&amp;Itemid=34"><span>Freight Forwarding Services</span></a></li><li class="item54"><a href="#"><span>Logistics Services</span></a></li><li class="item55"><a href="#"><span>Projects &amp; Heavy Lifts</span></a></li><li class="item56"><a href="#"><span>Shipping Agencies</span></a></li><li class="item57"><a href="#"><span>Custom Clearance</span></a></li></ul></li><li class="item61"><span class="separator"><span>|</span></span></li><li class="item2"><a href="/gezairi/index.php?option=com_content&amp;view=article&amp;id=5&amp;Itemid=2"><span>Solutions</span></a></li><li class="item62"><span class="separator"><span>|</span></span></li><li class="item37"><a href="/gezairi/index.php?option=com_content&amp;view=section&amp;id=4&amp;Itemid=37"><span>Portfolio</span></a></li><li class="item64"><span class="separator"><span>|</span></span></li><li class="item41"><a href="/gezairi/index.php?option=com_content&amp;view=section&amp;id=3&amp;Itemid=41"><span>Shipping Agencies</span></a></li><li class="item63"><span class="separator"><span>|</span></span></li><li class="item50"><a href="/gezairi/index.php?option=com_content&amp;view=category&amp;layout=blog&amp;id=1&amp;Itemid=50"><span>Our Network</span></a></li><li class="item65"><span class="separator"><span>|</span></span></li><li class="item48"><a href="/gezairi/index.php?option=com_weblinks&amp;view=categories&amp;Itemid=48"><span>Tools</span></a></li><li class="item66"><span class="separator"><span>|</span></span></li><li class="item49"><a href="/gezairi/index.php?option=com_newsfeeds&amp;view=categories&amp;Itemid=49"><span>News</span></a></li><li class="item67"><span class="separator"><span>|</span></span></li><li class="item53"><a href="#"><span>Company</span></a></li></ul>
    
    		</div>
            
    	    
        		<div id="ja-search">
    			<ul class="menu sf-menu sf-horizontal"><li class="item28"><a href="/gezairi/index.php?option=com_contact&amp;view=contact&amp;id=1&amp;Itemid=28"><span>Contact Us</span></a></li><li class="item58"><span class="separator"><span>|</span></span></li><li class="item29"><a href="#"><span>Register to Newsletter</span></a></li><li class="item59"><span class="separator"><span>|</span></span></li><li class="item18"><a href="#"><span>Sitemap</span></a></li></ul>
    
    		</div>
    		</div>
    
    </div>
    <!-- END: HEADER -->

  • #6
    Regular Coder
    Join Date
    Sep 2008
    Posts
    106
    Thanks
    27
    Thanked 3 Times in 3 Posts
    #ja-search {
    padding-left: 20px;
    padding-top: 40px;
    position: absolute;
    bottom: 30px;
    right: 0;
    overflow: hidden;
    }

    could work.

    Also check
    - the padding which is applied on #ja-search, it's different between the fist and the third css class code.
    - the css code for the ul class="menu sf-menu sf-horizontal" list

  • #7
    Regular Coder
    Join Date
    Jul 2004
    Location
    Lebanon
    Posts
    223
    Thanks
    6
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by ktsixit View Post
    #ja-search {
    padding-left: 20px;
    padding-top: 40px;
    position: absolute;
    bottom: 30px;
    right: 0;
    overflow: hidden;
    }

    could work.

    Also check
    - the padding which is applied on #ja-search, it's different between the fist and the third css class code.
    - the css code for the ul class="menu sf-menu sf-horizontal" list
    The overflow: hidden; didn't add anything and I've been trying to fix the padding accordingly but it just didn't work. Whatever it is that I change, the problem is there. :/

  • #8
    Regular Coder
    Join Date
    Sep 2008
    Posts
    106
    Thanks
    27
    Thanked 3 Times in 3 Posts
    try to specify top distance for the #ja-search div and not bottom. Like
    top: 0;
    right: 0;

  • #9
    Regular Coder
    Join Date
    Jul 2004
    Location
    Lebanon
    Posts
    223
    Thanks
    6
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by ktsixit View Post
    try to specify top distance for the #ja-search div and not bottom. Like
    top: 0;
    right: 0;
    I think it worked, I'm so surprised. I defined the top distance for #ja-search as you suggested with ( top: -40px; ) and it worked

    Thanks alot.


  •  

    Tags for this Thread

    Posting Permissions

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