Help! - need to fix error displaying the template in different browser

Hi, I found 3 errors when displaying the template in different browsers:
first - is the thickness of the top line - in Opera browser, it is 2 pixels, in IE, Google Chrome and Firefox do not.

Second - the distance between the Main menu and header - in Opera, Chrome, Firefox it is 60 px, but in IE it is equal to 93 px.

Third - the distance between the top of the page and line (the center of the logo) - in Opera, IE it is equal to 115px, in Chrome it is equal to 114px, and in Firefox only 85px!

I need to design in my background was fixed relative to the logo - but it is not possible with the above errors.
Please, help me solve this problem.

Below I attach screenshots (from http://demo.gavick.com/joomla15/jan2011/index.php) of the listed errors:

Chrome


Opera


IE


Firefox

Is there anybody alive? I beg to comment on my post someone from Gavick team.

Hi

Try to add this code to override.css (remember to allow using of that file in the templae settings)

Code: Select all

#gk-top.topmargin {
    margin-top: 0;
}

#gk-nav {
    margin: 0 auto 60px;
}

This should remove differently interpreted code. Unfotunately I have no idea what You have in mind about the lin at the top of the site. I think it's from browser itself. There is not exen one line in css to determine this part.

teitbite, thank you for your answer!

I used this code, and he decided the third problem (in Firefox) - the distance from the top of the page to center of the logo is now as in other browsers!

But the second problem - the distance from the header to maimenu remained unsolved - in Internet Explorer is still on 33px more than in other browsers.

Can you suggest solutions to this problem?

But the second problem - the distance from the header to maimenu remained unsolved - in Internet Explorer is still on 33px more than in other browsers.

Can you suggest solutions to this problem?

Hi

Please try opening template.css file and find this line:

Code: Select all

#gk-top.topmargin { margin-top: -30px; }

replace with

Code: Select all

#gk-top.topmargin { display: block; margin-top: -30px; }

If all goes well, all browsers will have the same height.

Cheers

Seichinha, unfortunately, the change in #gk-top.topmargin no effect in IE (by the way, I use a clean template Coffe without any changes).

It's not a question of making difference in IE, because IE7, 8 and 9 have the same height as Chrome or Opera, but not as Firefox. So this equals on FF and all other browsers (at least i check it).

This screenshot is from FF4:

screen_2011-04-24.png

Try it (don't forget to clear cache)
Naturally, if you want do decrease margin, you just need to change to bigger negative value.

Cheers

Looks like we're talking about different things - are you talking about the distance between the top of the page and center the logo? Right? But as I wrote earlier, this problem is resolved on the recommendation of teitbite.

I wrote about the problem in the distance between mainmenu and header (in a place where your screenshots inscription BEFORE) - in my first message I brought the screenshots where you can see that IE is a distance equal to 93px, while in other browsers it is only 60px.

I apologize if I do not declare this in English - and I use Google Translate from Russian.

sc-error.jpg

Please answer, how do I solve this problem?

Problem solved!
to solve, I made a override.css this code:

Code: Select all

#gk-nav {
    text-align: center !important;
    margin: 0px 0px 0px 0px !important;
    position: relative !important;
    z-index: 100 !important;
    top : 0px !important; 
    height: 80px !important; 
}

Maybe, Gavick team is to make something similar to a basic style template?