[Design with CSS 3627] CSS workaround for IE 6

Hi,

I was hoping someone could help me a problem I have with a website
that I have created. It works fine in IE 7/8 and Firefox however I am
having an issue with IE 6.

The issue is that I am using two images for my left hand navigation
menu, one for active/visited and one for hover. In IE 6 the images are
all present when you first visit the site, however after clicking on a
link the active/visited image is no longer displayed - only a blank
area - and when hovering over the link the hover image is displayed.

In addition to this in IE 6 there is phantom spacing between the list
items, to address this and the issue above I updated my CSS and
managed to resolve the issues - however this was with embedding the
CSS in the header of a test page. When calling the CSS from a seperate
file the issues return.

Any ideas/tips would be greatly welcome.

html (for the menu section)

<div class="widget">

<ul>

<li class="widget_link"><a href="http://
www.estatesandinvestments.co.uk/">Home</a></li>

<li class="widget_link"><a href="http://
www.estatesandinvestments.co.uk/info/1/our_service/1/our_service">Our
service</a></li>

<li class="widget_link"><a href="http://
www.estatesandinvestments.co.uk/landsearch">Property &amp; land
search</a></li>

<li class="widget_link"><a href="http://
www.estatesandinvestments.co.uk/info/4/news/3/news">News</a></li>

<li class="widget_link"><a href="http://
www.estatesandinvestments.co.uk/info/5/business_support/4/business_support">Business
support</a></li>

<li class="widget_link"><a href="http://
www.estatesandinvestments.co.uk/info/8/tenants_handbook/7/tenants_handbook">Tenant&#039;s
handbook</a></li>

<li class="widget_link"><a href="http://
www.estatesandinvestments.co.uk/info/6/people/5/people">People</a></li>

<li class="widget_link"><a href="http://
www.estatesandinvestments.co.uk/info/7/testimonials/6/testimonials">Testimonials</a></li>

</ul>

</div>

CSS

p.widget_p a:link,p.widget_p a:visited,p.widget_p a:hover,p.widget_p
a:active {color: #222;}

.widget {margin: 0px 0px 0px 10px;}

.widget li {margin: 0px 0px 0px 0px;list-style: none;}

.widget li a {padding-left: 20px;}

.widget ul li {margin: 0; padding:0; display: inline;}

.widget_link a:link, .widget_link a:visited, .widget_link a:active
{background-position: left center;background-color:
transparent;background-image: url(../images/eandi-link.gif);background-
repeat: repeat-y;color: #fff;padding: 10px 0 10px 10px;margin: 2px 0 0
2px;display: block;font-size: 1em;font-weight: bold; text-decoration:
none;}

.widget_link a:hover {background-position: left center;background-
color: transparent;background-image: url(../images/eandi-
link-2.gif);background-repeat: repeat-y;color: #fff;padding: 10px 0
10px 10px;margin: 2px 0 0 2px;display: block;font-size: 1em;font-
weight: bold; text-decoration: none;}

Thanks in advance.

Simon

--
--
You received this because you are subscribed to the "Design the Web with CSS" at Google groups.
To post: css-design@googlegroups.com
To unsubscribe: css-design-unsubscribe@googlegroups.com