2nd problem with nav bar rollover

[cyclingg]

Well, I think I have the nav bar rollover working the way I want; but, now have something else happening in different web browsers.

Firefox – when I click on the nav buttons, sometimes the tiled background image in the body flickers/flashes.

IE – when I click on the nav buttons, the image in the header flickers/flashes.

Google Chrome – when I click on the nav buttons, sometimes the header flickers, sometimes the tiled background image flashes and sometimes both flash.

Safari – There is NO flickering. Yay.

What would cause this flickering/flashing and how to I prevent it?

Thanks.

[cyclingg]

I don’t have a link yet. From Komodo Edit, I view my page in the different browsers.

I was wondering if there is a fix for background images flickering. Or, what could cause this?

I am not sure how to use CodePen and do not know if it is for displaying code online.

[cyclingg]

In Komodo Editor, you can preview your code in your browser. So, I guess in my native browser.

I am going to do more tests after dinner to try to see where the flickering starts.

[cyclingg]

Okay, I will check it out more closely.

Edit: Oh, I don’t think CodePen will help me here. My problem is with the images. I do not see how I can add images in CodePen.

[Paulie_D]

Sure you can you just have to have then online (I use photobucket.

Alternatively, use lorempixel.com

[cyclingg]

Stupid me. I have an ImageShack account just for this. I will try this later today.

Thanks Pualie_D.

[cyclingg]

Okay, I made a CodePen with code for the index and aboutus pages. I only included the header and navigation bar and not the content code. I do not have a problem with the images flickering or moving when pressing the buttons. I will try to add the content code and see what happens.

I will add the link to my pen. I am not sure if this is how I post a link to my pen though; so, I hope it works.

http://cdpn.io/IAxGe

Here is the link to the whole page pen:

http://cdpn.io/AkecB

There is no problem when viewing my pen initially in the browser. But, after clicking between the index and about us buttons, the background does start to move.

Does anyone else see this?

[GroovyMotion]

Hmmm…no issues here with crome 33 and FF 27

[cyclingg]

Hi GroovyMotion. No issues? I use FF 20 (Kaspersky’s Password Manager does not always catches up to FF updates), IE 11, Chrome 33 and Safari 5.1.7.

Would it be my monitors? I did not think they are bad monitors. BenQ GW2750H and BenQ V2400Eco.

This is for my assignment (due today) on creating nav buttons in Photoshop and then using them in a web page. I guess if it is only me seeing this, then I will not worry about it.

Thanks for checking it out for me.

[GroovyMotion]

no sorry, if you click the about us it does flicker. I can’t say about the other links because they point to a non-existing link. I tried to add a transition ease-in and out of a fraction of a second but it doesn’t work since your issue is not on page load.

One small thing, I noticed that you repeat the background definition: background: #B5B598; background-image: url(http://imageshack.com/a/img191/4812/kyws.jpg);

You can shrink it to: background: #B5B598 url(http://imageshack.com/a/img191/4812/kyws.jpg);

edit

[cyclingg]

Ah, thanks about the background definition. I will change that.

I did not add the other pages to my dropbox folder. I thought the about us was enough.

So, you do see the same as I do.

The only browser I do not see this in is Safari 5.1.7. Firefox, Chrome and IE have the flicker.

Also, I did adjust the :active and current states pixels by 2 so that it looks like the inner section of the button is depressed and not the whole button as it is doing now. The outer part stays where the other states are now. I will go and edit the pen now.

[Author]

Posts