Grow your CSS skills. Land your dream job.

[Solved] Inconsistency between Firefox 3.0 & 3.5

  • # August 5, 2009 at 5:35 pm

    This is the final problem I have with my site. It now works exactly how I want it in every browser, except Firefox 3.0.##. (Also haven’t tested IE6).

    It looks fine in every browser, but in FF 3.0 it looks like padding: 4px 0 4px 0; is added to the menu. I was playing around with the paddings and found out that is not where the problem lies, because it’s not padding that is added. I also tried changing the line-height (to 1.2em), that almost worked but it isn’t the solution, there is still a 1px difference between 3.0 & 3.5 that becomes very apparent because of the menu item hover effect.

    It’s coded like this:

    CSS

    Code:
    #navbar {
    height: 40px;
    padding-top: 115px;
    padding-bottom: 0;
    width: 100%; }

    ul#navlinks {
    float: right;
    width: auto;
    text-align: right;
    padding: 4px 0;
    background: url(images/contentbg.png) repeat;
    border: 1px solid #333333;}

    ul#navlinks li { display: inline; }
    ul#navlinks li a {
    text-decoration: none;
    text-transform: uppercase;
    font-size: 1.5em;
    font-weight: bold;
    padding: 4px 10px;}

    ul#navlinks li a:hover {
    background: url(images/contentbg.png) repeat;
    color: white;}

    HTML

    Edit
    After some long hours of experimenting I got it to work with a different font. Yay for workarounds.

Viewing 1 post (of 1 total)

You must be logged in to reply to this topic.

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