Joomla Templates Club 406,261 posts

[eastline Friend eastlineJoin date: August 2008Posts: 13Downloads:0Uploads:5 Thanks: 2]

#140017

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

<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

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


EDIT: problem solved

[Author]

Posts