Search code examples
csspositioning

CSS Positioning inconsistent across browsers

I'm running into some positioning inconsistencies between browsers. I'm trying to position a submit button so that it hovers over the lower corner of the textarea.

In Chrome, Safari, and other browsers this works just like it should:

Chrome Screenshot

However, in Firefox, I get this:

Firefox Screenshot

Is there a different method for positioning that element, or have I left something out of my CSS?

Here is the link to the HTMl and the CSS: http://www.tylonius.com/clients/X10/GalleryDisplay.html

Solution

  • I just dropped that screenshot into photoshop and measured the bottom padding of the containing element. In the top image it's 11px high. In the bottom image it is 13px. I'm guessing that's your problem, but without seeing your code it's impossible to say for sure. Try looking at the CSS of the surrounding elements. I don't think the <input> elements are your problem.

    EDIT

    Now that I can see your code I'm certain this answer is correct. The problem is the length of the surrounding box. What you need to do is take the styling from #gallery-commentform and apply it to a div containing the form. then absolutely position the textarea adn the submit relative to the bottom left hand corner. that way no matter how browsers render the height/padding/yaddayadda it will always be the same distance from the bottom of the form.