CSS glitches in Firefox

Hi everyone,

Could someone enlighten me on some CSS glitches I got with Firefox? I am
trying to
align fields in a form without using tables, only CSS properties, and I
got some problem
with alert, hint and help elements. A part of the text of those elements
appears after the icons
when I set the element positioning with css (with absolute positions
more precisely)..

Does someone successfully use CSS or do you all use tables to align your
fields? I am
attaching a screenshot of the problem with the CSS overrided properties
used.

Jimmy


Here's a link to the attachment image in case it doesn't work:
http://img97.imageshack.us/img97/7066/firefoxcssglitch1of.jpg


.xforms-alert {
  display: inline;
  position: absolute;
  left: 500px;
}

.xforms-alert-inactive {
  display: inline;
  position: absolute;
  left: 500px;
}

.xforms-help {
  display: inline;
  left: 475px;
  position: absolute;
  width: 20px;
}

.xforms-hint {
  display: inline;
  left: 525px;
  position: absolute;
}

.xforms-hint-active {
  display: inline;
  left: 525px;
  position: absolute;
}

.xforms-input {
  font-size: 11px;
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-weight: normal;
  margin-bottom: 0px;
  padding-bottom: 0px;
}

.xforms-input-input {
  height: 18px;
  left: 200px;
  position: absolute;
  width: 250px;
}

.xforms-label {
  font: bold 12px verdana, arial, helvetica, sans-serif;
  margin: 0px 30px 0px 0px;
  padding: 0px;
  vertical-align: text-top;
}

.xforms-output {
  display: inline;
  margin-bottom: 0px;
  padding-bottom: 0px;
}

textarea.xforms-required-empty {
  border: 1px solid #f99;
  background: #fcc;
  padding-bottom: 3px;
  padding-left: 1px;
  padding-right: 1px;
}



--
You receive this message as a subscriber of the [hidden email] mailing list.
To unsubscribe: mailto:[hidden email]
For general help: mailto:[hidden email]?subject=help
ObjectWeb mailing lists service home page: http://www.objectweb.org/wws

Hello Jimmy,

I have had similar before and if I remember correctly I was able to
trace it to something in the css hierarchy/cascade that was causing a
width value to be applied.

hth
Colin

On May 10, 2006, at 5:04 PM, Jimmy Royer wrote:



--
You receive this message as a subscriber of the [hidden email] mailing list.
To unsubscribe: mailto:[hidden email]
For general help: mailto:[hidden email]?subject=help
ObjectWeb mailing lists service home page: http://www.objectweb.org/wws

Hi Colin,

That was it. I set the width of the elements (xforms-alert,
xforms-alert-inactive, xforms-help) to 0
and its okay! Thank you. :)

Jimmy

Colin O'Brien wrote:


--
You receive this message as a subscriber of the [hidden email] mailing list.
To unsubscribe: mailto:[hidden email]
For general help: mailto:[hidden email]?subject=help
ObjectWeb mailing lists service home page: http://www.objectweb.org/wws

Hi everyone,

Setting the width to 0 for the specified elements wasn't a good idea
after all, now they don't appear anymore in
IE, while in Firefox they are fine..

I dropped absolute positioning in favor of using fixed width for labels
just like the XForms Text Controls example.

Jimmy

Jimmy Royer wrote:


--
You receive this message as a subscriber of the [hidden email] mailing list.
To unsubscribe: mailto:[hidden email]
For general help: mailto:[hidden email]?subject=help
ObjectWeb mailing lists service home page: http://www.objectweb.org/wws

Hi Jimmy,

what I was really saying was that your help element was inheriting a
width from some over element higher up your stack.
Putting a zero width directly on the help element will indeed override
it, but may have undesirable side effects, as it seems you have
discovered.

And to answer your original question, no, we never use tables for
layout, only css ;-)

Good hunting
Colin

On May 11, 2006, at 9:36 AM, Jimmy Royer wrote:



--
You receive this message as a subscriber of the [hidden email] mailing list.
To unsubscribe: mailto:[hidden email]
For general help: mailto:[hidden email]?subject=help
ObjectWeb mailing lists service home page: http://www.objectweb.org/wws

Hi Colin,

Yeah I understood the inheritance part. :)

What I am asking myself now is how do you guys decide the width of a
specific input? I know there is a xforms-input-input
style which apply to *all* input elements, but what for elements that
need specific dimension? I saw no other way than to use the
ops generated id (#input-xforms-element-100 for example) which is not
good for maintenance.

Thanks for the insight so far..

Jimmy

Colin O'Brien wrote:


--
You receive this message as a subscriber of the [hidden email] mailing list.
To unsubscribe: mailto:[hidden email]
For general help: mailto:[hidden email]?subject=help
ObjectWeb mailing lists service home page: http://www.objectweb.org/wws