views:

298

answers:

1

I've got CSS that formats labels above form input elements and I'd like to replace the input elements with text from the database if I'm just displaying read-only data.

No matter what I do, changing the input fields to a span or asp:label will not properly render the label above the text.

I'm using this CSS:

div.formRow {
   padding: 2px 0px;
}

span.formItem {
    display: inline-block;
    position: relative;
    padding: 0px 5px;
}
span.formItem label {
    position: absolute;
    left: 5px;
    top: 0px;
}
span.formItem input, span.formItem select {
    margin-top: 20px;
}
+1  A: 

I'm guessing you need to add display: block to the input field replacement spans.

mercator
It works- but why?
Caveatrob
I assume you added "span.formItem span" or so to the "margin-top: 20px;" rule? Spans are inline elements and vertical margins don't apply to those (http://www.w3.org/TR/CSS21/box.html#margin-properties), so that top margin doesn't work unless you make sure the span is a block-level element.
mercator