Welcome to WebmasterWorld Guest from 54.167.0.111

Forum Moderators: not2easy

Message Too Old, No Replies

Horizontal Navigation Problems

sappears when hovered oThe BG diver, then reappears

     

andrewperk

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

5+ Year Member



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:

<----------HTML------------->

<div id="header">
<ul>
<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>
</ul>
</div>

<----------CSS--------------->

#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;
}

jetboy

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

10+ Year Member



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.

 

Featured Threads

Hot Threads This Week

Hot Threads This Month