3

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

vals
  • 61,425
  • 11
  • 89
  • 138
Navin Rauniyar
  • 10,127
  • 14
  • 45
  • 68
  • 2
    Not sure what you are asking. I personally can't see much difference since they are both images, but CSS can be applied to each browser if that is what you are asking. Yes, there are codes that need to be applied to one rather than the other. – Keith Jul 31 '13 at 12:22
  • you can control the width of the text input fields with css, I don't think you need to target each browser specifically. – Huangism Jul 31 '13 at 12:23
  • The text Name: E-mail: and Phone: -> under that the input (type text) the width is difference. – Navin Rauniyar Jul 31 '13 at 12:26
  • regarding the technique for css .. check this http://stackoverflow.com/questions/14227531/different-css-for-each-browser – Arun Jul 31 '13 at 12:29

3 Answers3

2

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.

bmurauer
  • 989
  • 8
  • 24
  • I have defined the width but also varying. – Navin Rauniyar Jul 31 '13 at 12:25
  • @NavinRauniyar then the problem is with the layout. Show the html code. – Mr_Green Jul 31 '13 at 12:26
  • @NavinRauniyar, edit your question to contain the relevant HTML and CSS code (as small as possible, but sufficient to reproduce the issue). If I you include a live URL too, enter the full URL with http:// and use a URL of a page that actually shows the problem. – Jukka K. Korpela Jul 31 '13 at 12:43
2

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

Navin Rauniyar
  • 10,127
  • 14
  • 45
  • 68
0

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"/>
Dash
  • 314
  • 2
  • 14