Tech Off Thread

4 posts

Forum Read Only

This forum has been made read only by the site admins. No new threads or comments can be added.

accessible CSS menus in IE

Back to Forum: Tech Off
  • User profile image
    apoc

        Well, the idea is to create a cross-browser accessible menu using CSS and <ul>.

    I've managed to achieve it but only in FF and Opera, in IE
     the buttons don't render quite well, in my best effort only one of the button background images was not properly positioned ( lol ).

    the result is something like this:




    1st button is the over state.


                    <ul id="SiteMainMenu">
                        <li class="CommonButton"><a href="#"><span>Como e Onde Fazer</span></a></li>
                        <li class="CommonButton"><a href="#"><span>Servi&ccedil;os</span></a></li>
                        <li class="CommonButton"><a href="#"><span>Not&iacute;cias</span></a></li>
                        <li class="CommonButton"><a href="#"><span>Dossiers</span></a></li>
                        <li class="CommonButton"><a href="#"><span>Perguntas Frequentes</span></a></li>
                        <li class="CommonButton"><a href="#"><span>Contactos &Uacute;teis</span></a></li>
                        <li class="SpecialButton"><a href="#"><span>&Aacute;rea Reservada</span></a></li>
                    </ul>

    #SiteMainMenu li.CommonButton a {
        background-image: url(images/buttons/common/normal/left.gif);
        background-repeat: no-repeat;
        background-position: left center;
        background-color: #a7d93b;
        font-family: Arial, Helvetica, sans-serif;
        font-size: 14px;
        color: #006600;
        text-decoration: none;
        padding-left: 8px;
        padding-top: 3px;
        padding-bottom: 2px;
    }
    #SiteMainMenu li.CommonButton a:hover {
        background-image: url(images/buttons/common/over/left.gif);
        background-repeat: no-repeat;
        background-position: left center;
        background-color: #d7ebac;
        font-family: Arial, Helvetica, sans-serif;
        font-size: 14px;
        color: #2e68b2;
        text-decoration: none;
    }
    #SiteMainMenu li.CommonButton a span {
        background-image: url(images/buttons/common/normal/right.gif);
        background-repeat: no-repeat;
        background-position: right center;
        padding-right: 8px;
        padding-top: 3px;
        padding-bottom: 2px;
    }
    #SiteMainMenu li.CommonButton a:hover span {
        background-image: url(images/buttons/common/over/right.gif);
        background-repeat: no-repeat;
        background-position: right center;
    }

    That's not the final html/css, and i've tried various methods, changing diaplay modes setting height and width define the padding of every elements negative positioning of the span BG, but as i said, the span BG image remained incorrectly positioned.

    can anyone help?


  • User profile image
    Custa1200

    Try placing ALL the list items on one line. Browsers are not supposed to freak out with whitespace but guess what.... IE the bucket of #$%^ that it is, stuggles under certain circumstances, gotta love those mysterious 3px gaps under li items in an inline or floated group of li's. Funny how the others don't have the issue, hmmm

  • User profile image
    oliverjenks

    Of the top of my head I would suggest looking at line-height.

    If that does'nt work, can place the images someplace? I'll see if I can get you a working solution.


  • User profile image
    apoc

    Thx to both for the info, i've been reading about the IE ways of rendering html,

    " Try placing ALL the list items on one line"

    Thx, it didn't solve the problem but helped, on some ocasions there was a misterious margin, the html formatting was the cause.

    "Of the top of my head I would suggest looking at line-height."

    Gotta try that instead of the <a> height value.

Conversation locked

This conversation has been locked by the site admins. No new comments can be made.