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

Thursday, December 8, 2011

Is it worth supporting IE6 still?
http://www.w3schools.com/browsers/browsers_explorer.asp

On Dec 8, 2011, at 4:58 AM, Simon wrote:

> Hi Mike,
>
> Thanks for your reply.
>
> I added the "display:inline" to solve the extra spacing that appeared,
> and this seemed to work when embedded in the page but not when in a
> seperate .css file.
>
> Here is a link to the site if this helps any further
> http://www.estatesandinvestments.co.uk
>
> Thanks,
> Simon
>
> On Dec 8, 4:41 am, "Mike G." <deafni...@gmail.com> wrote:
>> 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 <webservi...@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_su...">Business
>>> support</a></li>
>>
>>> <li class="widget_link"><a href="http://
>>> www.estatesandinvestments.co.uk/info/8/tenants_handbook/7/tenants_han...">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- Hide quoted text -
>>
>> - Show quoted text -
>
> --
> --
> 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

0 comments:

Post a Comment

Note: Only a member of this blog may post a comment.

Copyright © 2010 Web Design | Free Blogger Templates by Splashy Templates | Layout by Atomic Website Templates

Vida de bombeiro Recipes Informatica Humor Jokes Mensagens Curiosity Saude Video Games Animals Diario das Mensagens Eletronica Rei Jesus News Noticias da TV Artesanato Esportes Noticias Atuais Games Pets Career Religion Recreation Business Education Autos Academics Style Television Programming Motosport Humor News The Games Home Downs World News Internet Design Entertaimment Celebrities 1001 Games Doctor Pets Net Downs World Enter Jesus Mensagensr Android Rub Letras Dialogue cosmetics Genexus lasofia thebushrajr wingshock tripedes gorduravegetal dainfamia dejavu-transpersonal jsbenfica republicadasbadanas ruiherbon iranianforaryans eaystcheyl fotosdanadir Só Humor Curiosity Gifs Medical Female American Health Madeira Designer PPS Divertidas Estate Travel Estate Writing Computer Matilde Ocultos Matilde futebolcomnoticias girassol lettheworldturn topdigitalnet Bem amado enjohnny produceideas foodasticos cronicasdoimaginario downloadsdegraca compactandoletras newcuriosidades blogdoarmario arrozinhoii