CODEWITHSUNDEEP
csspositioning
Ty Morton
Ty Morton

Reputation: 733

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

Upvotes: 0

Views: 1402

Answers (3)

kristina childs
kristina childs

Reputation: 2210

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.

Upvotes: 0

iambriansreed
iambriansreed

Reputation: 22241

Position that submit button absolutely.

position: absolute;
bottom: 0;
right: 0;

Make sure it's parent element's position is set to relative.

Upvotes: 1

OneThreeSeven
OneThreeSeven

Reputation: 422

I have been dealing with a lot of issues like this recently, the first thing I would do is check padding, margin, and border. I'd bet that Firefox sets some default properties differently than the other browsers, and you need to override that. The 'computed styles' tab in inspector should be enough to figure out if that's the case.

Upvotes: 0

Related Questions