CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Kinyanjui Kamau
Kinyanjui Kamau

Reputation: 1936

Form inputs not showing the same across browsers

I have this JSFiddle that shows a user registration form. I am using Twitter Bootstrap. I have just realized that it shows fine when using Firefox.

However, when using Chrome or IE, the textfields are slightly above the input-group-addons where I have glyphicons.

How can I make the form inputs show correctly across browsers?

<div class="input-group">                                               
     <span class="input-group-addon glyphicon glyphicon-user"></span>
     <?php
          echo $this->Form->input('username', array('class' => 'form-control',
               'placeholder' => 'Username', 'required' => 'required', 'type' => 'text'));
     ?> 
</div>

Upvotes: 0

Views: 38

Answers (1)

David Nguyen
David Nguyen

Reputation: 8508

Move the glyph class out and into their own spans.

<span class="input-group-addon"><span class="glyphicon glyphicon-user"></span></span>

Always try to keep elements separate from their containers to prevent styles from conflicting with each other.

Upvotes: 3

Related Questions