SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Enthusiast Qubito's Avatar
    Join Date
    Sep 2003
    Location
    Mexico
    Posts
    98
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    CSS Roolover NAV problems with ie6

    HI I am building a css horizontal roolover navbar. however the nav works well in mozilla but ie6 dont recognize the normal .gif button a:link

    other question here is how I can make the text inside the buttom to be vertically align? or make the text a little down. i couldnt do by padding or margin

    here the code


    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

    <html>
    <head>
    <title>menuchido</title>
    </head>
    <style>
    body {
    background-color: #444664;
    margin: 0px;
    padding: 0px;
    width: auto;
    height: auto;
    }
    #navlist {
    position: absolute;
    top: 50px;
    left: 400px;
    width: auto;
    height: 40px;
    float: left;


    }
    span {
    font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
    font-size: 13px;
    color: White;
    font-weight: normal;











    }
    a:link {
    text-decoration: none;
    display: block;

    width: 84px;

    height: 40px;

    background-image: url(../carloscueto/botones/normal.gif);

    background-repeat: no-repeat;
    float: left;




    }

    a:link:hover {
    text-decoration: none;
    display: block;

    width: 84px;

    height: 40px;

    background-image: url(../carloscueto/botones/hover.gif);

    background-repeat: no-repeat;



    }

    a:link:active {
    text-decoration: none;
    display: block;
    width: 84px;
    height: 40px;
    background-image: url(../carloscueto/botones/active.gif);
    background-repeat: no-repeat;




    }
    .boton {
    display: block;
    padding-top: 15px;
    text-align: center;
    vertical-align: middle;
    font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
    font-size: 13px;
    width: 84px;
    height: 40px;
    float: left;

    }

    </style>

    <body>
    <div id="navlist">
    <div class="boton"><a href="/" id="linkempresa"><span>Empresa</a></span></div>
    <div class="boton"><a href="/" id="linkservicios"><span>Servicios</span></a></div>
    <div class="boton"><a href="/" id="linktienda"><span>Tienda</span></a></div>
    <div class="boton"><a href="/" id="linkafiliados"><span>Afiliados</span></a></div>
    <div class="boton"><a href="/" id="linkcontacta"><span>Contacta</span></a></div>
    </div>





    </body>
    </html>

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    Try adding line-height to the navlist to centre the text.

    Also add a width to the anchor definition and you haven't defined the visited states of the anchow either.

    Code:
    #navlist {
    position: absolute;
    top: 50px;
    left: 400px;
    width: auto;
    height: 40px;
    float: left;
    line-height:40px;
    }
    a { /* defines all states of the anchor in one go*/
    text-decoration: none;
    display: block;
    width:84px;
    height: 40px;
    background-image: url(../carloscueto/botones/normal.gif);
    background-repeat: no-repeat;
    float: left;
    }
    I couldn't test without your images so if this doesn't solve your problem then post a link

    Paul

  3. #3
    SitePoint Enthusiast Qubito's Avatar
    Join Date
    Sep 2003
    Location
    Mexico
    Posts
    98
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thanks yes it solve the problem. both text have align, and the normal buttom now is seen on IE6 thanks. why IE6 didnt show the normal state button image with only rules a:link a:hover a:active? it works only when I put your rule
    a { /* defines all states of the anchor in one go*/
    text-decoration: none;
    display: block;
    width:84px;
    height: 40px;
    background-image: url(../carloscueto/botones/normal.gif);
    background-repeat: no-repeat;
    float: left;
    }

    and how I can do a YOU ARE HERE EFFECT ?

    thanks a lot Paul

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    why IE6 didnt show the normal state button image with only rules a:link a:hover a:active
    When you click a link it becomes visited. If you haven't defined visited then it reverts to whatever default styles there are. My style covers all states of the anchor and therefore you only need to code anything that changes (the only drawback of setting all anchor states is that named anchors also get styled (if there any.)

    and how I can do a YOU ARE HERE EFFECT ?
    The easiest way is just to hard-code a special class on each page in the link that is the current page. e.g. class="current" and then add the styles for current as required. This is what most people do .

    You can use id's on the body to target each page so that the html doesn't need to change. You then give each link another class for each link and then the link only gets styled when the body id matches.

    Code:
    body#page1 .page1 {background:red}
    body#page2 .page2 {background:red}
    etc.......
    Code:
    <body id="page1">
    <a href="#" class="page1">link 1</a><!-- this link will get a red background because it is on page 1-->
    <a href="#" class="page2">link 1</a>
    etc................
    So if we were on page 2
    Code:
    <body id="page2">
    <a href="#" class="page1">link 1</a>
    <a href="#" class="page2">link 1</a><!-- this link will get a red background because it is on page 2-->
    Hope that makes sense

    Paul

  5. #5
    SitePoint Enthusiast Qubito's Avatar
    Join Date
    Sep 2003
    Location
    Mexico
    Posts
    98
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ok thanks I will try this. but the button will recognize the active state? my rollover nav have normal.giif hover.gif and active.gif image

    see them at this link

    http://des-champs.com.mx/carloscueto/menulito.html

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    Use this:
    Code:
    <style type="text/css">
    body {
     background-color: #444664;
     margin: 0px;
     padding: 0px;
     width: auto;
     height: auto;
    }
    #navlist {
    position: absolute;
    top: 50px;
    left: 400px;
    width: auto;
    height: 40px;
    float: left;
    line-height:40px;
    }
    span {
     font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
     font-size: 12px;
     font-weight: bolder;
     color: White;
     }
    a { /* defines all states of the anchor in one go*/
    text-decoration: none;
    display: block;
    width:84px;
    height: 40px;
    background-image: url(http://des-champs.com.mx/carloscueto/botones/normal.gif);
    background-repeat: no-repeat;
    float: left;
    }
    a:hover { background-image: url(http://des-champs.com.mx/carloscueto/botones/hover.gif);}
    a:active {background-image: url(http://des-champs.com.mx/carloscueto/botones/active.gif);}
    .boton {
     display: block;
     padding-top: 15px;
     text-align: center;
     width: 84px;
     height: 40px;
     float: left;
     
    }
    </style>
    Paul

  7. #7
    SitePoint Enthusiast Qubito's Avatar
    Join Date
    Sep 2003
    Location
    Mexico
    Posts
    98
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks a lot paul. U save me lot of troubles, and cut the size of the rule. thanks a lot.
    by the way? do you design sites? if yes would be nice if you gave me your email. please send it if you want to jcolin@gmail.com

    Thanks Again
    Qubito
    Last edited by Qubito; Dec 12, 2004 at 16:09. Reason: wrong word


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •