Member Avatar for drugoholic

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.

#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:

<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>
ie7.gif 31.75 KB ie8-ff.gif 26.44 KB
  • 3 Contributors
  • 6 Replies
  • 117 Views
  • 7 Hours Discussion Span
  • Latest Post Latest Post by drugoholic

Dani AI

Generated

IE8's Compatibility View (which emulates IE7) usually exposes layout/containing-block and "hasLayout" problems rather than a simple missing width. Since 's size suggestion and 's selector hacks didn't help, and already tried a conditional .clearfix tweak, the most reliable fixes are to (a) make the header the positioned containing block for absolutely positioned children, (b) trigger hasLayout in IE7, and (c) avoid conflicting anchors like using both top and bottom on the same absolute element.

Make the header the reference frame and give IE7 a layout to work with. Also use a robust clearfix so floated logo/menu elements don't collapse under the absolute modules. Example CSS to add (place in your main stylesheet or an IE-only block):

#ja-header {
  position: relative;
  zoom: 1; /* triggers hasLayout in IE6/7 */
}

.clearfix:after {
  content: "";
  display: table;
  clear: both;
}
.clearfix {
  zoom: 1; /* extra hasLayout safety for older IE */
}

Additional practical tips:

  • Avoid anchoring an absolute element with both top and bottom — pick one. IE7 can calculate height inconsistently if both are used.
  • Give overlapping absolute boxes explicit z-index values so stacking is predictable.
  • Confirm a standards doctype (no quirks mode). In IE8 press F12 to check Document Mode when you toggle Compatibility View.
  • Debug by temporarily outlining elements (colored borders/backgrounds) and by reducing the header to a minimal test case to isolate which rule causes the shift.

If these steps don't fix it, produce a tiny standalone HTML/CSS test that reproduces the break — that will quickly reveal whether it is positioning, floats, or an inherited width/line-height from the Joomla markup.

Recommended Answers

All 6 Replies

Member Avatar for dipak_passion

At first glance its seems that height/width issues are there, assign height and width, it may help.

Member Avatar for drugoholic

That didn't help :/

Member Avatar for dipak_passion

then please paste the URL here if you have.

regards.

Member Avatar for drugoholic

then please paste the URL here if you have.

regards.

I'm working on my localhost so...

Member Avatar for guru12

Hi

Please use the following and wriite the css code for IE7

/* This code has highest priority in IE7 */

	*+html.(or)#class/Id name {
		
	}


/* This code has highest priority in IE6 */
	*html .(or)#class/Id name {
		
	}
Member Avatar for drugoholic

Hi

Please use the following and wriite the css code for IE7

/* This code has highest priority in IE7 */

*+html.(or)#class/Id name {

}


/* This code has highest priority in IE6 */
*html .(or)#class/Id name {

}

Thanks and regards

http://www.joomla-web-designer.com/

I have a special IE7 tag and it's still not doing any good. Here it is;

<!--[if gte IE 7.0]>
<style type="text/css">
.clearfix {display: block;}
</style>
<![endif]-->
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.