flickering borders in IE6

[cfe]

Alright, I'm inquiring about some css issues that I'm having with the site located at:

http://www.cascadefire.com/testinggrounds/

The site has two navigation bars, one on either side. One lists the categories and the other lists other various links. It is basically a vertical list containing anchor's that are displayed in block form. Using css I apply a hover state that changes the BG color, and I also apply borders.

For the column on the right, it seems to work. On the left column, not so much. Neither the borders nor the hover-state seems to work. The weird thing is that I've applied the exact same styles to both columns, and yet they are behaving differently.

Oh, and the other weird thing, as I scroll up and down on the page the borders that didn't previously seem to exist, then appear but flash in and out. It's quite odd. This only happens in IE 6, and of course, everything works fine in all other browsers.

Any thoughts?

Thanks!

[WebJoel]

<div id="categoriesContent" class="sideBoxContent">
<a class="category-top" href="http://www.cascadefire.com/testinggrounds/index.php?main_page=index&amp;cPath=369&amp;zenid=cbb4f52743dad5de29e20c0a6bea725e">Exclusive</a>
<a class="category-top" href="http://www.cascadefire.com/testinggrounds/index.php?main_page=index&amp;cPath=11&amp;zenid=cbb4f52743dad5de29e20c0a6bea725e">Fire Extinguishers</a>
<a class="category-top" href="http://www.cascadefire.com/testinggrounds/index.php?main_page=index&amp;cPath=8&amp;zenid=cbb4f52743dad5de29e20c0a6bea725e">Foam & Equipment</a>

<a class="c.... and<div id="ezpagesContent" class="sideBoxContent">

<a href="http://www.cascadefire.com/testinggrounds/index.php?main_page=page&amp;id=3&amp;chapter=0&amp;zenid=cbb4f52743dad5de29e20c0a6bea725e">About Us</a>
<a href="http://www.cascadefire.com/testinggrounds/index.php?main_page=page&amp;id=5&amp;chapter=0&amp;zenid=cbb4f52743dad5de29e20c0a6bea725e">Driving Directions</a>
<a href="http://www.cascadefire.com/resource/cfeapplication.pdf" target="_blank">Employment Application</a>
<a href="http://www.c.... are "lists" and as such, should be in an unordered list

<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</li>(etc)....
</ul>

This would give you greater flexibility to design around the content (the anchors). You state that the borders are 'flicker'. This is 'presentation', and as such could be addressed best via proper markup (although you could write it the way you have it and be okay).

I am viewing with Fx on Linux and see nothing of 'flickering borders', though.. :confused:

[cfe]

Thanks for the reply. The flickering only occurs in IE6, I believe. My description also may have been a little misleading, as they don't flicker constantly. I don't actually notice the effect unless I'm on a page in which I can scroll down past the links, and back up. At that time the border's suddenly show up only to blink out of existence again when I hover the mouse over them.

I may try converting them to an unordered list, although it really shouldn't be necessary.

[cfe]

Welp, I tried throwing all of the links into a vertical list - no go. I still had the same border issues with the added problem of the list items appearing too large..in IE 6 of course. I hate that browser...

Any other thoughts?

[WebJoel]

I was on Linux/Firefox yesterday and thus, -could not see what IE6 was doing... today I am on XP/Firefox with IE-view (views using IE6 rendering engine) and YES, -I see it now.

Here is the problem:

....<div class="mainLink">
<a href="index.php?main_page=page&id=9&chapter=0">

Slip-On Gallery
<p>Learn about our Slip-Ons: Images/descriptions & more!</p>
</a>
</div>.... You enclosing a block-level element "<p></p>" inside of an inline-level element "<a href="#"></a>"

You need to reverse this to be:....<div class="mainLink">
<p><a href="index.php?main_page=page&id=9&chapter=0">

Slip-On Gallery
Learn about our Slip-Ons: Images/descriptions & more!
</a></p>
</div>.... You have multiple incidents of this occuring in this navigation. -And I urge you to please DO change this to an unordered list. Even if this makes NO difference to you or me 'visually', what you have now is 'almost un-readable' to the blind/visually handicapped. An 'unordered list' prepares the text-reader to properly parse the 'list'. As it is now, it is merely a series of unconnected hyperlinks that a blind person using a text-reader would find very confusing.

-Not to mention again, that using an UL opens many benefits of ability to style the links to do things that you cannot do currently. :)

[cfe]

Much appreciated, and certainly good points. I've been meaning to get a hold of a good book on exactly that topic.

