Strange looking header in Firefox

[detlev]

Hi guys,

 

Just got a question, i'm having some problems with firefox and the header of my website. 

 

http://www.linked2you.nl/prestashop

 

The header shows normal in Internet explorer and in chrome. 

 

I've got prestashop 1.5.6.1 

 

I've added a screenshot of my website.

 

Please give me some advise.

 

Thanks.

[vekia]

add header to another <div> and make this div fixed; (not #header) with width:100%;

then in #header use margin:auto; width:980px;

[PrestaToys]

When i Inspect Element in Firefox i can see that div id="header" has the attribute

 

position: fixed; 

 

this seems to be causing the problem, as I "unselect it", the header moves into position.

 

but then the page content moves down which seems to be caused by a top margin: 150px which is in the grid 9 div statement... try making it -60px or whatever you like, to tighten up the page.

 

good luck!

[detlev]

We'll i'm not such a star in changing codes. So how should i change it?

 

Here is the code :

 

<!-- Header -->

<div id="header" class="grid_9 alpha omega" style="position:fixed; background:#FFF;">

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

 <img class="logo" src="{$logo_url}" 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}/>

 

Thanks

[PrestaToys]

Vekia is much more experienced than I am and perhaps his is the better solution, I am not sure.

 

But for mine, just delete position:fixed from style= on the first line.

 

After, you will need to change the margin for the grid_9 style

[vekia]

the question is: you want fixed header? if not, just remove it, if you want - it's necessary to modify the template file a bit. everything depends on it

[detlev]

the question is: you want fixed header? if not, just remove it, if you want - it's necessary to modify the template file a bit. everything depends on it

 

I would like to keep the fixed header. Even with a little less white space underneath the menu. If it works in Firefox than i'm statisfied!

[vekia]

remove position:fixed from <div id="header">

 

before this add another div <div id="myfixedheader">

and after <div id="header"></div> add another </div> closing tag

 

then with css styles add to myfixedheader width:100% position:fixed; display:block; 

[detlev]

We'll i've tried to change it. But i did something wrong. The display is messed up right now. What am i doing wrong?

[vekia]

i checked your page and i don't see there any code that i suggested to use 

[detlev]

it still doens't work with firefox!

 

I did change the code, but everything alligned to the right and it only got worse.

 

Please write the code that i should put in the Header.tpl and in the Global.css

 

Please advise what tot replace exactly, once again i'm nog good with codes but i'm learning,

Edited December 20, 2013 by detlev (see edit history)

[vekia]

but i haven't got any chance to check it how it looks/works. it's more than important, without possibility to check how the code works, it's almost impossible to help