homepage Welcome to WebmasterWorld Guest from
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

Opera Form Spacing Issue
cannot eliminate spacing to the right of input text box

5+ Year Member

Msg#: 3790819 posted 9:09 pm on Nov 20, 2008 (gmt 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!



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

Msg#: 3790819 posted 3:31 am on Nov 21, 2008 (gmt 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.

Global Options:
 top home search open messages active posts  

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved