Support » Themes and Templates » CSS problem with mozilla

  • Hello,
    I have a problem in my site marcocioffi.com:
    I have used CSS to create a layer to make the effect that you can see on the top-right of the site.
    Using ie the site look-likes fine and the W3C service validate both the html and CSS.
    Using mozilla, instead, the candy-layer I used to create the effect doesn’t respect position and the menu
    doesn’t display the dashed line.
    The CSS I used can be retrived using wp-layout.css file, in particular, the code in question is
    #menucandy {
    width: 168px;
    height: 97px;
    right: 136px;
    top: 55px;
    position: absolute;
    background: url(images/menucandy.gif) no-repeat;
    z-index:1
    }
    #menu {
    position: absolute;
    background: #fff;
    border-left: 1px dashed #000;
    border-right: 1px dashed #000;
    border-top: 1px dashed #000;
    border-bottom: 1px dashed #000;
    right: 20px;
    top: 127px;
    height: 0px;
    padding: 15px 15px 15px 15px;
    }
    Thank you sincerely for your help

Viewing 4 replies - 1 through 4 (of 4 total)
  • No semi colon after z index: 1 ?

    the w3c css validator
    http://jigsaw.w3.org/css-validator/
    reports that my css style is valid also without semi colon.. 😮
    however, also adding the semicolon the page doesn’t look well on mozilla..

    The semi-colon there isn’t absolutely required as that statement is the last within the whole definition, but it’s good practice to always close out properly.
    Looking in FF.9.3 and IE 6 the page looks identical.

    yes, I have solved the arcane mystery:
    the problem was on the attribute width and height of #menu.
    In particular the problem was related on different interpretation of ie and mozilla
    if the height of a layer was set on 0 (but there was a text inside the layer) and the width of the
    #menu, that previously was not explicitly specified…
    #menu {
    position: absolute;
    background: #fff;
    border-left: 1px dashed #000;
    border-right: 1px dashed #000;
    border-top: 1px dashed #000;
    border-bottom: 1px dashed #000;
    right: 20px;
    top: 127px;
    width: 167px;
    /* height: 0px; */
    padding: 15px 15px 15px 15px;
    }

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘CSS problem with mozilla’ is closed to new replies.