However, it's not actually the link bar across the top that I'm inquiring about. Did you actually see a problem with it? The main problem-nav is the left "Categories" bar. Incidentally I'm also using the IE-tab add-on for firefox, although since I have IE7 installed it uses it's rendering engine, not IE 6. I've had to go as far as installing a virtual machine in order to test IE6 on this machine.

Anyhow, thanks for the input!

[WebJoel]

Much appreciated, and certainly good points. I've been meaning to get a hold of a good book on exactly that topic.

However, it's not actually the link bar across the top that I'm inquiring about. Did you actually see a problem with it? The main problem-nav is the left "Categories" bar. Incidentally I'm also using the IE-tab add-on for firefox, although since I have IE7 installed it uses it's rendering engine, not IE 6. I've had to go as far as installing a virtual machine in order to test IE6 on this machine.

Anyhow, thanks for the input! This is the linkbar across the top? -These need to be corrected anyway, but check the whole page. It is probably something like this that is messing-up. You want the anchor inside of the <p> (if this is how you are doing this), -not the other way around. Let the <p> expand around the <a>, not reversed.
Repairing any 'mistakes' is tantamount to getting this fixed. Fixing the left-hand side vertical navigation before correcting the 'errors' might be a problem when you correct the errors, -suddenly, the left-hand navigation might no longer work..

Here :) is a headstart: <div class="leftBoxContainer" id="categories" style="width: 150px">
<h3 class="leftBoxHeading" id="categoriesHeading">Categories</h3>
<ul>
<li><a class="category-top" href="http://www.cascadefire.com/testinggrounds/index.php?main_page=index&amp;cPath=369">Exclusive</a></li>
<li><a class="category-top" href="http://www.cascadefire.com/testinggrounds/index.php?main_page=index&amp;cPath=11">Fire Extinguishers</a></li>
<li><a class="category-top" href="http://www.cascadefire.com/testinggrounds/index.php?main_page=index&amp;cPath=8">Foam & Equipment</a></li>
<li><a class="category-top" href="http://www.cascadefire.com/testinggrounds/index.php?main_page=index&amp;cPath=4">Hose</a></li>
<li><a class="category-top" href="http://www.cascadefire.com/testinggrounds/index.php?main_page=index&amp;cPath=7">Infrared Heat Detectors</a></li>
<li><a class="category-top" href="http://www.cascadefire.com/testinggrounds/index.php?main_page=index&amp;cPath=10">Lights</a></li>
<li><a class="category-top" href="http://www.cascadefire.com/testinggrounds/index.php?main_page=index&amp;cPath=16">Nozzles, Adapters, Valves & Spec</a></li>
<li><a class="category-top" href="http://www.cascadefire.com/testinggrounds/index.php?main_page=index&amp;cPath=15">Personal Protection</a></li>
<li><a class="category-top" href="http://www.cascadefire.com/testinggrounds/index.php?main_page=index&amp;cPath=5">Pumps</a></li>
<li><a class="category-top" href="http://www.cascadefire.com/testinggrounds/index.php?main_page=index&amp;cPath=17">Rescue Tool & Clean-up</a></li>
<li><a class="category-top" href="http://www.cascadefire.com/testinggrounds/index.php?main_page=index&amp;cPath=12">Scott-Air Paks & Accessories</a></li>
<li><a class="category-top" href="http://www.cascadefire.com/testinggrounds/index.php?main_page=index&amp;cPath=6">Tanks</a></li>
<li><a class="category-top" href="http://www.cascadefire.com/testinggrounds/index.php?main_page=index&amp;cPath=9">Ventilators</a></li>
<li><a class="category-links" href="http://www.cascadefire.com/testinggrounds/index.php?main_page=products_new">New Products ...</a></li>
<li><a class="category-links" href="http://www.cascadefire.com/testinggrounds/index.php?main_page=featured_products">Featured Products ...</a></li>
</ul>
</div> I noted that your links were basically 'all on one line of text' and would only 'wrap' when they exceeded the width of the container. This is ...unweildy. It is better to either do a 'ul' which is block, or with what yo have now, 'float:left" on EVERY link to make them 'line up to the left side of the container' and then also have to deal with 'float' issues... :confused:

[cfe]

Actually I've applied 'display:block' to the link elements to make them behave as they are... Even so, you're right about putting them into a list. In fact, they were at first, but IE was having trouble displaying them. It was actually a "fix" to take out the list elements. When I have time to debug I'll put them back.

Thanks for you time!

[cfe]

Just for your reference, I finally resolved the problem. It actually remedied itself upon fixing another problem with IE adding extra space to the LI elements in a vertical list.

The solution was to simply add 'zoom: 1;' to the style sheet for the LI elements (I actually applied it to all LI's as it evidently fixes a lot of IE bugs).