Question

I have two tables that I’ve styled the same. I’ve added a form (generated from javascript) with its own styling and it seems to have messed up one of the tables (add camera table)

The fiddle has the details and I’ve added the form that the javascript creates: http://jsfiddle.net/UtNaa/30/

If I remove all this code added from the form it then fixes the table:

#EditCameraForm label, input, select, textarea {
    display: block;
    width: 200px;
    float: left;
    margin-bottom: 1em;
    margin-top: 0.5em;
}

#EditCameraForm select {
    width: 100px;
}

#EditCameraForm label {
    clear: both;
    color: black;
    width: 120px;
    padding-right: 8px;
    text-align: left;
    white-space: nowrap;
}

#EditCameraForm input[type="button"] {
    float: right;
    width: 100px;
    margin-left: 10px;
}

#EditCameraForm input[type="submit"] {
    float: right;
    width: 100px;
}

#EditCameraForm input[name="submit"] {
    clear: both;
}

#EditCameraForm input[name="camera_status"] + label {
    clear: none;
}

What am I doing wrong with this? It doesn’t make sense to me that both tables have the same styling but only one table gets messed up?

Answer 1

you’ve got a width setting that is forcing things to expand. You’re defining #EditCameraForm label. Then every input, select, and textarea on the page.

 #EditCameraForm label, input, select, textarea {
    display: block;
    width: 200px; /* <------- this line is causing it */
    float: left;
    margin-bottom: 1em;
    margin-top: 0.5em;
}

You need to target just those form inputs. That way you aren’t altering all page inputs. Like so…

#EditCameraForm label, 
#EditCameraForm input, 
#EditCameraForm select, 
#EditCameraForm textarea {
    display: block;
    float: left;
    width: 200px;
    margin-bottom: 1em;
    margin-top: 0.5em;
}

In addition, you’ve got an incorrect selector.

<input type="submit" name="Submit" value="Apply">

Note the “name”… but the selector is….

#EditCameraForm input[name="submit"]

Case matters.