Grow your CSS skills. Land your dream job.

Legend Alignment Problem in Firefox

  • MBM
    # October 13, 2012 at 8:28 pm

    I’ve styled the legend tag giving it a black background and aligning it with a form. It displays correctly in chrome, IE9 & Opera but in Firefox the legend tag aligns to the left. I’ve tried adjusting margin and padding values.

    http://mbmitservices.co.uk/ExpressTravel2/contact.html


    legend{
    font-family: 'PT Sans Narrow', sans-serif;
    font-size: 26px;
    padding:10px 0 10px 220px;
    display: inline-block;
    background-color:#000000;
    color:#ffffff;
    overflow: auto;
    width:490px;
    margin-left:140px;
    }

    label {
    display: block;
    float: left;
    width: 120px;
    text-align: right;
    margin: 10px 15px 0px 0px;
    font-size: 20px;
    }

    .Form {
    font-size:30px;
    margin-left:140px;
    float:left;
    border: solid 1px #d2d2d2;
    padding: 10px 5px;
    width:700px;
    height:720px;
    box-shadow: 0 1px 0px rgba(0,0,0,.1);
    background-color:#eeeeee;
    color:#000000;
    border:0px;
    margin-bottom:40px;
    }

    .Form input:focus {
    box-shadow: #33FF66 0 0px 8px;
    }

    .inset {
    padding: 6px 6px 6px 8px;
    width: 500px;
    border: solid 1px #bcbbbb;
    margin-bottom:15px;
    outline: none;
    box-shadow: inset 0 1px 2px rgba(0,0,0,.2);
    color:#000;
    background-color:#fff;
    font-size:22px;
    }

    .comment {
    width: 515px;
    height: 160px;
    border: solid 1px #bcbbbb;
    outline: none;
    box-shadow: inset 0 1px 2px rgba(0,0,0,.2);
    color:#000;
    background-color:#fff;
    font-size:22px;
    }
    MBM
    # October 13, 2012 at 9:51 pm

    I removed :

    display: inline-block;

    And added :

    position:absolute;

    legend{
    font-family: 'PT Sans Narrow', sans-serif;
    font-size: 26px;
    padding:10px 0 10px 220px;
    background-color:#000000;
    color:#ffffff;
    overflow: auto;
    width:490px;
    margin-left:140px;
    position:absolute;
    }
Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.

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