CODEWITHSUNDEEP
htmlcssgoogle-chromefirefoxcross-browser
Michael Vattuone
Michael Vattuone

Reputation: 319

Label/Inputs positioned differently in Firefox than Chrome/Safari

I'm trying to build a "mad libs" style template, but I have come across an issue where relatively positioned inputs wrapped in labels display unexpectedly in Firefox, but appear as expected in Safari/Chrome. I have tried researching what could be causing this, but I cannot seem to figure out what the difference between the two browsers is that is causing this incompatibility.

Here is a fiddle so you can better understand what I am describing. Any clues on how to correct this? Maybe I need to rewrite my HTML? Ideally this is just a CSS issue, as this HTML is being rendered dynamically and I'd rather not have to change the back-end if possible.

And here is the HTML/CSS from the Fiddle:

HTML

<div class="feature" id="madlib">
  <h1>Test Test</h1>
  <div class="padded rounded border">
    <p>Dear <label>mom <input name="madlib_mom" type="text" /></label>,</p>  
    <p>Lorem ipsum <label>adjective <input name="madlib_adjective" type="text" /></label>   lorem ipsum lorem ipsum lorem ipsum <label>thank you <input name="madlib_thank_you" type="text" /></label> lorem ipsum lorem ipsum lorem ipsum lorem ipsum.</p>
    <p>Lorem ipsum lorem ipsum <label>noun 1 <input name="madlib_noun_1" type="text"
    </label> and <label>noun 2 <input name="madlib_noun_2" type="text" /></label> lorem ipsum lorem ipsummmm lorem, lorem ipsum lorem ipsum lorem ipsum <label>place <input name="madlib_place" type="text" /></label>, lorem ipsum <label>favorite food <input name="madlib_favorite_food" type="text" /></label> lorem ipsum lorem <label>good advice <input name="madlib_good_advice" type="text" /></label>.</p>
  </div>
</div>

CSS

input[type="text"] {
  display:block;  
  position:relative;  
  top:-30px;  
  border-bottom:1px solid pink;
  border-left:0;
  border-right:0;
  border-top:0;
}

label {
  display: inline-block;  
  position:relative;
  top:30px;
  margin-bottom:8px;
  padding:2px;
  text-align: center; 
  font-size:10px;
}

Thanks in advance for any help!

EDIT: To be more explicit, the labels are supposed to act as "mad libs" labels, such that they appear below the text input. They are in the right place, roughly, in all browsers, but appear to be pushed down almost twice the distance as they are in Chrome, which causes them to overlap with the subsequent line of text.

Upvotes: 3

Views: 4737

Answers (1)

Alohci
Alohci

Reputation: 82986

This is based on a discrepancy between how the browsers decide where the baseline of the label inline-block is. To avoid the problem use a vertical-align for the label other than the default baseline. For example, use vertical-align:top as per this jsfiddle: http://jsfiddle.net/4GhLA/2/

(It's very hard to tell whether Chrome or Firefox is correct with respect to the CSS specs here. It depends on whether the display:block of the input element establishes a line box inside the inline-block of the label element or not.)

Upvotes: 2

Related Questions