Can somebody please look at this with a fresh pair of eyes?
Issue:
On a new
site I’m using the
CSS sprites technique to build the main menu. The background image for this menu is attached to the li element via a css rule (see css file below).
Now, if I open up the site for the first time in FF (2.0.0.16), the background image is rendered last and, maybe as a consequence, the main text is shifted upwards. When the image finally appears, it is located through the text.
However, if I press F5, the page is loaded correctly. Please note that in IE6 and Safari the page is rendered as expected.
This is what I see in FF:
Image of FF rendering
I’ve run out of ideas why this happens (so consistently). Every first time I load the site this happens, but never afterwards. I can simulate this by clearing the cache.
Thanks for listening.
sderuiter
html
<div id="menu">
<ul id="poppenmenu">
<li id="menu1"><a href="/speelzaal/"></a></li>
<li id="menu2"><a href="/login/"></a></li>
<li id="menu3"><a href="/fotos/"></a></li>
<li id="menu4"><a href="/contact/"></a></li>
</ul>
</div>
[/html]#poppenmenu {
width: 300px; height: 110px;
background: url(/assets/images/4-poppen-resize.gif);
margin: 10px auto; padding: 0;
position: relative;}
#poppenmenu li {
margin: 0; padding: 0; list-style: none;
position: absolute; top: 0;
height : 100%; /*sdr*/
}
#poppenmenu li, #poppenmenu a {
height: 110px; display: block;}
#menu1 {left: 0; width: 75px;}
#menu2 {left: 75px; width: 75px;}
#menu3 {left: 150px; width: 75px;}
#menu4 {left: 225px; width: 75px;}
#menu1 a:hover {
background: transparent url(/assets/images/4-poppen-resize.gif)
0 -110px no-repeat;}
#menu2 a:hover {
background: transparent url(/assets/images/4-poppen-resize.gif)
-75px -110px no-repeat;}
#menu3 a:hover {
background: transparent url(/assets/images/4-poppen-resize.gif)
-150px -110px no-repeat;}
#menu4 a:hover {
background: transparent url(/assets/images/4-poppen-resize.gif)
-225px -110px no-repeat;}
☆ A M B ☆
MODX Staff