Welcome to WebmasterWorld Guest from

Forum Moderators: not2easy

Message Too Old, No Replies

Horizontal Navigation Problems

sappears when hovered oThe BG diver, then reappears

8:19 pm on Feb 8, 2009 (gmt 0)

New User

5+ Year Member

joined:Feb 6, 2009
votes: 0

I have a horizontal navigation that is absolutely positioned inside of my header div. The links are inside of an unordered list.

I have 2 background images; one is applied to the <UL> tag and the other is applied to the actual <a> link inside the list which acts as a separator between all the links(gives it a button appearance). It's just a small 28x2 solid color image, it does not repeat.

When the link is hovered over in IE this separator(nav-separator.jpg) disappears for some reason then comes back. This only happens online, uploaded to the server. This does not happen when I view the page in IE offline, its fine offline. Every time I hover on the link it disappears then comes back, while online on the server.

Any help would be appreciated. Thanks.

Here's the html and css for just the navigation:


<div id="header">
<li><a href="#" id="firstLink">Home</a></li>
<li><a href="#">Link Link1</a></li>
<li><a href="#">Link Li2</a></li>
<li><a href="#">Link Link Lin3</a></li>
<li><a href="#">Link Li4</a></li>
<li><a href="#">Link Link Li5</a></li>
<li><a href="#">Link Link Li6</a></li>
<li><a href="#">Link Link L7</a></li>
<li><a href="#">Link Link 8</a></li>
<li><a href="#">Link Link Link Lin9</a></li>
<li><a href="#">Link Link10</a></li>


#header {
position: relative;
background-color: #000000;
height: 172px;
background-image: url(../image-files/banner.jpg);
background-repeat: no-repeat;
background-position: left top;

#header ul {
padding: 0px;
list-style-type: none;
background-image: url(../image-files/nav-bg.jpg);
background-repeat: repeat-x;
background-position: left top;
position: absolute;
text-align: center;
bottom: 0px;
left: 0px;
margin: 0px;
width: 897px;

#header ul li {
float: left;

#header ul a {
padding-top: 0px;
padding-right: 0.7em;
padding-bottom: 0px;
padding-left: 0.7em;
font-size: 11px;
text-decoration: none;
color: #FFFFFF;
float: left;
display: block;
background-image: url(../image-files/nav-separator.jpg);
background-repeat: no-repeat;
font-weight: bold;
line-height: 2em;

#header #firstLink {
background-image: none;

7:02 pm on Feb 11, 2009 (gmt 0)

Full Member

10+ Year Member

joined:Feb 14, 2005
posts: 266
votes: 0

Yeah, IE6 is a pain. The easy way is to not put background images on to <a>s or any child elements. In your case, put them on your <li>s instead.

A fix touted a few years ago was to put any external JavaScript <script> elements above your CSS in your source. Personal experience is that this makes things better but doesn't fix the problem.

Google for 'stop image flicker' and you can see server-side fixes for IIS and Apache in the first result.

The second result for the same Google search has a JavaScript fix which apparently works.

Not tried these last two though. I prefer to use the first option, and if image rollovers are absolutely necessary, these can be coded with some unobtrusive JavaScript.