So I've got me a form.
When the form is displayed for the first time, there are no "error" divs.
So everything looks fine.
Then when there are errors, each error for each section of the form is
displayed as a div within the block the form lives in:
<div id='formblock'>
<div class='err' id='yousuck'>You made a mistake, you suck.</div>
<div class='err' id='yousmell'>You kind of smell funky, dude.</div>
[... form divs and such ...]
/* style */
.err {
font-size:12px;
font-weight:bold;
text-align:left;
height:15px;
background-color:#ff0000;
padding-left:15px;
padding-right:15px;
display:table;
}
#yoursuck { position:relative; top:-02px; left:20px; }
#yousmell { position:relative; top:200px; left:20px; }
I've got two problems:
1. The div's take up 15px at the top of the page, so when I reposition
them relatively where they are more contextually sensible, they push
everything (forms, divs, etc) down by 15px * the number of errors.
2. The "display:table" was to force the div to be displayed as variable
width. I only did that after trial and error, and it only works in
FF, not in IE. How do I make that div variable width in both FF and
IE?
Things I tried:
* replace div with span --> no change
* remove display:table --> errors don't display in the right place
* every option with display --> undesirable results
Suggestions?
Beckman
---------------------------------------------------------------------------
Peter Beckman Internet Guy
[EMAIL PROTECTED] http://www.purplecow.com/
---------------------------------------------------------------------------
______________________________________________________________________
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
