Home/ Questions/Q 7055281
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-28T03:43:46+00:00

I’m creating an web system, but it’s not showing correctly in firefox (and probably

  • 0

I’m creating an web system, but it’s not showing correctly in firefox (and probably not in IE too), but it’s great in Google Chrome, the page is that: Page with errors

The problem is that my < ul> component is too large in Firefox. I’m using width: 760px; and repeating an small width image over this 760 pixels. But the firefox do it for more than 760 pixels (as you can see in the link).

This is my ul-html code:

<body id="maincontent">
    <ul class="ulmenu">
        <li><a href="#" >Registrar</a></li>
        <li><a id="lastmenu" href="#" >Realizar login</a></li>
    </ul>
</body>

And my css:

root { 
    display: block;
}
#maincontent
{
    background-color: black;
    width: 760px;
    margin: auto;
}
ul.ulmenu
{
    text-align: center;
    margin-top:0;
    display:table;

    width: 760px;
    max-width: 760px;
    list-style-type: none;
    height: 60px;

    background-image: url(../image/menubg.png);
    background-repeat: repeat-x;
    /*
    visibility: hidden;*/
}
ul.ulmenu li
{
    float: left;
}
ul.ulmenu a
{
    background-image: url(../image/menudiv.png);
    background-repeat: no-repeat;
    background-position: right;
    padding-right: 32px;
    padding-left: 32px;
    line-height: 60px;
    display: block;
    color: #ffffff;
    text-decoration: none;
    font-family: Georgia, "Times New Roman", Times, serif;
    font-size: 21px;
}
ul.ulmenu a:hover
{
    color: #AAAAAA;
}

In order to make the options of the menu centralized, i created some code in JS with jQuery to do that. If I remove this code, the width of green image in firefox becomes smaller, but it’s still bigger than necessary (about 100px), the chrome images keeps unchanged.

I know only basics of css. Can anybody point me how can I fix that?

—-EDITED—–

Fiddler URL for code (but the error is only noticed on maximized browser):

See it on Fiddler

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Here is what I understand.

    Seems, In firefox your are adding padding-left to your element style which makes it wider.

    ul.ulmenu li
{
    float: left; //remove it
    display: inline-block; // add it
}

    Remove this line from js code.

    $(".ulmenu").css("padding-left",Math.round((larTela-menuWidth)/2)+"px");
    • 0