Form Text Box - Please Help ASAP!!

[ddpdll]

Hi Everyone,

Here's my prob:
I have a normal form text field in a web page next to a normal form submit button. When I view these in IE, no probs. When I view these in FF, the text box (although exactly the same height at the submit button) is slightly lower on the line than the submit button, which is a pixel or two above it.

This is messing up my design, not to mention messing up my mind!!!!!
Can you help??

Thanks in advance.

[jscheuer1]

Form elements are treated differently browser to browser. There are many more browsers out there than just IE and FF. Generally, it is best to just take a chill pill and live with slight differences like this. You can sometimes avoid them by designing your page with a strict DOCTYPE. Also, there are hacks of style that enable one to tweak the layout of elements in virtually all browsers except IE but, this will in all likelihood end up making your page look odd in some other browser(s), even if it looks OK to you in say, FF. The easiest to use is the !important hack. Say you want your submit button lower in FF but left alone in IE:


<input type="submit" value="Submit" style="position:relative;top:2px!important;top:0;">

Virtually all browsers will skip the second top declaration because you told them the first was !important but, IE will ignore that and use the second, in this case 0 adjustment, leaving all others to display the button 2px lower on the page than they otherwise would have. This may look good to you in FF but, as I said, I can guarantee that it will look odd in some browser(s).

[ddpdll]

Thank you very much! Problem solved!

It looks perfect in IE and FF.....what browsers do you think it might look wierd??

BFN.

[jscheuer1]

Opera and/or Safari, perhaps IE Mac and some or all versions of Netscape. Those just of ones I am familiar with somewhat. Then there is Konqueror and many others whose names escape me at the moment. With FF and IE covered though, that is by far most people.

[ddpdll]

Cheers.
I'll leave it as it is then; because, being a Windows junkie, I'm not interested in Mac users!!!!!!!!!!!

[Twey]

Konqueror and Opera both use Qt (or derivative, in Konqueror's case) to render form elements; Galeon and Epiphany use GTK+, I think, so should be the same as Firefox; Safari I'm guessing also uses Qt; IE/Mac I've no idea.

[jscheuer1]

Konqueror and Opera both use Qt (or derivative, in Konqueror's case) to render form elements; Galeon and Epiphany use GTK+, I think, so should be the same as Firefox; Safari I'm guessing also uses Qt; IE/Mac I've no idea.

Opera, whatever it uses, and as I think you have noted on at least one occasion, often looks oddly like IE. This makes it difficult to get a nice layout in Opera, IE and FF. Especially if you design for IE and then tweak for FF. It can be done though what often happens is that the adjustments needed for FF throw off Opera which will not act the way IE does using the various IE css hacks but that often otherwise sees things the way IE does.

So, starting from scratch, it would be better to design for FF and Opera and then tweak for IE.