Welcome to WebmasterWorld Guest from 3.82.52.91

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

10+ Year Member

joined:Feb 6, 2009
posts:5
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:

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

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.

 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

Featured Threads

Free SEO Tools

Hire Expert Members