CODEWITHSUNDEEP
htmlcssgoogle-chromefirefox
Erik Åsland
Erik Åsland

Reputation: 9782

<input>'s are flush with each other in Chrome, but not in FireFox

I am currently trying to make three input boxes that are the same width that are flush with each other. The inputs are three different types, textarea input & select. I am successful in Google Chrome, but it goes completely haywire in Firefox. I have searched through Stack Overflow and the internets and am not finding a good explanation for this.

Here is my HTML...

<div id='add-topic-wrap'>
    <h3 id='topic-wrap-title'>Add a new Topic</h3>
    <div class='topic-input-wrap'>
        <label>Topic: </label>
        <input id='topic-input' type='text' ng-model='dashControl.topic.title' maxlength='30'></input>
    </div>
    <div class='topic-input-wrap'>
        <label>Description: </label>
        <textarea id='desc-input' ng-model='dashControl.topic.desc'></textarea>
    </div>
    <div class='topic-input-wrap'>
        <label>Category: </label>
        <select id='category-input' ng-model='dashControl.topic.category'>
            <option>HTML5</option>
            <option>CSS3</option>
            <option>Javascript</option>
            <option>PostgreSQL</option>
            <option>Django</option>
        </select><br>
    </div>
    <button id='submit-topic' ng-click='dashControl.addTopic(dashControl.logged_in_user)'>Submit</button>
</div>

Here is my CSS...

#add-topic-wrap{
    border: solid black .1em;
    width: 95%;
    margin: 1em auto 0 auto;
}

#topic-wrap-title{
    font-family: 'Raleway';
    text-align: center;
    margin: 0.5em 0;
}

.topic-input-wrap{
    height: 3em;
    margin-left: .5em;
}

.topic-input-wrap{
    font-family: 'Raleway';
    height: 3em;
}

#topic-input, #desc-input, #category-input{
    float: right;
    margin-right: .5em;
}

#desc-input{
    width: 12.5em;
}

#category-input{
    width: 13em;
    height: 1.6em;
}

#submit-topic{
    margin: 0 0 1em 6.5em;
    height: 1.5em;
    font-size: 1em;
    font-family: 'Raleway';
    background-color: transparent;
    border: black solid .1em;
}

Google Chrome screenshot on the left & Firefox on the right...

enter image description here

Upvotes: 0

Views: 41

Answers (1)

anthonyroberts
anthonyroberts

Reputation: 217

The reason is you are using em's, which are a bit unforgiving in some browsers. If you're not supporting ie8, try rems. If you are, use % or px.

Also use:

box-sizing: border-box;

To make sure they line up exactly.

Quick fiddle: https://jsfiddle.net/eq54Lm5d/1/

Also you are styling with id's, you should really be styling with classes for better specificity behavior.

Upvotes: 1

Related Questions