When you navigate to my menu, the first time you hover over a button it will flicker (after that it’s fine).
I have tried to do a pre-load but no luck getting it to work. This seems to only happen on firefox.
menu css
#page_menu { width: 414px; background: url('images/background.gif') #0c070d repeat-x 0% 0%; }
#page_menu a { background-color: inherit; text-decoration: none; outline: none; }
#page_menu a:hover { background-color: inherit; text-decoration: none; outline: none; }
#page_menu li { float: left; }
#page_menu li a { display: block; width: 101px; background-position: center; background-repeat: no-repeat; }
#page_menu li a:hover { display: block; }
#menu-home a { background-image: url('images/menu-home.jpg'); line-height: 36px; }
#menu-mixes a { background-image: url('images/menu-mixes.jpg'); line-height: 36px; }
#menu-stream a { background-image: url('images/menu-stream.jpg'); line-height: 36px; }
#menu-about a { background-image: url('images/menu-about.jpg'); line-height: 36px; }
#menu-contact a { background-image: url('images/menu-contact.jpg'); line-height: 36px; }
#menu-shows a { background-image: url('images/menu-shows.jpg'); line-height: 36px; }
#menu-archive a { background-image: url('images/menu-archive.jpg'); line-height: 36px; }
#menu-links a { background-image: url('images/menu-links.jpg'); line-height: 36px; }
#menu-home a:hover { background-image: url('images/menu-hover-home.jpg'); }
#menu-mixes a:hover { background-image: url('images/menu-hover-mixes.jpg'); }
#menu-stream a:hover { background-image: url('images/menu-hover-stream.jpg'); }
#menu-about a:hover { background-image: url('images/menu-hover-about.jpg'); }
#menu-contact a:hover { background-image: url('images/menu-hover-contact.jpg'); }
#menu-shows a:hover { background-image: url('images/menu-hover-shows.jpg'); }
#menu-archive a:hover { background-image: url('images/menu-hover-archive.jpg'); }
#menu-links a:hover { background-image: url('images/menu-hover-links.jpg'); }
menu html
<div id="page_menu"> <ul> <li style="padding: 3px 1px 0px 2px;" id="menu-home"><a href="http://www.djprinvale.com"> </a></li> <li style="padding: 3px 1px 0px 1px;" id="menu-mixes"><a href="/downloads"> </a></li> <li style="padding: 3px 1px 0px 1px;" id="menu-stream"><a href="/stream"> </a></li> <li style="padding: 3px 1px 0px 1px;" id="menu-shows"><a href="/shows"> </a></li> </ul> <ul> <li style="padding: 1px 1px 0px 2px;" id="menu-archive"><a href="/album-archive"> </a></li> <li style="padding: 1px 1px 0px 1px;" id="menu-links"><a href="/links"> </a></li> <li style="padding: 1px 1px 0px 1px;" id="menu-contact"><a href="/contact"> </a></li> <li style="padding: 1px 1px 0px 1px;" id="menu-about"><a href="/about"> </a></li> </ul> <div class="clearthis"> </div> </div>
and this is what I tried to do to fix it…
css..
div#preload1 {background: url(images/menu-hover-home.jpg); display: none; }
div#preload2 {background: url(images/menu-hover-mixes.jpg); display: none; }
div#preload3 {background: url(images/menu-hover-stream.jpg); display: none; }
div#preload4 {background: url(images/menu-hover-about.jpg); display: none; }
div#preload5 {background: url(images/menu-hover-contact.jpg); display: none; }
div#preload6 {background: url(images/menu-hover-shows.jpg); display: none; }
div#preload7 {background: url(images/menu-hover-archive.jpg); display: none; }
div#preload8 {background: url(images/menu-hover-links.jpg); display: none; }
in the html page..
<div id="preload1"></div><div id="preload2"></div><div id="preload3"></div><div id="preload4"></div><div id="preload5"></div><div id="preload6"></div><div id="preload7"></div><div id="preload8"></div>
any help?
site:
Use one image with the background position changing. The image should contain you normal and rollover state.
Example:
Top half of the image is normal, lower half is the rollover image.
Have only the top half of the image visible by default, and use:
a:hover {
background: url(path.jpg) 0 -34px no-repeat;
}
This is generally what is used to rollover effects, as it means only one image has to be loaded and doesn’t cause any flicker.
By the way, try and avoid using inline styling. It’s fine for testing/debugging, but content and style should be as separate as possible.
no, it isn’t.
If the website isn’t live, and it’s only temporary, who gives a shit? It makes absolutely 0 difference.
<script language="JavaScript">
function preloader()
{
// counter
var i = 0;
// create object
imageObj = new Image();
// set image list
images = new Array();
images[0]="image1.jpg"
images[1]="image2.jpg"
images[2]="image3.jpg"
images[3]="image4.jpg"
// start preloading
for(i=0; i<=3; i++)
{
imageObj.src=images[i];
}
}
</script>
and then
<body onLoad="javascriptreloader()">
edit: auto-smily faces..its javascript: preloader without any spaces
if you’re resorting to inline css during testing, it’s probably because you don’t understand css specificity and you can’t figure out why a new style isn’t being applied, blah blah blah. or it could be that your css is so disorganized that you can’t use it properly.
either way, that’s bad, and it will most definitely have an impact on the final site. you’re far better off only making style changes in the CSS and resolving issues with the Chrome/Firefox inspection tools.
|
Use one image with the background position changing. The image should contain you normal and rollover state.
Example: Top half of the image is normal, lower half is the rollover image. Have only the top half of the image visible by default, and use: a:hover {
background: url(path.jpg) 0 -34px no-repeat;
}
This is generally what is used to rollover effects, as it means only one image has to be loaded and doesn’t cause any flicker. |
I agree with this, making a sprite with all your images in one file prevents things like the flicker and helps reduce requests to the server.
|
if you’re resorting to inline css during testing, it’s probably because you don’t understand css specificity and you can’t figure out why a new style isn’t being applied, blah blah blah. or it could be that your css is so disorganized that you can’t use it properly.
either way, that’s bad, and it will most definitely have an impact on the final site. you’re far better off only making style changes in the CSS and resolving issues with the Chrome/Firefox inspection tools. |
People work in different ways. Personally, I never use inline styling, but a colleague of mine always does his debugging by applying styles inline, then organises it all to proper stylesheets afterwards.
It’s an awkward way of working, but it works for him, and his finished websites are always pretty well coded.
|
People work in different ways. Personally, I never use inline styling, but a colleague of mine always does his debugging by applying styles inline, then organises it all to proper stylesheets afterwards.
It’s an awkward way of working, but it works for him, and his finished websites are always pretty well coded. |
maybe he just doesn’t have a good split-view IDE? WebStorm is pretty awesome. Even Notepad++ does it, though.