Jump to content

Styling .net forms


elementalgrace
 Share

Recommended Posts

Hi This is my first post on the forum after a long time lurking and I'm really hoping someone can help me. I'm trying to use CSS to style a .net form (I'm not a .net developer, it just so happens that's what the form uses) so that it aligns and displays correctly in IE, firefox and opera. It's going pretty well but I've just come across a slightly weird problem and I'm not sure how to get around it. The style is applied for text boxes fine, but when text areas, check boxes and dropdowns are coded into the form, the .net code puts the label and input field into a <span> tag. I don't think there's a way to stop it doing this but surely I should be able to add a class that enables me align these spanned fields appropriately. It's someone elses code and it's starting to drive me a bit bonkers - so I'll put myself in the hands of the experts and unashamedly beg for help.The HTML looks like this:

.content ul{	width: 95%;	color: #000000;	height: auto;	text-align: left;	text-decoration: none;	list-style-type: none;}.content li{	margin: 0.7em 0px;}.content label{	width: 7em;	float: left;	text-align: right;	margin-right: 0.5em;	display: block;}.content li.submit{	color: #474747;	border: #474747;	padding-left: 5em;}.content .buttonhov{	border-right: #1e5cdb 2px inset;	border-top: #1e5cdb 2px inset;	border-left: #1e5cdb 2px inset;	border-bottom: #1e5cdb 2px inset;}.content input, .content textarea, .content Select{	color: #474747;	background: #bcc8cf;	border: 1px solid #474747;	width:175px;}.content span.label{    width: 7em;	float: left;	text-align: right;	margin-right: 0.5em;	display: block;}

Many thanksEG

Link to comment
Share on other sites

Ok, so you have a <textarea> within a <span> within a <li> ?

<li><label for="chkContent">Allow access to Content</label><span title="Allow Access to Content Section for creating and editing page content."><textarea>Hello</textarea></span></li>

you could change it's appearance like this:

<style>li span textarea{color:red;}</style>

Is that what you meant?

Link to comment
Share on other sites

Hi Scott,Thanks for the reply. I tried adding that to the stylesheet but it doesn't seem to have any effect. I tried adding it as .content li span textarea so that it's within the content class like the rest of the form and it's still not having an effect.The fields that have the spans in them are all indenting until I just have a big diagonal line of fields that won't align. I find this a bit weird since the label isn't inside the span but it's indenting too.I meant to say it's doing the same for checkboxes too.I don't have a copy on the web to show you though.

Link to comment
Share on other sites

Hi ScottThanks but I got the problem sorted through trial and error in the end. It ended up being that the label width was too narrow. For some reason if the label had to go onto 2 lines, it knocked out the next field (with a knock on effect!). I just widened the label and hey presto - it works!Thanks very much for your help anyway :)

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...