2 replies [Last post]
jtulip22
Offline
newbie
quebec
Last seen: 13 years 46 weeks ago
quebec
Joined: 2006-07-03
Posts: 4
Points: 0

Hi,

I'm using a list for my menu with a specific class for the "active" page, and simple links with a different backgoround color on "hover" (see html code below)

My menu stands on two lines, but when I try to click a different item, some items jump into the first line, altough there is no change in sizing, etc.

For example, with Firefox 1.5, go to my page at http://www.sas.ulaval.ca/test/photos.html
and click on "Programmation". The items runs away from the mouse !

Hope you understand what I'm trying to say. Does anyone know what's the problem with my menu ? Thanks a lot for your help.

HTML code for the menu

  • Partenaires

  • Comité organisateur




  • Complete CSS

    /* CSS Document */ /* Créé par Jean-Philippe Bergeron */ /* Juillet 2006 */

    body{
    margin: 0px;
    padding: 0px;
    font-size: 10px;
    line-height: 15px;
    background-image: url("../images/bg1.gif");
    text-align: center;
    margin-left: 5px;
    margin-top: 10px;
    }

    .container {
    margin: 0 auto;
    width: 760px;
    }

    .subcontainer {
    border-style:solid;
    border-width:1px;
    border-color:black;
    background-color:#020108;
    width:760px;
    overflow: auto;
    padding:0px;
    text-align: left;
    }

    .north {
    border-width:0px;
    width:592px;
    padding:0px;
    height:137px;
    float: right;
    background-color:#020108;
    background-image:url(../images/header.gif);
    background-repeat: no-repeat;
    }

    .west {
    border-width:0px;
    width:168px;
    padding:0px;
    height:433px;
    float: left;
    background-color:#020108;
    background-image:url(../images/chandelle.jpg);
    background-repeat: no-repeat;
    }

    .maincontent {
    border-width:0px;
    width:562px;
    padding:15px;
    float:right;
    background-color:white;
    }

    .menu {
    border-top-style:solid;
    border-top-width:1px;
    border-top-color:#000000;
    border-bottom-style:solid;
    border-bottom-width:1px;
    border-bottom-color:#000000;
    background-color:white;
    text-align: center;
    text-decoration: none;
    }

    .menu ul, .menu li {
    list-style: none;
    display: inline;
    }

    .menu a {
    font-family: Verdana, arial, tahoma, sans-serif;
    color: #666;
    padding: 1px;
    margin: 0 10px 0 0;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: .2em;
    font-size: 10px;
    text-decoration: none;
    }

    .menu a:hover, .menu a:link, .menu a:active, .menu a:visited {
    background: #FF9900;
    color: #666;
    }

    .activepage {
    font-family: Verdana, arial, tahoma, sans-serif;
    color: #666;
    padding: 1px;
    margin: 0 10px 0 0;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: .2em;
    font-size: 10px;
    text-decoration: none;
    background: #FF9900;
    color: #333366;
    }

    /* Allow DIVS to extend \*/
    .clearfix {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
    }
    .clearfix {display: inline-table;}
    /* Hides from IE-mac \*/
    * html .clearfix {height: 1%;}
    .clearfix {display: block;}
    /* End hide from IE-mac */

    http://www.sas.ulaval.ca/test/photos.html

    Chris..S
    Chris..S's picture
    Offline
    Moderator
    Last seen: 8 years 6 days ago
    Timezone: GMT+1
    Joined: 2005-02-22
    Posts: 6078
    Points: 173

    I'm not exactly sure why its

    I'm not exactly sure why its happening. But I think I know the cause.

    UL (and OL) elements are by default given some left hand indentation. Some browsers use margin-left and others use padding-left. You should control this to ensure all browsers behave similarly.

    .menu ul { margin-left: 0; padding-left: 0; }

    The problem goes away as the browser (well FF as thats all I looked at your page with) puts more things on the top line from the start.

    jtulip22
    Offline
    newbie
    quebec
    Last seen: 13 years 46 weeks ago
    quebec
    Joined: 2006-07-03
    Posts: 4
    Points: 0

    Also works in IE. Thanks

    Also works in IE.
    Thanks Chris.