CODEWITHSUNDEEP
htmlcssinternet-explorergoogle-chromecross-browser
Nalaka526
Nalaka526

Reputation: 11464

Different gap width in Chrome and IE

This is my HTML and CSS code

HTML

<asp:TextBox ID="txtSearchMain" runat="server" CssClass="text-box" />
<asp:ImageButton ID="imbSearchMain" runat="server" ImageUrl="~/Resources/Images/icon-search.png" CssClass="custom-text-box-img" />

CSS

.text-box {
    border: 1px solid #CFCFCF;
    padding: 4px;
    margin: 0;
    height: 16px;
}

.custom-text-box-img {
    border: 1px solid #CFCFCF;
    height: 18px;
    padding: 3px;
    vertical-align: bottom;
    margin-left: -3px;
    background-color: white;
}

Output of this code behaves differently on Chrome and IE

enter image description here

Output of chrome is as expected, while the IE has a different size gap between two controls.

How to fix this to behave similarly in different browsers?

Upvotes: 0

Views: 1159

Answers (1)

Matt Coughlin
Matt Coughlin

Reputation: 18906

A few options to try:

  1. Float both elements and remove the negative left margin.
  2. Remove the whitespace between the 2 ASP tags in the source code and remove the negative left margin.
  3. Apply an explicit font-size to the parent container (might increase the chances of the gap width being the same in all browsers).

Upvotes: 3

Related Questions