Grow your CSS skills. Land your dream job.

Help: trouble with link images

  • # September 15, 2009 at 12:01 am

    Hello everyone I’m working on a layout and when i run my png fix for IE6 transperancy issue the background images for the link tags disappear i make these screenshots for better understanding

    this is how it looks without the png fix on IE6

    http://www.urbanoarquitectonica.com/ima … ic_one.png

    and this is how it looks when i put the png fix

    http://www.urbanoarquitectonica.com/ima … ic_two.png

    here’s the html for that part

    Code:

    Lorem ipsum dolor sit amet

    consectetur adipiscing elit. Donec elementum scelerisque turpis, non mattis
    augue pharetra eget. Phasellus tristique tincidunt erat, ut sodales arcu feugiat
    vitae scelment matpis erutsodal areqs.

    and the css

    Code:
    div#descripcion{
    width: 477px;
    float: left;
    margin-top: 45px;
    }

    div#descripcion div#links{
    margin: 30px 0;
    }

    div#descripcion div#links a#icono_uno{
    width: 42px;
    height: 43px;
    background-image: url(“../imagenes/slogan_icons_sprite.png”);
    background-repeat: no-repeat;
    background-position: 0 0;
    padding: 15px 0 15px 45px;
    margin-right: 34px;
    }

    div#descripcion div#links a#icono_dos{
    width: 42px;
    height: 43px;
    background-image: url(“../imagenes/slogan_icons_sprite.png”);
    background-repeat: no-repeat;
    background-position: -266px -8px;
    padding: 10px 0 15px 45px;
    }

    div#descripcion div#links a#icono_uno, a#icono_dos{ text-decoration: underline; color: #8D8071; }

    /* MENU */

    ul#menu_principal{
    height: 50px;
    }

    ul#menu_principal li{
    line-height: 50px;
    float: left;
    padding-right: 50px;
    }

    ul#menu_principal li a{
    padding: 18px 0;
    color:gray;
    font-family: Myriad Pro, sans-serif;
    font-size: 14px;
    }

    ul#menu_principal li a:hover{
    color: #f4f4f4;
    text-decoration: none;
    }

    ul#menu_principal li a.active{
    color: #f4f4f4;
    background-image: url(“../imagenes/menu_active.png”);
    background-repeat: no-repeat;
    background-position: bottom;
    }

    the one that says "navegacion" it’s for the menu part where there is supposed to be a little triangle for the ul#menu_principal li a.active and the other part for the div#links a#icono_uno and for div#links a#icono_dos

    thanks in advance

    Micha

    # September 15, 2009 at 1:35 am

    I really don’t think there are any web developers out there that still support I.E 6. I really wouldn’t worry about it if I were you. Remember that Microsoft really kinda forces everyone to update to I.E8. You can’t even buy a computer with I.E 6 anymore.

    # September 15, 2009 at 11:49 am
    "cybershot" wrote:
    I really don’t think there are any web developers out there that still support I.E 6. I really wouldn’t worry about it if I were you.

    This is a false statement. The majority of developers still support IE6, on a project by project determination. When still over 10% of the population uses IE6, you cannot simply ignore it. Some websites, depending on their user base, maybe have an even higher percentage of IE6 users. Sure, you might not want to support IE6 on a personal blog, fair enough. But to say to a client that a huge chunk of users may not be able to use the website? That’s not good enough imo.

    Having said that, nobody is looking for pixel-perfection here. Just simple usability. As long as an IE6 user can properly use the website without any hindrance, you’re golden.

    # September 15, 2009 at 12:54 pm
    Quote:
    Having said that, nobody is looking for pixel-perfection here. Just simple usability. As long as an IE6 user can properly use the website without any hindrance, you’re golden.

    so what you are saying is that the fact that the icons on the links and the triangle on the active item of the menu don’t matter that much since the content is all good? I can agree with that but what happens if i got a tricky client who wants all content and graphics can be view and all most used browsers?

    The thing is that this is the first time this happens to me it’s really weird and i wanted to know if aybody there know why this happens (the dissapearing of the background images o the a tags) and how can i fix it :?

    # September 15, 2009 at 3:59 pm
    "micha" wrote:
    Quote:
    Having said that, nobody is looking for pixel-perfection here. Just simple usability. As long as an IE6 user can properly use the website without any hindrance, you’re golden.

    so what you are saying is that the fact that the icons on the links and the triangle on the active item of the menu don’t matter that much since the content is all good? I can agree with that but what happens if i got a tricky client who wants all content and graphics can be view and all most used browsers?

    Sorry, I should’ve been more clear. I wasn’t referring specifically to your site, but the internet as a whole. A navigation menu is very important to usability. If it isn’t working in IE6, you need to fix it.

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".