CODEWITHSUNDEEP
htmlcss
Navin Rauniyar
Navin Rauniyar

Reputation: 10525

input type text width is different in chrome and firefox

This picture is captured from google chrome

enter image description here

This picture is captured from mozilla firefox

enter image description here

You can see the difference in input of type text (Name: , E-mail:, Phone:).

So how can I manage this? Is there any technique that uses css for firefox and another css for chrome

Upvotes: 3

Views: 5625

Answers (3)

Navin Rauniyar
Navin Rauniyar

Reputation: 10525

I solved my problem by setting border: 1px solid #ccc;. As firefox and chrome differently behaves the border-style by default.

Upvotes: 2

bmurauer
bmurauer

Reputation: 1259

Unless you specify a strict appearance for the fields using CSS, both browsers will use their default input widgets (which are different, and depend on OS, ...).

The problem occurs when using no/not enough CSS.

Upvotes: 2

Dash
Dash

Reputation: 314

I think your fix is adding this rule

width: 300px; /* change size accordingly */

to

# message {

or

.message {

like

<input class="message" id="message" name="message" type="text" />

instead of simply using

<input id="" name="" type="text"/>

Upvotes: 0

Related Questions