Question

This is a two part problem. Solving it for Firefox breaks IE6, and solving it for IE6 breaks Firefox. WebKit works fine.

This demonstrates the problem in Firefox: http://jsfiddle.net/UpZca/2/

“Import Submission” link is slightly higher than “Export Submission”, which is a problem. IE6 works fine at this point – the alignment is correct.

I know that when using ‘inline-block‘, vertical alignment issues can be fixed with vertical-align:top, so I tried that first. You can see that it fixes the problem in Firefox: http://jsfiddle.net/UpZca/1/

However, with this change IE6 decided that it is going to move “Import Submission” down all the way to the bottom of the invisible file input. Take a look at the last link again in IE6 to see what I mean.

btw, jsfiddle doesn’t render the code the same way as pure IE6 does. In the links above, my text is covered up by the gray Browse button from the file input. In pure IE6 that doesn’t happen, but this still demonstrates the positioning problem.

So, is there any way for me to make this code work in IE6 and Firefox?

Any ideas would be appreciated (except the one about not using IE6 :))

Answer 1

I ended up using Javascript to programatically add the vertical-align: top style if the browser is not IE.