CODEWITHSUNDEEP
jquerycssfirefoxsafari
Thomas Williams
Thomas Williams

Reputation: 1548

Strange difference between Firefox, Internet Explorer and Safari pixel width

For a start, I know all browsers show inputs at slightly different widths, and that is something that doesn't worry me, but something is annoying me.

I have a div button on the right of an input. Now I am using jQuery to resize my input width to the same width as my other inputs without a button.

Now in Firefox it works as expected, but in Internet Explorer and Safari my width comes out wider than my other 300px inputs, even though the jQuery gets the correct calculation.

Basically what I do I get the width of the input eg 300px then I get the width of my button div which is 20px. Then I do a calcualation 300-20 = 280px. I then set my input to 280px and add my div button on, which should add up to 300px; again but for some reason in Safari it is wider than my 300px inputs.

Here is my HTML:

<label class="myform w9" for="name">Req' Delivery Date</label>
<input class="contactinput yellow w22 inputImage fe" type="text" id="po_requireddeliverydate" placeholder="Required field" readonly/>
<div id="clear_podate" class="inputWrapDelete"></div>

My CSS:

.inputWrap{ 
    display:flex;
    display:-webkit-flex;
    display: -ms-flexbox;
    margin-bottom:8px;
}
.inputWrapDelete{
    width: 20px;
    height: 20px;
    cursor: pointer;
    background-image: url(../../images/buttons/buttons_25x25.png);
    border-radius: 0 5px 5px 0;
    border: 2px solid #009900;
    background-color: #090;
}
.fe
{
    border-radius: 5px 0 0 5px;
}
.contactinput{
    border-radius: 5px;
    border: 2px solid #009900;
    height: 20px;
    padding-left: 5px;
}
.w22
{
width:300px;
}

My jQuery:

$(".inputImage").each(function(){
        $(this).width($(this).width()-$(this).next().width());
        $(this).add($(this).next()).wrapAll('<div class="inputWrap"></div>');

});

Upvotes: 0

Views: 43

Answers (2)

Thomas Williams
Thomas Williams

Reputation: 1548

I have solved my problem.

The problem was the border. You see I was getting the correct answer in the jQuery, but then the two inner borders was adding up to 2px. It worked fine in Firefox however. Now the new code works in all browsers.

The new code I have added is border-left:0; and border-right:0;

.inputWrapDelete{
    width: 20px;
    height: 20px;
    cursor: pointer;
    background-image: url(../../images/buttons/buttons_25x25.png);
    border-radius: 0 5px 5px 0;
    border: 2px solid #009900;
    background-color: #090;
    border-left:0;
}
.fe
{
    border-radius: 5px 0 0 5px;
    border-right:0;
}

Upvotes: 1

Jose Quintero
Jose Quintero

Reputation: 196

yeah, it gets 290 as final width, strange... but it works if you do this..

var width = $(this).width() - $(this).next().width()
$(this).width(width);

Upvotes: 0

Related Questions