Header gap

Hi all there:

http://alzira.vferrer.com/

My problem is that if I browse the page in a computer with a high resolution, e.g. 1980x1020, then the header is shown correctly.

first.jpg

But if the resolution is smaller, e.g. 1024x768 ¡, then a gap is created between the menu and the header as you can see:

1024.jpg

Any idea of how can solve this problem?

thanks a lot!

I also have the same problem. Version of the template YourShop 2.9.1, CMS Joomla 2.5.4.

My solution.
file site.com/templates/gk_yourshop/layouts/default.php
Code:

Code: Select all

<div id="gkTop">
    <?php if(isset($_COOKIE['gkGavernMobile'.$tpl_name]) &&
    $_COOKIE['gkGavernMobile'.$tpl_name] == 'desktop') : ?>
    <div class="mobileSwitch gkWrap">
    <a href="javascript:setCookie('gkGavernMobile<?php echo $tpl_name; ?>', 'mobile', 365);window.location.reload();"><?php echo JText::_('TPL_GK_LANG_SWITCH_TO_MOBILE'); ?></a>
    </div>
    <?php endif; ?>
   <?php $this->loadBlock('logo'); ?>
    </div>
    </div>

Changed for:

Code: Select all

<div id="gkTop">
    <?php if(isset($_COOKIE['gkGavernMobile'.$tpl_name]) &&
    $_COOKIE['gkGavernMobile'.$tpl_name] == 'desktop') : ?>
    <div class="mobileSwitch gkWrap">
    <a href="javascript:setCookie('gkGavernMobile<?php echo $tpl_name; ?>', 'mobile', 365);window.location.reload();"><?php echo JText::_('TPL_GK_LANG_SWITCH_TO_MOBILE'); ?></a>
    </div>
    <?php endif; ?>
   <?php $this->loadBlock('logo'); ?>
    </div>

file [b]site.com/templates/gk_yourshop/css/template.css[b]
Code:

Code: Select all

h1#gkLogo a.cssLogo {
   background: url("../images/style1/logo.png") no-repeat scroll 0 0 transparent;
   display: block;
   height: 129px;
   margin: 0;
   text-indent: -999em;
   width: 1000px;

Changed for:

Code: Select all

h1#gkLogo a.cssLogo {
   background: url("../images/style1/logo.png") no-repeat scroll 0 0 transparent;
   display: block;
   height: 129px;
   margin: 0 0 0 40px;
   text-indent: -999em;
   width: 1000px;

It helps me, maybe it can help you