WordPress.org

Ready to get started?Download WordPress

Forums

CSS problem with mozilla (5 posts)

  1. mcioffi
    Member
    Posted 9 years ago #

    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

  2. Root
    Member
    Posted 9 years ago #

    No semi colon after z index: 1 ?

  3. mcioffi
    Member
    Posted 9 years ago #

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

  4. Mark (podz)
    Support Maven
    Posted 9 years ago #

    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.

  5. mcioffi
    Member
    Posted 9 years ago #

    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;
    }

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags

No tags yet.