Welcome to WebmasterWorld Guest from

Forum Moderators: not2easy

Message Too Old, No Replies

Opera Form Spacing Issue

cannot eliminate spacing to the right of input text box

9:09 pm on Nov 20, 2008 (gmt 0)

New User

5+ Year Member

joined:Nov 20, 2008
posts: 3
votes: 0

NOTE I posted this in the Opera Subforum before seeing that that forum has not had posts in a while.. so hope you forgive me for reposting here.

I desperately need help with an Opera rendering issue. I am putting together a site that must render in Opera 9.5+. Usually I have no issues with Opera, as I use W3C standards compliant code with tableless CSS. However, I have one apparent bug that I cannot locate any information on and really need help with.

On my form I have three input boxes that render side by side in a small exact space. Each input box is in a left floated inline div that contains the label and box.
ie labels appear above the input [] is the div

[label/ [label/ [label/
input] [input] [input] [submit]

Everything lines up correctly EXCEPT the input boxes insist on adding about 5-7 pixels to the right side of each box which makes the form area to large and the submit button ends up dropping to the next line.

I have tried margin/padding 0 on all related fields and divs, moving the float to a div above (div.classname div) everything I can think of and the space will not go away.

Does anyone know how to eliminate this space? It is not occurring in any other of the 70 browser combinations I am validating the site in. Not even IE, this is an OPERA ONLY issue.

Thank you for your help!

3:31 am on Nov 21, 2008 (gmt 0)

Senior Member

WebmasterWorld Senior Member swa66 is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:Aug 7, 2003
votes: 0

Could you try to make a minimal set of code (html+css) that exhibits the problem and post that. The less code the better ...

A few random ones:

Spaces (as in text: a space) after things happen often on inline elements.

In my experience getting pixel perfect input fields if very hard, each browser (on each platform) has it's own idea on how to render input fields. It's actually allowed to do that by the standard in order to e.g. match the default UI of the platform it is running on.

How much "for IE's sake" code is there in your CSS? It's not that because it validates that it's useful and going to cause what you intend ... Try moving all unneeded stuff to a conditional comment to lighten the load on the standard compliant browsers.