CODEWITHSUNDEEP
htmlcss
arokia
arokia

Reputation: 25

How to make a textbox width look uniform all browsers

How to make the text box width look uniform across all browsers?

Here is my code:

<table>
  <tbody>
    <tr class="att">
      <td>
        <input type="text" class=a /> </td>
      <td>
        <input type="text" class=b /></td>
    </tr>
  </tbody>
</table>

.a {
  margin:6px -116px 9px -7px;w
  idth:190px;
  height:30px;
  background-color:#C2FFC2;
  border:0px
}

.b {
  margin:6px -116px 9px -7px;
  width:190px;
  height:30px;
  background-color:#C2FFC2;
  border:0px;
}

but in Google Chrome the input box not looking same as in Firefox.

What is causing this difference, and how can I fix it?

demo

Upvotes: 0

Views: 796

Answers (2)

Martin Thoma
Martin Thoma

Reputation: 136339

  1. Reset CSS (see Erik Meyers CSS or others)
  2. Apply only CSS attributes that are supported by all browsers you care about (see CanIUse)

Upvotes: 1

CaribouCode
CaribouCode

Reputation: 14398

If you're setting the widths, then they should render that way in all browsers unless something else is a factor. There may be widths set on the td or tr that's effecting it.

Also on another note, you should use a seperate CSS file to style them like this (since your inputs have the same style). So you could do:

input[type="type"] { 
  margin: 6px -116px 9px -7px;
  width: 190px;
  height: 30px;
  background-color: #C2FFC2;
  border: none; }

Another note again, it's a bit of a hack using negative margins unless you're using position absolute, relative or fixed. You'd probably be best positioning these differently or layout them out in a different way.

Upvotes: 0

Related Questions