Header position fixed problem with ie and firefox

[miriama]

Hi,

I am working on customizing the new theme for prestashop 1.4.8.2 and I have the following problem: when I block the section "header" of the web site through the attribute position: fixed so that when I scroll the webpage the header remains fixed in top, google chrome works fine but internet explorer 8 and firefox doesn't work, I mean when I scroll the page the header is fixed but it is shifted to the right.

 

Here in attachment you can find the picture.

 

Does anyone know why?

 

Thank you in advance,

Regards

Miriam

[Médéric]

Hi,

Can we see the site online ?

[miriama]

Hi,

sure, the site is www.ideasoft.org.

 

Thanks

Miriam

[Médéric]

hi,

 

You have to create a div inside the header div with the content.

Because the position:fixed refers to the window, so you have to place the first one fixed and the second one with a margin:auto and the good width to place in the center.

 

like :

 

<div id="header">
<div id="header_content">
 ...
</div>
</div>

 

and place the fist one fixed with a width of 100% :

#header {
  position:fixed;
  top:0;
  left:0;
  width:100%;
  z-index: 99999;
}

then for your content :

#header_content {
  width:979px;
  margin:auto;
}

you can delete the class "grid_9", "alpha", "omega" or use for the code above.

 

I hope this is clear.

Bye

[miriama]

Hi,

thank you very much for your reply.

I have created a div as you told me but the result is not correct as you can see on my web-site www.ideasoft.org.

 

Maybe I made a mistake?

 

 

Thank you in advance,

Regards

Miriam

[Médéric]

the css for the <div id="header"></div> is ok.

 

But you have to edit the header.tpl in your theme for create the new div "header_content" with the css above.

 

it's not the same theme but it's will be :

<!-- the fixed div -->
<div id="header">

  <!-- the center div with the width = width of the page -->
  <div id="header_content">

<a id="header_logo" href="{$link->getPageLink('index.php')}" title="{$shop_name|escape:'htmlall':'UTF-8'}">
 <img class="logo" src="{$img_ps_dir}logo.jpg?{$img_update_time}" alt="{$shop_name|escape:'htmlall':'UTF-8'}" {if $logo_image_width}width="{$logo_image_width}"{/if} {if $logo_image_height}height="{$logo_image_height}" {/if} />
</a>
<div id="header_right">
 {$HOOK_TOP}
 </div>

  </div> <!-- end of header_content -->

</div>

 

don't forget to disable the cache of your site in the administration

[miriama]

Thanks again for your support.

The problem is that I have edited the header.tpl in my theme by adding the new div "header_content" with the css you have wrote to me as follow:

 

<div id="header" class="grid_9 alpha omega">

<div id="header_content">

<a id="header_logo" href="{$base_dir}" title="{$shop_name|escape:'htmlall':'UTF-8'}">

<img class="logo" src="{$img_ps_dir}logo{$lang_iso}.jpg?{$img_update_time}" alt="{$shop_name|escape:'htmlall':'UTF-8'}" {if $logo_image_width}width="{$logo_image_width}"{/if} {if $logo_image_height}height="{$logo_image_height}" {/if} />

</a>

<div id="header_right" class="grid_6 omega">

 

 

 

Then I cleaned the cache and the result is not good as you can see on my web-site. It seem that everything is fixed and when you click on the cart the immage in on the right.....

 

What would be the problem?

 

 

Thanks,

Regards

Miriam

[Médéric]

It's normal you don't close the new one div !!!

 

 

<div id="header">

<div id="header_content">

...

</div> HERE !!!

</div>

<div id="columns">

 

it's will be good after

[miriama]

Perfect!!!! Thank you very much, now it works!!!!

 

There is only one problem, as I click on the cart to expand it the immage of the rest of the cart is on the right......

 

Here in attachment you can find the picture.

 

Can you help me?

 

Thank you again,

Regards

Miriam

[Médéric]

Try to move the block cart after the menu. administration > modules > positions > top

[miriama]

You are great!!!!

 

I changed the position of the cart in the top of the page and now evertything works good!!!!

 

I thank you so much, hope that I have not bothered you too much!!!!

 

 

 

 

 

Regards

Miriam

[Médéric]

No, you're welcome !

 

And for a clear design, maybe you can apply :

 

#header_content {background:white;}

 

and delete some margin-bottom on the css menu.

 

See you

[miriama]

Ah, ok !

 

This I knew because I have already tried to chaged it before!!!

 

Thank you again,

Regards

Miriam

[elmmle]

Merci!