homepage Welcome to WebmasterWorld Guest from 23.20.63.27
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Pubcon Platinum Sponsor 2014
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
Horizontal Navigation Problems
sappears when hovered oThe BG diver, then reappears
andrewperk




msg:3845155
 8:19 pm on Feb 8, 2009 (gmt 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;
}

 

jetboy




msg:3847410
 7:02 pm on Feb 11, 2009 (gmt 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.

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved