Re: [Design with CSS 3628] CSS workaround for IE 6

I think the problem is the "display:inline" rule you have set for the li. IE6 will only show a background image on a block element.

The phantom spacing could be the extra white space you have in your markup for IE6. I know this used to be a bug in IE6 but not sure so something you might want to try..

M

Sent from my iPad

On Dec 7, 2011, at 12:51 PM, Simon <webservices@telford.gov.uk> wrote:

> 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

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