Wrong css or?

HTML & CSS
1

Hoi members,
am working on a site ( www.bistrolafrontiere.com ) . Since a week I noticed that every time you go to another page the upper part of the screen is jumping up and the logo disapperas for a split second and then everything comes back.
Checked already all of the css code, but could not find any error.
May be it is not the CSS but another code ?
Can somebody have a critical eye on this problem?

I would be very thankfull.
Grtz,
jef

2

No problems here (Chrome on Mac). What browser are you using?

3

In some browsers like IE those weird things tent to appear, but can be avoided if you give the element the position:relative;
So
.logo {
font-family: ‘chopinscriptregular’,verdana,arial;
font-size: 90px;
color: #330000;
position:relative;
}

4

Sorry for the late reply. My settings tll me that every time there is a raction, I would receive an e-mail.
Perhaps due to the rain and snow over here, it did not happen. So my excuses for it.

Hoi ralph.m,
I am using and Mozilla, and IE 8 and Chrome.
Chrome is alright. Only the first time it gives a little “flash” effect. But then cache seems to do the job.

Hoi webcosmo,
just tried the code you provided, but still got the same problem.

Any other suggestions???

I got the feeling that every tiùme the browser starts from http://www.bistrolafrontiere.com/index.html instead of …/index.html
Is that possible?? If so, how to avoid??

grtz,
jef

5

Nobody has the golden tip or golden hint???

6

What browser and version do you see this in?

7

Hoio Ericwatson,
thnx for the quick reply.
Am using Firefox 18.0.1, Firefox 18.0.2, IE 8.0.6001.18702 en Chrome 24.0.1312.57m

I’ve set up a site for my wife ( www.alvoge.nl ) with a similar structure, and that 's working wel. No problems in any of the browsers.

Hope you can do something with it

8

Hi,

The only issue I notice is the usual @font-face issues where the normal font is shown first and then the uploaded font replaces when its loaded giving what is commonly called a FOUT (Flash of unstyled Text). Some browsers are better than others but its very noticeable in IE and one of the reasons I avoid @font-face where possible.

I would ensure that first your header area has a height set so that you don’t get a jump in page height when the text is replaced.

You can read more on this here with some [URL=“http://www.webink.com/fout-b-gone/”]possible solutions.

9

Hoi Paul O’B,

thnx for the interesting tips and hints.
This is more worth then I expected.
Was not aware of this “font face problem”.
Tried for a fixed height, but still the same (even if I gave it a height of 200px).
Also tried to put the #header out of the #wrap and in CSS sheet put font face underneath #header
No progress.

Guess it’s better to wait for the next update for Firefox and IE, because Chrome is doing fine.
But still interesting stuff. Again, learned a lot!!

Thnx again,
grtz,
jef

10

I just added a height to the header of 124px and that seems to stop the jumping in IE although you still get the font-changing of course.


#header {
height: 125px;
}

This was only tested via the developer tools and toggling the font on and off but the results should be the same live. Without the height the page jumps up and down but with the height it stays steady.

11

Hoi Paul O’B,

did already a reply yestarday. But there seems to have gone something wrong.
So hereby a second attemp.
Thnx for the advice. Put it in the code and it works fine for IE. Think that the font-changing is more than acceptable.
Firefox still is not going the right way. May be in the future.

Thanks a lot for your advice, and I already mentioned it above: I learned a lot.

Thnx & grtz,
jef